How to design a typography hierarchy that guides the eye
A founder's guide to typographic hierarchy: how to size, weight and space text so readers know exactly where to look — and how to keep it consistent across a whole site.
Hierarchy is the silent language of a well-designed page. Done well, a reader knows in half a second what the headline is, what's a subhead, what's body, and what's a caption — without thinking about it. Done badly, every paragraph competes for attention and the reader bounces.
Most hierarchy mistakes come from treating each text element as a one-off styling decision instead of part of a system. The fix is a small set of rules — a type scale, a weight ladder, a line-height rhythm — that you apply ruthlessly across the whole site.
This tutorial covers the system: how to pick a scale, how to use weight and color to create contrast, how to set rhythm with line-height and spacing, and how to QA the result on real content (not lorem ipsum).
- A primary typeface chosen and licensed
- A working type scale (see 'Build a modular typography scale')
- Real content to test against, not placeholder text
The three levers of hierarchy
Size: the most obvious lever. A 48px headline next to 16px body is unambiguous. But size alone produces a brittle hierarchy — if you only have one tool, every distinction has to be a big jump.
Weight: bold vs regular vs light is often more powerful than size for in-context distinctions. A 16px bold label next to 16px regular body creates hierarchy without changing the layout grid.
Color and contrast: a muted gray subhead next to a high-contrast headline reads as secondary information automatically. Combining color with weight gives you four 'levels' (bold high-contrast, regular high-contrast, regular muted, bold accent) without changing size at all.
The pros use all three in combination, with intentional ratios. Amateurs use size for everything and end up with a page that looks like a ransom note.
Rhythm: line-height, letter-spacing, and vertical space
Line-height is the difference between text that breathes and text that suffocates. Body copy wants 1.5–1.75x. Headlines want tighter, 1.05–1.2x — large type doesn't need as much vertical breathing room. Captions and labels can go to 1.4x.
Letter-spacing (tracking) should tighten as size increases. Large headlines often benefit from -0.02em to -0.03em; small uppercase labels need +0.05em to +0.1em to stay legible. Most typefaces ship with reasonable defaults — don't fiddle unless you have a reason.
Vertical spacing between elements is part of hierarchy too. A headline tightly hugged to its subhead reads as one unit; the same headline with twice the margin reads as a section divider. Use a spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px) and pick from it consistently.
Common hierarchy mistakes and how to fix them
Mistake 1: every section has an H1. Use one H1 per page (the page title). Subsequent sections use H2, with H3 nested inside. This is both better for SEO and clearer for readers using assistive tech.
Mistake 2: body copy below 16px. On the web in 2026, 16px is the floor. 17–18px is the new default for content-heavy sites. Smaller looks 'designerly' but fails for older readers and on high-DPI screens.
Mistake 3: all caps everywhere. ALL CAPS is fine for short labels (3–8 letters) but unreadable for sentences. If you're using all-caps for a navigation link, fine; for a paragraph, never.
Mistake 4: thin weights on small text. Light and thin weights look elegant in mockups and unreadable on production screens, especially against subtle backgrounds. Stick to regular (400) and above for anything under 24px.
Step by step
- 01
Define five levels max
Display (hero headline), H1, H2, body, small. Resist adding H3/H4 unless your content actually has nested structure. Five well-differentiated levels beat seven mushy ones.
- 02
Set the type scale
Pick a ratio (1.25 for content-heavy, 1.333 for editorial, 1.5 for marketing landing pages). Apply it from your body size up and down: 16 → 20 → 25 → 31 → 39 → 49 (1.25 ratio).
- 03
Assign weights to create a second axis of hierarchy
Display: 600. H1: 600. H2: 500. Body: 400. Small caps label: 500 uppercase. Now you have size AND weight contrast.
- 04
Set line-heights per level
Display: 1.05. H1: 1.1. H2: 1.2. Body: 1.6. Small: 1.5. Tighter as size increases, looser for sustained reading.
- 05
Use color to demote secondary text
Primary text: 90–95% contrast. Secondary: 60–70%. Tertiary (timestamps, captions): 50%. Below 50% fails accessibility for most palettes — check with a contrast tool.
Tip — Use OKLCH or HSL with a fixed hue and varying lightness for muted tones — they look cohesive instead of murky. - 06
Test on real content with long words and short
Drop in actual article copy, a 60-character headline AND a 12-character one, a paragraph with a code snippet, and a quote. Lorem ipsum hides 80% of hierarchy problems.
Watch out — If your hero headline only looks good at exactly the length the designer wrote, it will break the moment marketing rewrites it. - 07
Codify in CSS variables and components
Each level becomes a class or component: <Heading level={1}>, <Body size='lg'>. Centralizing prevents the slow drift of dozens of one-off font-size overrides.
Key takeaways
- Use size, weight, and color together — not size alone — to build hierarchy.
- Five well-differentiated levels beats seven mushy ones.
- Tighter line-heights as size increases; looser for sustained reading.
- Test with real content, including long and short variants, before shipping.
Frequently asked questions
+What body size should I use in 2026?
17–18px for content-heavy sites, 16px floor for compact UIs. On mobile, do not go below 16px or browsers will auto-zoom inputs.
+Can I use the same typeface for headlines and body?
Yes — many modern brands do (Inter, Söhne, Söhne Mono, Pangram Sans). Use weight and size to create contrast. A second typeface is optional, not required.
We design logos, brand kits, type systems and color palettes end-to-end.
Book a branding call