In part 1 of Respecting Font Preferences, I discussed how in almost every major browser, users have the option to adjust the font family and sizes of their fonts to meet their unique needs. However, just because one font family is set to an equivalent of 16 pixels (the common default), does not mean another will render the same within our UI.

REM isn’t the answer

Almost all modern CSS frameworks now use REM for most measurements (more on that in the next part). And generally, that’s really good. However, there is a catch. Not every font renders like a 16 pixel font, even if it says so on the label.

Take the following Codepen example. Your default font and Jomhuria from Google Fonts are both are the exact same font size. And line height targets REM (that previously mentioned font size) to set its spacing. It’s clearly not working well. REM is typically meant to be used to meet WCAG 2 1.4.8 guideline of Visual Presentation, but it misses the point; legibility.

So what to do? There is a very valuable but lesser-known unit; EX. An EX unit is the height of the lowercase X within a font. Why use generic size when you can use property that scales with the preference or brand on the chosen font? Here’s a line-height comparison again showing a 1.5em version and a 3ex version. 3ex is the clear winner for scalability.

Character limits made easier

When trying to meet the 80 character limit of WCAG 2 1.4.8 spec, REM fails us again. Using REM to set the max-width of a line is far less accurate than using something like the CH unit, which is the width of the ‘zero’ number character in the font family. Thin or small-rendering fonts like Jomhuria will overflow the max characters allowed using REM, whereas CH will be closer to what you need. (I lean toward 60 CH, as each CH seems equal to 4/3 of an average character count).

You can see another example Codepen below of a 90 character line not working well with 60 REM and fairing far better using 60 CH. We’ll be using our old friend Jomhuria again.

Putting it all together

So what does all this mean? It means UI elements that adjust to the properties of your user’s choices or the white-label needs of a brand. No more generic sizing on buttons or wrappers that ignore the properties of your fonts. Check out the final Codepen of various fonts adjusting UI based on inherent font characterisitcs.

REM is still valuable for some assets such as border-radius. But if a value is a width or height asset, why not use the cues from the fonts themselves for a more fluid adaptive UI?

Extending CSS

EX and CH are so valuable that they really should have a REM-like equivalent, so UI can globally share common vertical and horizontal measurements from the baseline font. However, there is no such thing today as a REX or RCH unit. I have proposed this recently as a recommendation to the CSS Working Group and hope to see it one day. If you’re interested too, feel free to give it a nudge or like!