Checklist
Web Typography Checklist
A developer checklist for web typography: line length, WCAG contrast, type scale, line height, font weight, spacing, and token consistency. Use before shipping text-heavy interfaces.
Run through this checklist before shipping a text-heavy page, documentation site, or dashboard. Each item maps to an interactive Grade lesson with demos and CSS defaults.
Line length & measure
- Body containers use max-width: 65ch (or 45–75ch range)
- Constraint is on text blocks, not only the page wrapper
- Tested on wide monitors (27"+)
Contrast & accessibility
- Body text passes WCAG AA (4.5:1) against its background
- Secondary text passes 4.5:1 — not just "looks fine" gray
- Dark mode tokens re-tested on dark backgrounds
- Avoid pure white on pure black for long reading blocks
Hierarchy & rhythm
- Type scale uses consistent ratio steps in rem
- Largest heading step is ~2:1 or more above body size
- Body line-height is 1.5–1.65
- Headings at weight 600, body at 400
- Heading margins group titles with content below
- Same semantic elements use the same tokens everywhere
Interactive lessons
Related guides
Glossary
Frequently asked questions
- How often should I audit web typography?
- Audit when launching new text-heavy templates, adding dark mode, or changing the design system type tokens. Regression often appears when components copy one-off font sizes.
- What is the highest-impact typography fix?
- Line length (measure) and contrast are the most common failures with the fastest fixes. Start there before tuning scale or spacing.