When a site grows beyond a handful of pages, typography stops being a per-page choice and starts being a system. A small set of well-chosen tokens — three font families, four sizes, two line-heights, one rhythm unit — can hold up an entire site without anyone ever needing to redesign the thing.
Start with the rhythm
Everything hangs off one number. Pick an 8-pixel grid and stick to it. Once you commit, every margin, padding, and gap is a multiple of 8. This single decision removes 80% of the visual noise you see on unfinished sites.
:root {
--u: 8px; /* base unit */
--s-1: calc(var(--u) * 1); /* 8 */
--s-2: calc(var(--u) * 2); /* 16 */
--s-3: calc(var(--u) * 3); /* 24 */
--s-4: calc(var(--u) * 4); /* 32 */
}
Three families is plenty
You don’t need a font for every role. Most sites get away with three:
- A display face for headings. High contrast, distinctive, used sparingly.
- A body face for paragraphs. Optimized for reading, neutral, used everywhere.
- A mono face for tags, code, and metadata. Friendly, never decorative.
The mistake people make is treating type as decoration. Type is infrastructure. Treat it like a utility.
Type scale from a ratio
Pick one ratio — 1.2 (minor third) is the safe default — and compute the scale from a single base size. The math stays out of your head and the rhythm stays consistent.
Restraint is not the same as absence. A small palette, used well, beats a large one used carelessly.
The rest is just discipline.