Researched, then narrowed
Every lesson draws on typographic research. Classical typesetting, WCAG contrast requirements, and readability studies form the foundation.
Each takeaway is tested on real interfaces, then narrowed to a default you can paste into CSS. One starting point you can trust, not an encyclopedia of options.
The basics
Seven long form articles, one concept each. Read in order or jump to what you need. Every lesson embeds interactive demos inline, not linked from the prose.
- Line LengthThe easiest typography mistake to fix4 min
- Contrast RatioWhy your gray text fails4 min
- Type ScaleHierarchy you see before reading4 min
- Line HeightLine height makes text breathe3 min
- Font WeightWeight creates hierarchy without size3 min
- SpacingMargins tie headings to content3 min
- Type TokensConsistent tokens earn reader trust3 min
Intermediate
Seven lessons on the modern CSS that makes the basics hold up. Fluid type, container queries, perceptual color, and the properties most codebases get wrong.
- Text WrapHow lines break when you're not looking3 min
- Fluid TypeScale that survives every viewport3 min
- ContainersTypography that responds to component width, not the viewport.4 min
- Color SpacesPerceptual color for dark mode and theming4 min
- Text DecorationUnderlines that don't clip or vanish3 min
- Tabular FiguresNumbers that align in columns3 min
- Text Box TrimRemove the invisible space fonts add3 min
Demos in the prose
Most typography guides describe the rules. Grade lets you feel them. Controls sit inside the article. Drag a slider, watch the text change, and remember why the rule exists.
Practical defaults
Every lesson ends with numbers you can use today: line lengths, contrast ratios, scale steps, and spacing tokens. No font pairing essays, no history lessons. Just the variables that affect readability on real interfaces.