Typography Hierarchy: The Invisible Structure of Every Great Website

How visitors actually read web content

Eye-tracking research from the Nielsen Norman Group has consistently shown that web visitors don't read pages sequentially — they scan in an F-shaped or Z-shaped pattern, looking for visual anchors (large headings, bold text, images) that signal whether the content is worth deeper attention. The role of typography hierarchy is to make this scanning behaviour productive: to ensure that the most important information is visible in the scanning pattern, not hidden in body copy that only careful readers will reach.

The three levels of hierarchy

Primary level — headings (H1, H2): These are the anchors of the scanning pattern. H1 should appear once per page, large, and contain the primary keyword and value proposition. H2s divide the page into scannable sections — each should be self-explanatory when read in isolation, because many visitors will only read the headings and skip the body copy entirely.

Secondary level — sub-headings and pull quotes (H3, H4, strong): These provide the next layer of detail for visitors who found a relevant H2 and want to explore further. Pull quotes — enlarged excerpts of important body copy — are particularly effective at pulling skimmers into deeper reading.

Tertiary level — body copy: Body copy is for the minority of visitors who have been persuaded by the heading structure that the detail is worth their time. It should be optimised for reading comfort: 16–18px minimum size, 1.6–1.8 line height, no line lengths exceeding 70–80 characters.

Size relationships and contrast

The visual contrast between heading levels should be significant enough that the hierarchy is immediately apparent. An H1 at 48px and an H2 at 36px have a meaningful visual relationship. An H1 at 28px and an H2 at 24px are nearly indistinguishable — the hierarchy disappears. The general principle is that heading levels should have a ratio of at least 1.25x between them.

Consistency as a cognitive shortcut

Once visitors have learned your typographic system — which size means "heading," which style means "important," which visual treatment means "CTA" — they navigate subsequent pages with much less cognitive effort. This is why typographic consistency across a site produces better user engagement than variation, even if the variation is aesthetically interesting. Consistency creates a shortcut; variation requires recalibration.

Mobile typography: the overlooked dimension

Typography hierarchies designed on a large monitor often collapse on mobile. A heading that looks appropriately large at desktop size may need to reduce on mobile — but if the reduction removes the contrast between heading levels, the hierarchy breaks. Always test your typographic system at mobile sizes to confirm that the visual hierarchy survives the scale reduction. When in doubt, keep headings larger on mobile than your instinct suggests — they're carrying more navigational weight on a small screen.