Typography Hierarchy: The Visual Language Users Understand Without Thinking

Nobody reads your website

That sounds harsh, but Nielsen Norman Group's eye-tracking research confirms it: people read about 20-28% of the text on an average web page. The rest? Scanned, skimmed, or skipped entirely.

This isn't a failure of your content. It's human behavior. And typography hierarchy is how you design for it.

What is typography hierarchy?

Typography hierarchy is the system of visual cues that tells users what to read first, second, and third. It's the reason you see a headline before body text, even though your eyes could technically land anywhere on the page.

Hierarchy works through three main levers:

1. Size

The most obvious lever. Bigger text gets attention first. A well-structured page might use:

• Hero heading: 48-64px (grabs attention)
• Section headings (H2): 28-36px (organizes content)
• Sub-headings (H3): 20-24px (breaks up sections)
• Body text: 16-18px (comfortable reading)
• Captions/labels: 12-14px (supporting information)

The key ratio matters more than the absolute sizes. A common approach is using a modular scale with a ratio of 1.25 (Major Third) or 1.333 (Perfect Fourth). So if your body is 16px:

Body:    16px
H4:      16 × 1.25 = 20px
H3:      20 × 1.25 = 25px
H2:      25 × 1.25 = 31px
H1:      31 × 1.25 = 39px
Hero:    39 × 1.25 = 49px

2. Weight

Font weight creates hierarchy without changing size. This is especially powerful when you're working within a single font family:

• Bold (700-800) for headings and emphasis
• Semibold (600) for subheadings and labels
• Regular (400) for body text
• Light (300) for large display text where the size itself provides emphasis

Variable fonts like Inter let you use any weight between 100-900, giving you fine-grained control. But be careful: too many different weights create noise rather than clarity. Stick to 2-3 weights maximum.

3. Color and contrast

Not all text needs to be the same color. A three-tier approach works well on dark backgrounds like we use in the Font Pairing Gallery:

• Primary text (white, #ffffff): headings and key content
• Secondary text (gray-300, #d1d5db): body paragraphs
• Tertiary text (gray-500, #6b7280): captions, metadata, timestamps

This creates depth without adding visual clutter. The user's eye naturally gravitates to the highest-contrast elements first.

The F-pattern and how hierarchy supports it

Eye-tracking studies reveal that users scan web pages in an F-shaped pattern:

1. A horizontal movement across the top (they read the headline)
2. A shorter horizontal movement lower (they scan the first subheading)
3. A vertical movement down the left side (they scan for interesting starting points)

Good typography hierarchy reinforces this pattern. Your H1 catches the first horizontal sweep. Your H2s catch the second. Your left-aligned structure supports the vertical scan.

Practical spacing rules

White space is part of hierarchy. The space around elements signals their importance and grouping:

• Heading to body text: 8-16px (tight association)
• Between paragraphs: 16-24px (same section, different thoughts)
• Between sections: 48-64px (new topic)
• Between major sections: 80-120px (new context)

A rule of thumb: the space before a heading should be larger than the space after it. This visually connects the heading to its content rather than to the previous section.

h2 {
  margin-top: 3rem;    /* 48px — distance from previous content */
  margin-bottom: 1rem; /* 16px — close to its own content */
}

Line height and measure

Two often-overlooked aspects of hierarchy:

Line height (leading) should increase with font size for headings and decrease for body text:

• Body text: 1.5-1.7 line-height (comfortable reading)
• Headings: 1.1-1.3 line-height (tighter, more impactful)

Measure (line length) directly affects readability. The ideal line length is 45-75 characters. On the web, this typically means:

• max-width: 65ch for prose content
• Never let lines stretch to full viewport width on desktop

Common hierarchy mistakes

1. Too many levels: If you have H1 through H6 all styled differently, users can't distinguish between them. Three to four levels is enough for most content.

2. Decoration over function: Drop shadows, gradients, and text effects might look creative but they often muddy the hierarchy. If you need decoration, let the font itself carry the personality (that's what heading fonts are for).

3. Inconsistent spacing: When the gap between sections varies randomly, the page feels chaotic. Stick to a spacing system (4px, 8px, 16px, 24px, 32px, 48px, 64px) and use it religiously.

4. Color hierarchy ignored: Making everything white on a dark background creates a wall of text. Use opacity or gray shades to push secondary information back.

Building hierarchy with font pairings

The fastest way to establish hierarchy is with two different fonts. Browse the Font Pairing Gallery and notice how each pair naturally creates two distinct levels: the heading font demands attention while the body font quietly handles readability.

The best pairings don't need bold, italic, size changes, or color tricks to create hierarchy. The font contrast does the work for you.