Engineering · 8 min read · Updated Feb 2026
The typographic scale: ratios that keep hierarchy consistent
A practical guide from our team on building ratio-based type systems, choosing musical intervals, and shipping scalable CSS tokens.
Key takeaways
- A typographic scale works like a musical scale: base size, ratio, and number of steps define hierarchy.
- Major Third (1.25), Augmented Fourth (1.414), and Golden Ratio (1.618) cover most modern interface needs.
- Role-based assignments (H1, H2, body, button) make handoff cleaner for designers and developers.
When we build brand systems, type scale is the backbone. We use it to create consistent visual rhythm across headings, body text, captions, and controls.
How we define a typographic scale
We model typography using three values: a base size f0, a ratio r, and step count n. The underlying formula is f_i = f_0 * r^(i/n). In plain language: each step is multiplied by the same ratio so the hierarchy feels intentional rather than random.
Recommended ratios in product UI
- 1.25 (Major Third) for gentle hierarchy and dense interface layouts.
- 1.414 (Augmented Fourth) when you need stronger differentiation while keeping readability.
- 1.618 (Golden Ratio) for expressive marketing pages and clear visual cadence.
Material baseline we often start from
For teams aligned with Google Material, we often start with Roboto role mappings and then tune ratio and letter spacing per channel.
$mdc-typography-styles-headline1: (font-family: unquote("Roboto"), font-size: 97);
$mdc-typography-styles-headline2: (font-family: unquote("Roboto"), font-size: 61);
$mdc-typography-styles-headline3: (font-family: unquote("Roboto"), font-size: 48);
$mdc-typography-styles-headline4: (font-family: unquote("Roboto"), font-size: 34);
$mdc-typography-styles-headline5: (font-family: unquote("Roboto"), font-size: 24);
$mdc-typography-styles-headline6: (font-family: unquote("Roboto"), font-size: 20);
$mdc-typography-styles-body1: (font-family: unquote("Roboto"), font-size: 16);
$mdc-typography-styles-body2: (font-family: unquote("Roboto"), font-size: 14);
$mdc-typography-styles-button: (font-family: unquote("Roboto"), font-size: 14);Implementation pattern we recommend
- Set a base (usually 16px for web).
- Choose a ratio preset (Major Third, Augmented Fourth, Golden Ratio, or custom).
- Map every role explicitly (Display/H1/H2/Subline/Lead/Body/Button).
- Export CSS/SCSS tokens with the same naming conventions used in design files.
Our rule: we optimize for readability first, then expression. A system that ships consistently beats one-off type styling every time.