03
Scale
When heading and body sizes are too close, hierarchy requires reading. When they're far enough apart, you see it first.
4 min read
Typography hierarchy is not a size chart. It's a perceptual shortcut. The reader's eye should know what's a heading before it reads the words.
Compare
Title at 18px
Subheading at 17px
Ratio 1.125:1, hierarchy after reading
Body copy at 16px. Title, subheading, and body sit too close in size. You compare all three before structure becomes clear.
Title at 36px
Subheading at 28px
Ratio 2.25:1, hierarchy at a glance
Same structure. You knew which line was the title and which was the section, before you read either sentence.
The threshold is roughly 2:1. Below that, hierarchy is attentive. You must read both elements to determine their rank. Above that, it's preattentive. Structure registers before comprehension begins.
Type Scale
Page title at 29px
Subheading at 22px
Body copy at 16px. Scan this block without reading every word. Can you tell which line is the heading before you parse the sentence?
Drag the heading size one pixel at a time. At 21px against 17px body, the title, subheading, and body feel like siblings. At 36px and above, the page title announces itself. The subheading stays on scale, one step down, still clearly structural. You don't need color, underline, or all caps. Size alone does the work.
Most developers set h1 to 24px, h2 to 20px, and body to 16px. That's 1.5:1 at every level. It passes a checklist. It fails the glance test.
The 1.333 multiplier used above is a perfect fourth, one of several named ratios used in modular type scales.
The Rule
Headings should be at least 2x the body size for preattentive hierarchy.
Below 2:1, users must read both elements to compare them. Hierarchy requires comprehension. Above 2:1, the structure is visible before comprehension begins.
:root {
--text-body: 1rem;
/* Perfect fourth scale: multiply each step by 1.333 */
--scale: 1.333;
}
h1 {
font-size: calc(1rem * var(--scale) * var(--scale) * var(--scale));
line-height: 1.2;
font-weight: 600;
}
h2 {
font-size: calc(1rem * var(--scale) * var(--scale));
line-height: 1.25;
font-weight: 600;
}
h3 {
font-size: calc(1rem * var(--scale));
line-height: 1.3;
font-weight: 600;
}:root {
--text-body: 1rem;
/* Perfect fourth scale: multiply each step by 1.333 */
--scale: 1.333;
}
h1 {
font-size: calc(1rem * var(--scale) * var(--scale) * var(--scale));
line-height: 1.2;
font-weight: 600;
}
h2 {
font-size: calc(1rem * var(--scale) * var(--scale));
line-height: 1.25;
font-weight: 600;
}
h3 {
font-size: calc(1rem * var(--scale));
line-height: 1.3;
font-weight: 600;
}Common Mistake
Setting h1 to 24px, h2 to 20px, and body to 16px. Ratios that look fine in the inspector but feel flat on the page.