TYPOGRAPHY ON THE WEB.

//Line length and line height#

The single highest-value adjustment is constraining measure. Body text wants roughly sixty to seventy-five characters per line; a paragraph spanning a 1600-pixel viewport is genuinely tiring to read because the eye loses its place on the return sweep. A max-width in ch units solves it in one line and does more for readability than any font choice.

Line height should vary with size, which the defaults don't do. Body text at around 1.75 to 1.85; a large display heading closer to 0.95 to 1.05, because the same ratio that reads comfortably at sixteen pixels looks like unrelated lines at seventy-two. I set it per size rather than once globally.

//Loading without the jump#

A web font that arrives late and reflows the page is both a visual annoyance and a real layout-shift penalty. Preload the weights actually used, serve woff2, use font-display: swap, and — the part most often skipped — pick a fallback with similar metrics so the swap doesn't move anything. Size-adjust descriptors let you tune the fallback to match, which makes the substitution nearly invisible.

Also ship fewer weights. Four weights of two families is around two hundred kilobytes for a distinction most readers won't consciously register. Two weights, chosen well, will usually look more considered rather than less.

//Small details worth the time#

Tabular figures for anything in a column that updates, so digits stop jittering. Proper hyphenation for narrow columns. Letter-spacing tightened slightly on large display sizes and opened up on small uppercase monospace labels. None of these are noticed individually; together they're most of the difference between typography that feels deliberate and typography that feels defaulted.