Eight things that make text readable
Each principle paired with how it lands in CSS. The interactive page lets you feel them; this is the reference.
Vertical rhythm
Tie line-height and spacing to multiples of one base unit so text sits on an even vertical cadence — the steadiest, most underrated lever in screen type.
line-height: 1.5;
margin-block: 1.5rem; /* one rhythm unit */Measure
Line length drives reading comfort. Around 45–75 characters keeps the eye's return sweep reliable; wider and readers lose their place.
max-width: 66ch;Modular scale & hierarchy
Derive every size from one ratio (1.2 minor third, 1.25 major third, 1.618 golden) so headings, body and captions read as one family — and the size steps between heading, body and caption are obvious without tuning each one.
--step-0: 1rem;
--step-1: 1.25rem;
--step-2: 1.563rem; /* ×1.25 */Leading
Body copy needs looser line spacing — roughly 1.5–1.6 unitless. Tighten it for large display, open it slightly for small text.
line-height: 1.55; /* unitless */The grid
A shared column structure aligns everything and kills most arbitrary placement decisions.
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;Contrast
Build hierarchy from size, weight, space and case — not colour alone. Contrast that survives greyscale survives accessibility.
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;Pairing & restraint
One or two families, a handful of weights. Two families and a few weights look intentional; a dozen fonts just look noisy.
--display: "Fraunces", serif;
--body: "Hanken Grotesk", sans-serif;Alignment & the rag
Prefer left-aligned, ragged-right for long text; justification on the web opens rivers of white. Watch the rag for awkward shapes.
text-align: left;
text-wrap: pretty;Sensible starting values
Reach for these unless the design says otherwise — then deviate on purpose, not by accident.
Worth reading
Foundational books
The Elements of Typographic Style
The canonical text. Where the working principles — measure, scale, rhythm — are set out with unmatched clarity. Dense, but it's where the vocabulary comes from.
Grid Systems in Graphic Design
Müller-Brockmann's case for the grid — still the clearest argument for why structure beats taste — the discipline behind everything we align.
The New Typography
The Bauhaus-era manifesto for asymmetry, function and clarity over ornament — the root of the modern sensibility.
On the web
Practical Typography
The fastest way to get a team to "good." Start every newcomer on "Typography in ten minutes."
practicaltypography.com →The Elements of Typographic Style Applied to the Web
Bringhurst's principles translated into HTML and CSS, with working technique for each — the bridge from book to browser.
webtypography.net →More Meaningful Typography
The article that popularised modular scales for the web — how to choose a ratio and design from the content out.
alistapart.com →System guides
Human Interface Guidelines — Typography
How a platform handles type styles, Dynamic Type and weight-based hierarchy at scale.
developer.apple.com →Material 3 — Type system
A complete type scale mapped to roles (display, headline, body, label) — a useful model for a token-driven system.
m3.material.io →