Type Scale: Rhythm and Hierarchy in an Interface
A type scale is a limited set of text sizes assigned to roles. How to build one, which numbers to start from, and why size alone does not create hierarchy.
What is a type scale?
It is the list of sizes your interface is allowed to use. If you have seven different sizes for similar texts, the interface looks improvised. If you have four or five, and each one has a clear role, the hierarchy is understood at a glance.
The definition that works best in practice is this: a limited set of text sizes assigned to roles such as body, label, section title, and page title (Design Project, “How to create a UI type scale”). The role name matters as much as the number.
Why should a designer care?
Because type takes up more of the screen than almost anything else. If sizes don’t follow a system, every new component adds one more, and the team ends up arguing about pixels instead of decisions. A scale closes that debate: the component uses the role, not a number.
It also makes development easier. A “section title” token can be changed in one place. A repeated “22 px” across twenty components cannot.
Which numbers should you start from?
There is no universal figure. Design Project offers these example values, with a 16 px base, and recommends adjusting them after testing:
| Role | Size | Line height |
|---|---|---|
| Label | 0.875 rem | 1.4 |
| Body | 1 rem | 1.5 |
| Section title | 1.5 rem | 1.25 |
| Page title | 2 rem | 1.15 |
Raw Studio gives a similar example for a product interface, with a 32 px semibold main title and 16 px body text at a 1.6 line height (Raw Studio, “How typography hierarchy boosts UI usability”). These are reference points. Adjust them for the typeface, the language, and the kind of product.
For long text, Butterick’s guide recommends a line spacing between 120% and 145% of the point size, and considers 110% too tight (Butterick, “Practical Typography: Line spacing”). That guide is written for print and for sustained reading, so use it as a reference for paragraphs, not for labels.
How do you build your own scale?
- Define the roles first. Body, label, subheading, section title, page title. Those are the ones your product needs.
- Assign one size to each role. Start with body text, which must be readable on mobile and on desktop. Then the rest.
- Set line height per role. Titles need less line height than paragraphs.
- Use a ratio as a draft. A modular ratio can give you an initial sequence, but you don’t have to use every value it generates. Design Project describes it as a design aid, not a requirement.
- Test with real content. Long texts, product names, languages with longer words. A title that works with three words can break with twelve.
There is a limit that isn’t only aesthetic. WCAG 1.4.12 (text spacing, level AA) doesn’t force you to use a particular line height, but it requires that no content or functionality is lost when a person applies a line height of 1.5 times the font size, paragraph spacing of 2 times, and letter and word spacing of 0.12 and 0.16 times (W3C, Understanding SC 1.4.12). Titles with tight line height and fixed-height boxes are the first to break. The details are in typography for interfaces.
Example
Illustrative example: a finance app has five different title sizes, one per screen, and help texts that change depending on who designed them. The team reduces the scale to four roles: body, label, section title, and page title. Each role has a documented size, weight, and line height. In the first review, the number of inconsistencies drops clearly, and new designers know what to use without asking. When testing a longer language, the section title breaks; the team adjusts the line height of that role, not the size of every role.
When NOT to use a closed scale
- In a single-page marketing piece. A rigid scale limits expression. You can make documented exceptions.
- If the interface has very little text. With two sizes, the scale is trivial and doesn’t need documenting.
- When the scale is applied without testing. A neat table of numbers that has never been seen on a real phone doesn’t help.
Common mistakes
- Having too many very similar sizes, such as 15, 16, and 17 px for different things.
- Scaling every role equally when the problem is only in one title.
- Using bold and uppercase excessively to make up for a lack of size.
- Forgetting line height and documenting only the size.
- Applying the same contrast standard to every role. WCAG asks for 4.5:1 for normal text and 3:1 for large text, and small labels are the ones that fail most.
How to start tomorrow
Open your product and list every text size that appears. Group them by role: what is body, what is a label, what is a title. If there are more than five, find the ones that are almost identical and merge them. Document each role with its size and line height in your design system. Then check the text contrast for each role, because small sizes suffer most. And if the scale is part of something bigger, the style guide is the place to record the decisions.