Typographic Scales: Ratio-Based Type Systems That Work
A typographic scale replaces arbitrary font sizes with a ratio-based system: pick a base size and a multiplier, and every size derives mathematically. The result reads as intentional because the relationships are consistent — the same reason musical intervals sound harmonious. Generate yours in the type scale generator.
Choosing a ratio
| Ratio | Name | Character |
|---|---|---|
| 1.125 | Major second | Subtle — dense UIs, dashboards |
| 1.25 | Major third | Balanced default for products |
| 1.333 | Perfect fourth | Clear hierarchy — marketing pages |
| 1.5 | Perfect fifth | Dramatic — editorial, landing heroes |
| 1.618 | Golden ratio | Very dramatic — use with few levels |
Content-dense interfaces want small ratios (many distinguishable levels in little space); expressive marketing wants large ones (fewer, bolder levels).
From scale to system
A scale is sizes; a system adds line height and spacing. Line height tightens as size grows — 1.5–1.7 for body, 1.1–1.3 for display (check pairs in the line-height calculator). Large headings also want slightly negative letter spacing. Vertical spacing should come from the same base unit so text and space share one rhythm — see the spacing scale generator.
Make it fluid
Instead of jumping sizes at breakpoints, scale smoothly with clamp(): each step gets a min (mobile), max (desktop), and a viewport-driven middle. Our clamp generator does the slope math:
--text-3xl: clamp(1.56rem, 1.18rem + 1.9vw, 2.44rem);Implementation
:root {
--text-sm: 0.8rem; --text-base: 1rem;
--text-lg: 1.25rem; --text-xl: 1.563rem;
--text-2xl: 1.953rem; --text-3xl: 2.441rem; /* ratio 1.25 */
}Name tokens by role, use them everywhere, and delete every hard-coded font-size — the scale only works if it's the only source of sizes.