The Web Typography Checklist

Open a page you shipped this year and score it against the twenty checks below. Most pages fail five or more. A typical audit reads like this: base size 15px, body line-height 1.3, ninety-character lines, three font families, straight quotes, eleven font files. That’s six fails before reaching the details — and not one of them was a decision. They were defaults nobody overrode.

A web typography checklist is a runnable audit: twenty one-line checks in five groups — foundations, reading, faces, details, delivery — each with a concrete number to verify against. Typography rarely fails through one big mistake; it fails as accumulated small defaults, and a checklist catches what judgment forgets to look for. This article closes out our typography guide by compressing its rules into a list you can run in twenty minutes.

A useful analogy comes from aviation: pilots run checklists not because any single item is difficult but because routine makes trivial items skippable — and the failures that follow look like bad luck. Every check below is trivial on its own. The sum is the craft.

Are the foundations in place?

1. Base size is 16px or more. Body text at 16px+ — smaller bases make every downstream number fight the reader.
2. Every size comes from a scale. Each font size equals base × ratioⁿ — no orphan 15px or 22px values that answer to nothing.
3. Sizes are in rem, not px. Text scales when a reader raises their browser default; px quietly overrides that choice.
4. Line heights land on a baseline unit. Each line height is a multiple of 4 or 8px — 16/24, 21/28, 28/36 — so vertical rhythm survives stacking.

Is body text comfortable to read?

5. Measure is 45–75 characters per line. Count an actual line; ~66 is the often-cited comfortable middle.
6. Body line-height is around 1.5. 24px on 16px text; tighter suits headlines, not paragraphs.
7. Paragraph spacing exceeds line spacing. The gap between paragraphs must read as clearly larger than the gap between lines.
8. Body contrast is at least 4.5:1. The WCAG AA number for normal-size text — measure it, don’t eyeball it.

Do the typefaces hold up?

9. At most two families. One for display, one for text — a third needs a written reason.
10. Hierarchy weights sit two stops apart. 400 against 600 reads as structure; 400 against 500 reads as a rendering glitch at the same size.
11. Display faces appear only at display sizes. High-contrast or decorative faces stay above roughly 28px, where their details survive.
12. Confusables are tested. Il1 and rn/m checked at the smallest size you ship.

Open a system that passes these first three groups — a scale-derived hierarchy with line heights on an 8px baseline, two families, and weights two stops apart, shown in live specimen text. It’s the reference picture: your audit is a diff against it.

Are the details set?

13. Tracking follows size. Tighter at display (−0.01 to −0.02em), zero at body, looser at caps and small labels (+0.02 to +0.08em).
14. Quotation marks are real. Curly “ ” and ’ — the straight ” is a typewriter survival, not typography.
15. No faux bold or italic. Only weights and styles the files actually ship; browsers fake the rest by smearing or slanting outlines.
16. Long-form text manages its rag. Hyphenation on narrow columns, no rivers in justified text, no one-word last lines in headlines.

Is delivery clean?

17. WOFF2 only on the wire. Every current browser reads it; nothing else earns its bytes.
18. font-display: swap is set. Text renders immediately in a fallback instead of flashing invisible.
19. Four font files or fewer. Each family × weight × style is a file; a page needing more usually has a hierarchy problem, not a font problem.
20. The fallback roughly matches. A system-face fallback, metric-tuned with size-adjust where your tooling allows, so the swap barely moves the page.

What do you do with the score?

Fix the foundations first, because they cascade: putting sizes on a scale repairs orphan values, baseline-aligned line heights repair rhythm, and both shrink the faces and delivery groups on their own — a page with a real hierarchy rarely needs a third family or an eleventh file. The details group is last for a reason: real quotes on a 90-character line is polish on a problem.

For the reasoning behind the details in particular, Matthew Butterick’s Practical Typography is a widely recommended reference — most of these checks compress arguments made at book length there and elsewhere.

Then make the audit concrete instead of mental. Rebuild your page’s numbers in Scale Composer — set your actual base and ratio, assign your weights and line heights, and compare the result against what you shipped. Every check the rebuilt system passes and your page fails is a one-line fix you can name — which is the entire point of running a checklist.