Type Scale
A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.
Definition
A type scale is an ordered set of font sizes generated from a base size and a ratio. Restricting the interface to these sizes produces consistent relationships and removes a recurring decision.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Setting up typography tokens.
- Reviewing a product with inconsistent text sizes.
- Building responsive typography.
Common mistakes
- Too many steps.
- Pixel-based sizing that ignores user preferences.
- Line height chosen separately from size.
- Treating the generated scale as fixed, when the useful scale is the subset the product actually needs.
A working interface scale
Base 16px, ratio 1.25, rounded to whole pixels. Roles are indicative, not prescriptive.
| Token | Size | Line height | Typical role |
|---|---|---|---|
| text-xs | 12px | 16px | Metadata, table captions, legal text. |
| text-sm | 14px | 20px | Secondary text, dense table cells, form hints. |
| text-base | 16px | 24px | Body text. Never smaller for sustained reading. |
| text-lg | 20px | 28px | Lead paragraphs, card titles. |
| text-xl | 25px | 32px | Section headings. |
| text-2xl | 31px | 38px | Page headings. |
| text-3xl | 39px | 46px | Display, used sparingly. |
Practical constraints
- 16px is the practical floor for body text. Smaller sizes trigger zoom on iOS form inputs and fail readability for many users.
- Round to whole pixels for interface sizes. Fractional sizes render inconsistently across platforms.
- Six to eight steps is usually enough. More steps means indistinguishable neighbours and arbitrary choices.
- Pair each size with a line height in the scale, so the two are never chosen independently.
- Define the scale in rem so it respects the user's browser font size setting.
Keeping a scale usable
Do
- Keep the number of steps small enough that each has an obvious job.
- Use a tighter ratio for interface text than for marketing pages.
- Set the body size first and build the scale around it.
- Round to values that render cleanly, and keep the rounded number.
Do not
- Add a step because one screen needed something between two existing ones.
- Use the same scale for a dense table and a landing page hero.
- Let the ratio decide when the resulting size is obviously wrong.
In practice
- i.
Different scales for marketing and product
Design systemsMarketing surfaces often use a larger ratio for drama while the product uses a tighter one for density. Both derive from the same base, which keeps them recognisably related.
- ii.
Eleven steps, four in use
Scale inflationA documented scale of eleven sizes had four in real use and seven appearing once each. The unused steps were not a resource, they were an invitation to inconsistency.
Local chart
FND·031 · Region II · Grid C2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Understanding Success Criterion 1.4.4: Resize Text
W3C, WCAG 2.1
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Short definition
The one-paragraph version, for when that is all you need.
- TrackingTERM·060 · Term
- Type ScaleTERM·058 · Term
Related concept
Connected closely enough to change how you apply this.
- Text ResizeA11Y·014 · Accessibility
- Design TokensSYS·001 · Design system
- Font SelectionFND·030 · UI foundation
- Font WeightFND·033 · UI foundation
- Letter SpacingFND·035 · UI foundation
- Line HeightFND·034 · UI foundation
- ProportionFND·013 · UI foundation
- ReadabilityFND·036 · UI foundation
- Responsive TypographyFND·038 · UI foundation
- ScaleFND·012 · UI foundation
- Typographic HierarchyFND·032 · UI foundation
- Variable FontsFND·037 · UI foundation