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.
