Typography Scale
The fixed set of text sizes a product is allowed to use, and the line heights and weights that travel with each one.
Deliverables & ArtifactsA type scale is a constraint that buys consistency. Six to nine steps, each with a name, a size, a line height and a weight, and nothing outside the set. Without one, a product accumulates 30 font sizes because every screen made a local decision, and hierarchy stops being readable — two headings a pixel apart are not a hierarchy.
Ratio-based scales (1.25, 1.333, the classic 1.618) generate pleasant progressions and rarely survive contact with a real interface: the steps are too coarse in the middle where most UI text lives. Most shipped scales are hand-tuned — tight in the 12–18px range, wider at display sizes. Line height belongs to the step, not to the component, and should be tighter as size grows.
Responsive is part of the scale
A 62px display size that stays 62px on a phone is broken. Either define per-breakpoint values in the token or use fluid clamping — but decide once, in the scale, rather than per component.
In practice
An audit of a five-year-old SaaS product found 31 distinct font sizes across the app, 11 of them between 13px and 16px. Collapsing to a seven-step scale changed almost nothing visually on any single screen and made the difference between a heading and a label legible for the first time across screens.
Where teams get it wrong
- Ratio scales applied literally, which give too few usable steps in the UI range.
- Line height set per component instead of travelling with the step.
- Fixed display sizes that do not adapt on small screens.
- More steps than anyone can choose between, which is how you get 31 sizes.
- A scale that exists in the design file but is not expressed as tokens in code.
Learn more
You may ask
Frequently Asked Questions
How many sizes should a typography scale have?
Six to nine. Fewer and hierarchy becomes hard to express; more and nobody can tell which step to pick, which is how products end up with thirty sizes.
Should a type scale use a mathematical ratio?
As a starting point. Pure ratios tend to leave gaps in the 12–18px range where most interface text lives, so most production scales are hand-adjusted from a ratio rather than generated by one.
Related terms
All terms- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Spacing ScaleThe fixed set of gaps, padding and margin values a product is allowed to use, usually built on a 4 or 8 pixel base.
- Color SystemThe palette plus the rules for applying it — semantic roles, contrast requirements, and the values behind each mode.
- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us