When working with UI typography, many developers and designers get confused about one thing:
If something is a “higher level” in the information structure, shouldn’t it use bigger and bolder text?
This assumption usually comes from document design (articles, blogs, documentation). But product interfaces—like settings screens, menus, and forms—follow a different logic.
This article explains why many design systems only need about four text sizes to cover most UI cases, and why elements like setting titles often use body text instead of headings.
1. Document Hierarchy vs UI Hierarchy
The first important concept is that document hierarchy and UI hierarchy are different.
Document hierarchy (content-heavy layouts)
Used in:
- Articles
- Blogs
- Documentation
- Landing pages
Typical structure:
H1
H2
H3
Body
Caption
Example:
TRANSLATION
Source Language
Japanese
Here, higher-level information uses larger typography. This helps readers understand the structure of a long piece of content.
UI hierarchy (interface layouts)
Used in:
- Settings screens
- Menus
- Lists
- Forms
Instead of emphasizing structure, the goal is fast scanning.
Typical pattern:
Section label → small
Item title → most readable
Item detail → smaller
Example:
TRANSLATION
Source Language
Japanese
In this case:
- Source Language is the most important thing to read.
- TRANSLATION is only a grouping label.
So the visual hierarchy becomes:
Item title > Item detail > Section label
This is why section labels are often smaller than the items inside them.
2. Why Setting Titles Usually Use Body Text
A common question is:
If a setting item has a title, why isn’t it a heading?
Because a settings screen is essentially a list of items, not a document.
Each row is a list item, not a section of content.
So design systems typically use:
| UI Element | Typography |
|---|---|
| Screen title | Display / Large title |
| Section label | Caption / Overline |
| Setting title | Body |
| Supporting text | Body Small |
This pattern is widely used across major platforms like:
- Material Design
- Apple Human Interface Guidelines
- Fluent Design System
3. The Real Meaning of “Body Text”
Another common misconception is:
Body text is only for paragraphs.
In UI design systems, Body doesn’t mean paragraph. It means:
The default readable text size for the interface.
That default size (usually 16–17px on mobile) is used for many UI elements:
Examples:
List items
Source Language
Target Language
Auto-translate on open
Form labels
Email
Password
Phone number
Menu items
Profile
Settings
Logout
Even buttons often use body-sized text.
So in UI design:
Body = the standard reading size of the interface
4. Why Most Design Systems Only Need ~4 Text Sizes
Many teams discover that most interfaces only require about four typography sizes.
A typical scale might look like:
Display
Title
Body
Caption
There are several reasons for this.
1. Humans only perceive a few clear size differences
When reading an interface, users typically distinguish only a few categories:
Large
Normal
Small
If you introduce too many sizes like:
12
13
14
15
16
17
18
20
22
24
most users won’t understand the hierarchy. The UI will just look inconsistent.
2. Product UI is usually simple
Most product screens contain only a few types of text:
Screen title
Section label
Item title
Supporting text
That’s why four sizes usually cover almost everything.
Example settings layout:
Settings (Display)
TRANSLATION (Caption)
Source Language (Body)
Japanese (Body Small)
3. Fewer sizes create better consistency
When a design system has too many text tokens, people start choosing randomly.
For example:
Designer A uses 16px
Designer B uses 15px
Designer C uses 17px
Even though the differences are small, the UI begins to feel messy.
A smaller typography scale encourages consistent decisions.
4. Development becomes simpler
From a development perspective, fewer tokens make implementation easier.
Example design tokens:
display
title
body
caption
Instead of something like:
titleXL
titleLG
titleMD
titleSM
bodyLG
bodyMD
bodySM
captionLG
captionMD
captionSM
Fewer tokens make components more reusable and predictable.
5. Size Isn’t the Only Way to Create Hierarchy
Another important principle:
Typography hierarchy is often created with weight and color, not just size.
Example:
16px Medium → primary text
16px Regular → secondary text
16px Semibold → emphasis
Even with the same size, the interface still has a clear hierarchy.
This technique is widely used in modern UI design because it keeps interfaces clean and balanced.
6. A Simple Mental Model
A helpful way to think about typography in UI is:
Display → screen titles
Title → major sections
Body → default interface text
Caption → supporting or metadata text
Most screens in an app can be built entirely using these four roles.
Final Takeaway
If your design system looks something like this:
Display → Screen title
Caption → Section label
BodyMd → Setting title
BodySm → Supporting text
That is completely normal and widely used in modern UI design.
Remember:
- UI hierarchy is not the same as document hierarchy.
- Body text is the default interface text, not just paragraphs.
- Most product interfaces only need about four text sizes.
A smaller typography scale usually leads to cleaner, more consistent, and easier-to-maintain interfaces.
Top comments (0)