Variable fonts (and the x-height problem)

[badlydrawnrob]

Variable fonts allow you to use a single file for all font variations. It's reasonably supported for base features (font-weight, font-style) ... but browser compatibility seems a bit confused. It seems that variable fonts are well supported, but the above link shows low support for font-variation-settings. Safari seems to handle this site fairly well. font-variant is also handy for ligatures etc.

Why is this important?

Fonts are variable, even in the same family! You can have two fonts that are exactly the same size (16px for instance) and because their x-height is different, it'll look inconsistent when used on the same line of text. This is why it's generally the sensible thing to never use two different fonts on the same line of text.

It's fine to have a heading, or a code block as different fonts, but there are a good number of things you have to watch out for when picking your typography; otherwise it can look unprofessional.

The current fonts

1. Finding fonts that match

It just so happens that DejaVu Sans Mono and Verdana have the same x-height, which is quite large in comparison to other fonts. It took quite a bit of trial and error to find the perfect fit. Verdana was designed to be readable at small sizes on the low-resolution computer of the period (Wikipedia), so it's a fair size larger than other fonts.

2. Hangovers from other font combinations

I'm actually currently suppressing the size of <code>inline code</code> in the Print First CSS code base, which affects the section with the yellow lines below. Why am I doing this?

 
As you can see below in the original version of Print First CSS without the current hack the x-height is very uneven:

---

---

1. Print First CSS utilises system-ui and ui-monospace fonts, which should be SF Pro and SF Mono on MacOS.
2. The ui-monospace font is massive, so it looks odd when written with inline text.

This difference might be fine with you, but in general it looks jarring to the eye, so should be avoided. The hack simple changes the size by about ½ a pixel but screws things up a bit for themes that inherit this fix. If those themes' fonts do have a similar x-height, you have to override the hack. Not so good.

It's a small thing, but it's far preferable to set your font-size once for body text and forget about it.

3. Weight, leading, and shapes matter too!

 
Above, I've matched two fonts to DejaVu Sans Mono and adjusted their pt (or pixel) size to give them a similar x-height. Unfortunately this isn't all we have to worry about:

1. The roundness and uniform stroke of the e and x of Apfel Grotesk give it a "fatter" appearance.
2. DejaVu Sans Mono also has uniform leading, which might not feel right when put together.
3. The strokes and the thickness of line in Rockwell also make it appear larger.
4. In fact, you might decide you don't want a serif font at all.¹

And that's not all: you've got condensed fonts, expanded fonts, bold fonts, thin fonts, italics, and so on. There's quite a bit to think about when you're throwing fonts around!

Variable font settings (other)

1. font-optical-size
2. Other font-variation-settings

Summing up

So variable fonts have lots of variety within the same font-family, but you'll generally be able to get a good match by mixing two of them together than you might do using separate font families. It also makes life easier with CSS as you only have one font file to worry about.

Furthermore, you can tweak it and change a variable font as much as you like. They're quite a bit more customisable than non-variable fonts.

Footnotes

1. Sometimes serif and sans-serif fonts work well together, but sometimes it's safer to mix like with like. Two sans-serif fonts are going to work well together. ↩