The Fundamentals of Readable Type.
Discover how measure, contrast, scale, and the other variables behind readable type work. Learn, experiment, and apply defaults you can paste straight into CSS.
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.
- MeasureThe easiest typography mistake to fix5 min
- ContrastWhy your gray text fails10 min
- ScaleHierarchy you see before reading4 min
- LeadingLine height makes text breathe4 min
- WeightWeight creates hierarchy without size4 min
- SpacingMargins tie headings to content4 min
- ConsistencyConsistent tokens earn reader trust5 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.