Font selection & weights

How to tell a quality font from a dressed up system font

Every font you load is a design decision and a network request. Get the selection wrong and the browser synthesises faux bold or faux italic by distorting the regular weight.

True styles vs. faux styles

Body text needs four files: regular, italic, bold, bold italic. Each gets a separate @font-face declaration mapping the same font-family name to a different font-weight and font-style:

Incomplete table? The browser synthesises. Faux bold adds stroke width to the regular. Faux italic slants the roman. Both look wrong.

True italics, not obliques

Quality serifs and humanist sans-serifs ship a true italic: a separately drawn cursive cut. Some sans-serifs (Helvetica, Univers) ship only obliques, the regular letterforms tilted at an angle.

How to tell: look at the lowercase a. A true italic shifts from the double-story to a single-story form. An oblique just leans the upright a over.

Variable fonts

A variable font packages multiple weights and styles into a single file. One file, any value (font-weight: 437).

Weight selection

Set body text in Regular (400), Book, or Medium (500). Below 300, thin strokes break apart at small sizes. Above 600, heavy ink makes paragraphs hard to scan. Load only the weights you use.

As headings grow larger, their weight should drop. A 48px Bold headline overwhelms 18px body. The same 48px in Regular feels balanced.

Evaluating font quality

Before committing to a typeface, check:

Kerning. Set "AWAY" or "To" at large size. Uneven spacing means weak kerning tables.
Weight range. Regular and Bold at minimum. Ideally Regular, Medium, Semibold, Bold.
Character set. Check é, ñ, ü, å. Missing glyphs produce empty boxes.
True italics. Look at a, e, f, g in italic. Redesigned, or slanted?
OpenType features. Ligatures, small caps, tabular figures? Free fonts often skip these.

Good sources: Adobe Fonts, Google Fonts, Hoefler, Klim, Commercial Type, Grilli Type, Colophon.

Define fallback stacks

Test with the web font disabled. A bad fallback shifts layout when the font loads.

For UI typefaces, check that l (lowercase L), I (uppercase i), and 1 (the digit) are visually distinct. In some sans-serifs these three characters are nearly identical.

Check your project's @font-face declarations. Do bold and italic map to real files, or is the browser synthesising them? Disable web fonts and check whether the fallback stack holds.