Type at small sizes

Most typography decisions are made at large sizes and applied to small ones, where they fall apart.

The familiar pattern: a designer picks a typeface for a headline, looking at it set at 80px in a Figma file. The typeface is beautiful at 80px. The brand kit ships with the same typeface specified for body text. The body text, set at 16px in a real browser, on a real screen, in a real reading context, is a different typeface. Same name, different object. Hairlines disappear into the pixel grid. Counters fill in. The italic, which was elegant at display, looks like a different font at body weight. The result is a brand that looks fine in the pitch deck and worse in the product.

A few rules I keep returning to.

Pick the body face first. The body face is doing ninety per cent of the typography work on most websites. Pick it for how it reads at 14, 16, and 18 pixels, in the actual rendering environment, on the actual operating systems your audience is using. Then pick the display face to pair with it. Not the other way round.

Use a typeface family with proper optical sizes if the budget allows. Inter has two sizes (text and display). Söhne has explicit text and display cuts. Fraunces has a continuous opsz axis. The difference is visible immediately and free, in CSS terms, once the file is loaded.

Test on Windows with ClearType, on macOS with default rendering, on iOS Safari, on Chrome on Android. The four are different enough that a typeface that reads well in one can read poorly in another. The studios that skip this step ship body type that looks fine to the designer (on a Mac with the typeface caching done) and worse to the audience (on a five-year-old Windows laptop with anti-aliasing turned off).

If you are stuck with a single-cut display typeface that does not work at body sizes, do not try to make it work at body sizes. Pair it with a different body face. Two faces is the right answer. One face that does both jobs badly is the wrong answer.

The single most useful resource I keep open while making these decisions is Type Scale, for sketching size relationships, and v-fonts.com for trialling variable fonts at different sizes in the browser. Neither is exotic. Both are free.

For deeper reading, Tim Brown’s Flexible Typesetting is the cleanest book on the underlying problem. Robin Rendle’s writing on web typography covers the same territory in essay form. The companion piece on colour at small sizes covers the related size-sensitivity problem on the colour axis.

Most typographic disasters in the brand kits I have audited come back to the same root cause: the body face was not chosen for being a body face. Pick the body face first. Most other decisions follow from there.