Typography Hierarchy: Choosing Fonts That Guide the Eye
Typography hierarchy shapes how users read and understand your content. Learn how to use font size, weight, spacing, and pairing strategies to guide attention, improve readability, and create stronger visual structure.
Typography does two things simultaneously: it communicates what the words say, and it communicates the structure of the page. When typography hierarchy is working, readers know without thinking which text is most important, how sections relate to each other, and where to focus first. When it isn't working, every element competes for attention at equal volume.
Most typography problems aren't font choice problems. They're hierarchy problems. Too many text sizes with no consistent logic. Body text that looks almost identical to subheadings. Headlines that don't feel dominant enough to anchor the page. This guide explains how to build a type system that guides the eye instead of fighting it.
What Typography Hierarchy Actually Does
Hierarchy in typography creates a reading sequence without requiring the reader to consciously think about where to look. It works through five variables:
- Size — the most powerful signal. Larger text reads as more important.
- Weight — bold text draws the eye even when size differences are subtle. Often more effective than size for creating mid-level emphasis.
- Color — dark text on light background reads first. Lighter gray signals secondary or supporting text.
- Spacing — more space above a heading signals a new section. Tight spacing groups related elements together.
- Style — italics and all-caps create distinction, but lose effectiveness when overused.
The goal is to arrange these variables so that a first-time visitor can scan the page and immediately identify the headline, understand the section structure from subheadings, and find the detail they're looking for in body text — without reading everything.
The Three-Level Type System
Most websites need exactly three text levels to work well: headlines, subheadings, and body text. Adding more levels (H4, H5, caption styles, pull-quote styles) creates complexity that usually undermines rather than improves hierarchy.
Level 1 — Headline (H1): The main message. One per page. It should be the most visually dominant element in the content area — noticeably larger than everything else. Its job is to communicate the single most important thing about the page in the time it takes to glance at it.
Level 2 — Subheadings (H2–H3): Section markers. They chunk the page into navigable sections and tell scanners what each part covers. Subheadings should be clearly subordinate to the H1 but clearly dominant over body text. The size gap between H1 and H2 is often where hierarchy breaks down — too small a difference and the page feels flat.
Level 3 — Body text: The detail. Regular weight, comfortable reading size (minimum 16px, 18px is better for most contexts), generous line height. Body text should be clearly the smallest and lightest weight text on the page. If body text looks similar to a subheading, the subheading isn't doing its job.
Font Size Ratios: Why Random Sizes Don't Work
Most flat hierarchies are flat because font sizes were chosen arbitrarily — "the H1 felt too big at 48px so I made it 36px, the H2 was 24px but that felt close so I bumped it to 28px." The result is a scale where the ratios between levels vary randomly, and the visual differences don't feel intentional.
Using a mathematical ratio solves this. Pick a base size (typically your body text size — 16px or 18px) and multiply up or down by a consistent factor:
- Perfect Fourth (×1.333) — the most versatile ratio for web. Body at 18px becomes H3 at 24px, H2 at 32px, H1 at 42px. Clear distinction at every level without feeling oversized.
- Major Third (×1.25) — subtler, works well for content-heavy pages and editorial layouts where dramatic size jumps would feel loud.
- Golden Ratio (×1.618) — creates strong dramatic contrast. Works well for landing pages; can feel too extreme for long-form content.
The ratio isn't sacred — it's a starting point. Round to whole numbers (32.4px → 32px), and adjust when something looks wrong. But having a ratio means every adjustment has a reason, and the scale feels intentional even to visitors who can't articulate why.
Font Pairing: Two Families Maximum
The two-font rule exists because using more than two typefaces almost always creates visual noise rather than hierarchy. Every new font family adds a new "voice" to the page, and multiple voices compete rather than support each other.
Three pairing approaches that work reliably:
Serif for headlines, sans-serif for body. The contrast between the two styles creates clear level distinction. The serif adds character and authority to headlines while the sans-serif maintains readability at small sizes in body text. This is the default choice for editorial and professional contexts.
Same family, different weights. Using one typeface family with multiple weights (Light, Regular, Medium, Bold, Black) creates a highly cohesive look. The hierarchy comes entirely from weight rather than font style. Works well for modern, minimal designs. Requires a font with enough weight range to create clear distinctions.
Display font for headlines, neutral body font. A distinctive display or decorative typeface for headlines with a simple, highly readable font for body text. The display font creates personality and memorability while the neutral body font stays out of the way. The risk: display fonts can become trendy and date quickly.
Weight: The Underused Hierarchy Tool
Font weight is often more effective than size for creating emphasis within body text, because size changes interrupt reading flow while weight changes don't. A bold word in a paragraph draws the eye without requiring the reader to mentally switch contexts.
A weight scale that works for most pages:
- Black / ExtraBold (800–900) — H1 only. Dominant and attention-anchoring.
- Bold (700) — H2, CTAs, and critical callouts. Clearly secondary to H1.
- SemiBold (600) — H3, labels, UI elements.
- Medium (500) — Emphasized body text, navigation items.
- Regular (400) — All body text. The baseline.
- Light (300) — Captions, timestamps, secondary metadata. Use sparingly — low weight at small sizes reduces readability.
The principle: each level of the hierarchy uses a meaningfully different weight, not just a slightly different one. If H2 is Bold and H3 is SemiBold, the visual distinction needs to hold at the size you're using. Test by squinting — if H2 and H3 look the same weight, add more contrast.
Line Height and Spacing
Line height (the space between lines of text) affects both readability and the perceived size of a text block. Tight line height makes text feel dense and hard to scan. Too loose and the eye loses its place tracking back to the start of the next line.
- Headlines (H1–H2): 1.1–1.2× the font size. Tight, so the headline reads as one visual unit.
- Body text: 1.5–1.7× the font size. The standard range for comfortable reading. 1.6× is a safe default.
- Subheadings (H3): 1.2–1.4× — between headline and body text.
Spacing between sections matters as much as line height within sections. The space above a subheading should be visibly larger than the space below it — this creates a visual association between the heading and the content that follows, rather than making it look like a footer to the previous section.
A reliable rule: space above a heading = 2× the space below it. So if your H2 has 12px of padding below it, give it 24px above it.
Read more about spacing principles in our guide on white space in design.
Color in Typography
Color creates hierarchy the same way weight does — without requiring size changes. A page with one text color feels flat even when sizes are correctly scaled. A page with a deliberate color system guides the eye through content levels.
A simple system that works:
- Headlines: Near-black (#0f172a or similar) — maximum contrast, maximum weight
- Body text: Dark gray (#334155) — readable, slightly less dominant than headlines
- Secondary text (captions, metadata, labels): Medium gray (#64748b) — clearly subordinate
- Accent color: One color, used sparingly for links and key callouts
The danger zone is using too many text colors. As soon as you add a third or fourth color to your type system, nothing reads as "accent" anymore — everything competes. Reserve color for elements that genuinely need to draw the eye: links, warnings, and critical labels.
See our guide on color psychology in web design for how color choices interact with conversion.
Testing Typography Hierarchy with the Blur Test
The blur test is the fastest way to objectively check whether your typography hierarchy is working. Blur a screenshot of your page until text is unreadable and look at the result. You should be able to:
- Clearly identify where the H1 is (it should be visibly the largest/darkest block)
- Distinguish section breaks from body text (subheadings should be noticeably darker/larger than surrounding paragraphs)
- Identify the CTA (distinct from all text elements)
If H1 and H2 look the same weight when blurred, the size gap is too small. If body text and H3 are indistinguishable, weight isn't doing enough work. Run your page through BlurTest and look specifically at which text elements remain visible — those are the elements driving your reading hierarchy.
Common Typography Mistakes
Typography Checklist Before Launch
- Clear, noticeable size difference between H1, H2, H3, and body text
- Maximum two font families used across the entire page
- Body text at minimum 16px (18px preferred)
- Line height 1.5–1.7× for body text
- Space above headings is larger than space below them
- Text contrast meets WCAG AA (4.5:1 for body, 3:1 for large text)
- Line length under 75 characters for body text
- All-caps used only for short labels, not body text or headings
- Typography scales correctly on mobile — test at actual phone size
- Blur test passes — hierarchy levels are distinguishable when blurred
Related guides: