A page that looks balanced in the design file can turn into hard reading once it ships. Subheadings blur into the body, the main heading wraps to three lines on a phone, captions nearly disappear. More often than not the typeface is not the problem; the sizes were simply chosen one at a time: 38 pixels looked right here, 22 pixels there.
Typographic hierarchy comes from the relationship between sizes, not from the sizes themselves. Build that relationship on a single ratio and the page gains a consistent rhythm; when a new page type arrives, nobody needs to argue about which size to use.
Sizes follow a ratio
A type scale multiplies the body size by a ratio to produce steps upwards and divides it to produce steps downwards. A 16-pixel body with a 1.25 ratio gives this scale: caption 12.8, body 16, third-level heading 25, second level 31.3, main heading 39.1 pixels. The ratios carry names borrowed from musical intervals: 1.2 minor third, 1.25 major third, 1.333 perfect fourth, 1.5 perfect fifth.
The starting point is usually the body text; browsers default to a 16-pixel body. If the body is wrong, every step built on top of it carries the same mistake, only larger.
Data
Headings grow fast as the ratio grows
Heading sizes at the fourth and second step, with a 16-pixel body.
- Main heading (step 4)
- Third-level heading (step 2)
| Category | Main heading (step 4) | Third-level heading (step 2) |
|---|---|---|
| 1.125 | 25.6 px | 20.3 px |
| 1.2 | 33.2 px | 23.0 px |
| 1.25 | 39.1 px | 25.0 px |
| 1.333 | 50.5 px | 28.4 px |
| 1.5 | 81.0 px | 36.0 px |
The chart shows why choosing a ratio is a design decision. At 1.125 the main heading is only 1.6 times the body, a calm contrast that suits dense interfaces full of tables, product lists and form fields. At 1.5 the heading reaches five times the body: effective on a landing page that says one thing loudly, tiring in a long article.
The same ratio becomes too much as the screen shrinks. A 50-pixel heading that feels balanced on desktop squeezes into two words per line on a 360-pixel-wide phone. The 40-pixel line in the chart is a practical limit we set ourselves on mobile: headings above it usually wrap to three lines. So on mobile we either step the ratio down or start the main heading one step lower.
Change the ratio, the body size and the line length in the playground below and watch the hierarchy of the same text change.
Interactive
Type scale playground
Every step changes together when you change the ratio. Push the line length past 75 characters, or see how a subheading struggles to separate from the body at 1.125; the pixel value of each step and a short verdict sit underneath.
On mobile, Heading 1 drops one step and Heading 2 half a step; body text never goes below 16 px.
Design · 6 min read
The scale that makes a page readable
When every size on a page is picked one by one, headings drift toward each other and subheadings blend into the body. A type scale derives every size from one base size and one ratio. Body text sets the base, and the ratio sets the distance between steps. Readers can tell where they are in the text from size alone and keep their place on the page.
The ratio is the distance between steps
A small ratio keeps the page calm
In long reads, small ratios such as 1.2 or 1.25 hold the text together. Larger ratios suit short, emphatic pages with little copy.
Sizes in this preview are set at their real pixel values.
| Step | Math | Size | Leading |
|---|---|---|---|
| Heading 1 | 16 × 1.254 | 39.1 px | 1.12 |
| Heading 2 | 16 × 1.253 | 31.3 px | 1.26 |
| Heading 3 | 16 × 1.252 | 25.0 px | 1.37 |
| Body | 16 | 16.0 px | 1.50 |
| Caption | 16 × 1.25−1 | 12.8 px | 1.50 |
- Line lengthComfortable line66 characters · ideal 45–75
- SubheadingClearly separates from the bodyHeading 3 / body 1.56 · minimum 1.3
- Main headingFits the screen comfortablyHeading 1 39.1 px · limit 72 px
Line length is the scale’s quiet partner
The right sizes still fail in the wrong column width. When lines run too long the eye struggles to find the start of the next one; when they are too short, reading keeps breaking. Robert Bringhurst’s range is still a good starting point:
A comfortable line
- Lower limit
- 45 characters
- Shorter lines make the eye jump too often and break the reading.
- Ideal
- 66 characters
- Recommended length for single-column body text, spaces included.
- Upper limit
- 75 characters
- Beyond this, finding the start of the next line gets harder.
Source: Robert Bringhurst, The Elements of Typographic Style
Line height works in the opposite direction to size. Body text reads comfortably around 1.5; the same value pulls the lines of a 40-pixel heading apart. Tightening line height to 1.1–1.2 for large headings and 1.25–1.3 for subheadings lets a heading read as one piece.
Turning a ratio into a scale
Picking a ratio is not enough; where each step is used has to be written down. Which step belongs to which heading, where do captions sit, which steps drop on mobile? When these decisions carry the same names in the design file and in code, a new page type can be added without a debate.
A short checklist
- Are the body size and the ratio written down, and do all headings derive from them?
- Does the subheading separate from the body by size, not only by weight?
- Is body text between 45 and 75 characters per line?
- Is line height tighter for large headings than for body text?
- Does the main heading fit on mobile without wrapping to three lines?
- Do the steps carry the same names in the design file and in code?
How was this post?