A defined sequence of font sizes used throughout a product, typically based on a mathematical ratio or design token system that creates visual harmony and hierarchy between heading levels, body text, labels, and captions. A well-defined type scale ensures that typographic relationships are consistent and intentional across every screen.
Common contexts
- Establishing a type scale in design tokens before any UI components are built in a new design system
- Auditing an existing product's font sizes to consolidate 14 inconsistent values down to a coherent 6-step scale
- Reviewing whether a proposed type scale works at both small mobile viewport widths and large desktop displays
Use when
Define a type scale at the beginning of any design system initiative — before components are built. A codified scale makes it trivial for any designer or developer to make typographically consistent decisions without consulting the original designer for every new screen.
Avoid when
Don't apply a rigid modular scale to marketing or editorial contexts where expressive typographic compositions intentionally break regular intervals for visual impact — a strict scale that works perfectly for UI components can make editorial design feel mechanical and joyless.
The value of a type scale isn't the specific sizes — it's the constraint. Giving a team six size options forces intentional hierarchy decisions; giving them a free range of any pixel value guarantees typographic entropy over time.
Real-world examples
- Material Design's type scale defines 13 named roles (Display, Headline, Title, Body, Label) at specific optical sizes, allowing product teams to apply a consistent visual hierarchy without ad-hoc font-size decisions.
- Stripe's Docs use a minor third (1.25×) type scale — H1 at 2.44rem, H2 at 1.95rem, body at 1rem — a ratio that provides clear hierarchy while keeping size differences subtle enough for technical documentation.
- Apple's Dynamic Type system applies a user-defined type scale multiplier across all native iOS apps simultaneously, meaning a user who increases their preferred reading size benefits from every App Store app that respects the scale.