In Safari only (noticed on iOS but reproducible in desktop Safari with responsive design mode) the images appear to be keeping their height constant when they scale down their width. Changing "height: fit-content" to "height: auto" seems to fix it.
Ah, that does indeed appear squished! I'm glad someone said something. Thank you for following up with the additional information. It should be fixed now.
Interesting to see the font rendering differences crop up, I haven't tested on anything except Linux. For context, I wrote a hacky shell script that uses Harfbuzz and ImageMagick to generate the comparison images in a Fedora 41 virtual machine. It's possible that something in that software stack causes the characters to render differently.
Interesting distinction there. I didn't know that was the difference between legibility and readability. I'd really like to hear more about this. Do you have experience with fonts that strike a better balance, or know of reading material that discusses this subject in more detail?
For example, if you grew up in an English-speaking country, your computer likely defaulted to Arial or Helvetica as its sans-serif font. Over time, your brain became familiar with how words looked in those typefaces—their proportions and shapes.
Because fonts like Inter and SF share similar proportions, your brain finds them easier to process, which makes them feel more readable.
I spent so many years reading the 6x13 "fixed" font in XTerm, starting with CRTs and moving over to LCDs.
I don't think anything is more readable to me. It hit the sweet spot of being condensed enough for easy reading but still with highly legible individual characters too.
I have always wished someone could have made a scalable version to bring it into the future of high resolution displays.
Thanks. I tried it, but it doesn't feel right to me. I think there are a lot of small deviations from the font I remember.
I even found a ~30 year old screenshot with some xterms in it, so I could verify that my memory isn't just distorted. The glyphs are different. But, the screenshot also feels a little foreign to me, so my memory may also be distorted ;-)
At this point, I keep coming back to Noto Sans Mono Medium as my fallback.
This is a fair question/critique. As I understand it, this is a particular consideration for coders and readers with dyslexia, as they flip the letters. The thought process is that by making the characters distinct, it reduces this problem.
I learned about mirror glyphs through a document linked in the Accessible Perceptual Contrast Algorithm (APCA) website. For context, APCA is the system that aims to supplant current color calculation methods in the Web Content Accessibility Guidelines (WCAG).
You know, I've heard this idea about proportional fonts before and have been intrigued by the idea. I use Neovim running inside Alacritty as my code editor, though, so unsure if it'll work for me or not.
Going to check that font out - thank you for the suggestion. :)
After redesigning my website to use Atkinson Hyperlegible fonts, I switched my terminal and code editor to the monospace variant to properly test it. After a month of testing and positive experiences, I felt motivated to investigate further and write an article comparing Atkinson Hyperlegible Mono to JetBrains Mono and Fira Code.
The visual comparisons use examples from an accessibility paper on homoglyphs and mirror glyphs. I chose JetBrains Mono and Fira Code as a baseline, since many developers use these fonts and find them familiar.
While Atkinson Hyperlegible Mono excels at character distinction, nothing is perfect. I detail trade-offs in the "Caveats" section, below the installation instructions.
I'm curious to hear others' experiences and thoughts. I'm fascinated by what role font choice plays in legibility and accessibility, but the research is relatively sparse in this area.
I was hoping to see some comparisons of blocks of English text, and blocks of program code text, rather than just character by character. That would help me understand how it feels to read in arbitrary blocks, as well as appreciate specific design characteristics.
I agree. This is a very enlightening discussion of individual glyph features that affect readability. But the thing that hit me immediately is the difference in how expanded or condensed these fonts feel. Even though in the examples, the text width of JetBrains and Fira is identical, JetBrains "looks" condensed to the point of being harder to read. But I feel like Atkinson goes too far the other direction and is too expanded. When I read it, I feel like I'm tripping over the empty space between the characters, or I have to move my eyes too much to read one word.
This might be of interest for you: https://www.codingfont.com/ I made it to select the perfect coding font. i will update it to include the Atkinson Hyperlegible Mono soon!
Hey, I'm a fan of your work. My font before this was Victor Mono, and I actually found it through your website. Do you publish the source code anywhere? I'd be interested to take a closer look at it.
The code was private but I see no reason not to open source it, so I just did! https://github.com/Typogram/coding-font-sveltekit This way you can add your own font to it, just modify codingfonts.ts and include the font files in the css!
If you feel like it, you can add this page https://www.codingfont.com/AtkinsonHyperlegibleMono to your article, it is the dedicated page for Atkinson Hyperlegible Mono with the options to compare it to other fonts on the side by side view.
This particular font seems to have very inconsistent kerning. The "isMultipleOf" identifier pushes the s & M & u and e & O way too tightly together, and the remaining letters seem inconsistently spaced as well.
Ah, thanks for digging this out, this is the version 1, which I made using a no code tool. the current version is made using sveltekit, it is also just open sourced in the other comment.
This is good feedback, thank you. When I wrote the article, I erred on the side of too few comparison images rather than too many. What would you recommend for comparison blocks? "The five boxing wizards jump quickly" and maybe a fizzbuzz?
For what it's worth, I generated the comparison images with Harfbuzz and ImageMagick, so in theory I could publish the script and then anyone could make their own comparison images. Fair warning: it's a quick and dirty shell script, written only to get the job done.
I would link to the downloads in the opening paragraph.
My impression is that while legible it is too fat. You'll notice that Fira Code and JetBrains Mono are similarly wide -- and narrower than Atkinson Hyperlegible Mono.
I'd recommend getting it from there rather than the Braille Institute's website since they require an email and EULA, but here's the other download link anyway.
With Nerd Fonts, I'd recommend downloading both and setting up a fallback system through fontconfig though. Unfortunately, some versions (Nerd Fonts, official download) are still missing the backtick/grave glyph.
I'm pretty much there with you. I tend to use Fira Code for the improved visibility, but really would prefer Consolas/Inconsolata, but there are a few character variations that I don't like as much and it's slightly harder to read (for me). I also have come to rely on the Nerd Fonts enhancements with my terminal prompt (Starship).
Character distinction isn't that important when reading english mainly because context automatically repairs any s1m1l4r1t1es b3tw33n w0rd5. Even numbers can be used the replace letters and it only slows down reading slightly. Leetspeak is only a worst case example. For example for b0Ok 0 and O causes virtually no pause.
But that's the exact reason why it's problematic in contexts where the exact character is important in a way not clear from context. Atkinson Hyperlegible is my favourite for reading passwords or urls with codes in them etc.
But how often is this needed in daily life? Why not just pick something that’s aesthetically pleasing based on personal preference rather than legibility because reading passwords doesn’t happen often at all imo?
Additionally the legibility metric used by the site isn’t even quantitative. It’s qualitative and opinionated so it’s not like there was an objective measure that says Atkinson is in actuality more hyperlegible… the hyper legibility is an opinion.
- What do you mean by squished?
- What device and browser are you using?
- Are all images affected or just certain ones?
A screenshot would help a lot if possible.