The four measurements that decide how a typeface behaves

Why two fonts at 16px are different sizes

Set the same sentence in Verdana and in EB Garamond, both at 16 pixels. The Verdana looks substantially larger. Nothing is wrong with either; the point size measures the invisible body the letters sit on, and the letters occupy different proportions of that body.

The number that governs this is the x-height ratio — the height of a lowercase x divided by the em. Approximate values:

Verdana        0.55
Helvetica      0.52
Inter          0.52
Georgia        0.48
Times New Roman 0.45
EB Garamond    0.40

So Garamond at 16px has an x-height of about 6.4 pixels and Verdana about 8.8 — a 38% difference in the part you actually read. This is why a design that looks fine in one face falls apart when somebody substitutes another at the same declared size.

The arithmetic to correct it: to match a 0.52 face at 16px using a 0.40 face, you want 16 × 0.52 / 0.40 = 20.8px, so set it at 21. CSS can do this for you with font-size-adjust: 0.52, which tells the browser to scale whatever face it ends up using so its x-height matches that ratio. Support arrived late and is now broad; it is particularly useful for fallback fonts, which is the case where the substitution is out of your hands.

Aperture, and why some faces fail at small sizes

Aperture is how open the gap is at the end of a stroke — the mouth of a c, the opening of an s or an a. Closed apertures, where the terminals curl back towards the body, look tidy at display sizes and turn c into o at 12 pixels. Humanist faces with open apertures stay legible smaller and on poor screens.

This is a real, checkable property rather than a matter of preference. Print a word containing c, e, s and a at 11px, look at it from a metre away, and see which letters have collapsed.

Stroke contrast

Contrast here means the difference between the thick and thin strokes of a letter. A Didone face such as Playfair Display has extreme contrast: hairlines that are lovely at 60 pixels and vanish at 14, especially on a low-density screen or on newsprint where ink spreads.

The rule that follows: high-contrast faces are display faces. Low-contrast faces survive small sizes, bad printing and bad screens. If you are choosing one face for a whole project and some of it will be small, choose the low-contrast one.

Descender and ascender length

Long descenders are beautiful and they eat line height. A face with long descenders set at 1.4 line height will have its p and g very close to the capitals of the line below. Faces drawn for screens — Inter, Source Sans, Public Sans — have short descenders and large x-heights precisely because they were designed to work at tight line spacing in small sizes.

The practical consequence: line height is not a property of the size, it is a property of the size and the face together. When you swap a typeface, re-check the leading.

Letters that must not be confused

One more property, and it matters more than any aesthetic question in certain jobs: how well the face distinguishes I, l and 1, and O and 0.

In Helvetica, capital I and lowercase l are the same vertical bar. In a reference number, a password, a tracking code, a part number or a one-time code, that is a real failure with a real cost. Faces that solve it do so deliberately — a tail on the l, a slash or a dot in the zero, serifs on the capital I:

• Inter offers an alternate l with a tail, and a slashed zero, both as OpenType features.
• IBM Plex Mono, JetBrains Mono and Source Code Pro distinguish all of them by default, and all three are free and openly licensed.
• Atkinson Hyperlegible, released free by the Braille Institute, was designed specifically to maximise the difference between similar characters for low-vision readers.

If your interface shows codes, use one of these for the code even if the rest of the page is set in something else. This is one of the few places where mixing faces is not a style decision but a correctness one.

How to compare two faces honestly

Not by looking at the name, and not by setting the alphabet. Set the same real paragraph of your own content in both, adjusted to matching x-height rather than matching point size, at the size and line length you will actually use. Then print it, or look at it on a phone.

Most typeface comparisons are made at 60 pixels on a large monitor, which is a test of how the face looks and not of how it works. The two questions have different answers surprisingly often.