Typography feels accidental when every heading was picked independently. A scale gives the choices a relationship; it does not replace judgement.
Short answer: pick body text first, use a modest ratio such as 1.2–1.25 for dense interfaces, and expose a small set of semantic tokens rather than one-off sizes.
:root { --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; }
h1 { font-size: var(--step-3); } h2 { font-size: var(--step-2); }
| Context | Better ratio |
|---|---|
| Dashboard/UI | 1.2-ish |
| Editorial page | 1.25–1.333 |
A mathematically perfect scale that wraps every mobile heading badly is not a scale worth keeping. Check real copy at narrow widths.
The useful outcome is consistency: fewer arbitrary values, predictable hierarchy, and a system that survives the next page.
Cover photo by Stanislav Kondratiev on Pexels.