home | posts | library | about | links

Atkinson Hyperlegible appears a little smaller than some other fonts at the same font size, so if you're replacing an existing font with it you may need to make the font size a little bigger

ok, so, i like Atkinson Hyperlegible a lot. i mean, it's the font used for this website! i think it looks good. but, you might run into a weird problem if you use it to replace the font in an existing thing:

this sentence, which i am padding out with extra words to give a better example, is typeset in 10pt Arial

this sentence, which i am padding out with extra words to give a better example, is typeset in 10pt Atkinson Hyperlegible

this sentence, which i am padding out with extra words to give a better example, is typeset in 10pt Verdana

at small sizes it's maybe a little easier to read than the Arial, but compared to Verdana (at the same font size!) it just looks smaller, and thus, is harder to read. so, if you're using a font like Verdana already, you might replace it with Atkinson Hyperlegible and find your text is now less legible. the trick is that font sizes are kind of fake and some fonts are just bigger at the same font size. especially, the height of the shorter lowercase letters like x (the "x-height") varies between fonts and contributes a lot to readability at small font sizes. so if you're switching from a font that's already very readable because of a high x-height you just gotta make the font size a little bigger. post ends here.

descent into confusion

...conveniently, if you're doing stuff on the web, there's this CSS property called font-size-adjust that lets you automatically scale the font based on the metrics of another font. so, trying to make everything match Verdana, let's set font-size-adjust:0.545, which is apparently the correct value:

this sentence, which i am padding out with extra words to give a better example, is typeset in (scaled) 10pt Arial

this sentence, which i am padding out with extra words to give a better example, is typeset in (scaled) 10pt Atkinson Hyperlegible

this sentence, which i am padding out with extra words to give a better example, is typeset in 10pt Verdana

and now it is fixed. yay. well, weirdly now the Atkinson Hyperlegible looks too big compared to the Verdana (it even overruns a line). and also the Verdana is now a little smaller when font-size-adjust isn't supposed to do that. (if this and the following example actually look right to you, that's probably because, and i only realised this after writing everything else, this issue might be firefox-specific -Ed.). and sometimes it doesn't work, like in this example at an 11pt font size, where both Arial and Atkinson Hyperlegible still look too small:

this sentence, which is padded with extra words to give a better example, is set in (scaled) 11pt Arial

this sentence, which is padded with extra words to give a better example, is set in (scaled) 11pt Atkinson Hyperlegible

this sentence, which is padded with extra words to give a better example, is set in 11pt Verdana

i am pretty sure this is because of rounding of font sizes to exact values. or something. i think the takeaway here is that small font sizes are the devil!!! because it seems to work just fine beyond a certain size.

also, the MDN describes a ridiculous method of determining the correct value for font-size-adjust whereby one plays higher-or-lower with the value for their preferred font until the property does nothing. i am sure the value must be automatically calculable somehow because the browser must surely know the metrics of a font to know how much to scale it by. but i cannot find any convenient method to get such a value for myself. strange.

this html stuff is tricky huh. this took like 3 detours in writing because every time i wrote up an example it didn't look the way i expected. anyway, sincere shoutouts to pebble for its tireless work on running critter.cafe, including changing the font to Atkinson Hyperlegible and inadvertently sending me down this rabbit hole. (and subsequently adding a font-size-adjust when i suggested it about 20% of the way into this rabbit hole, which seems to have worked well enough in this case, yay).


The ground quakes. The font used on this website is now a little bigger.


comments?

comments are posted manually. if this form doesn't work, send an email to ___twos@posteo.net (replacing the three underscores with a three-letter word that is my favourite number).