Typography is the primary tool web designers use to organise information. Before colour, before layout, before imagery — type tells the reader what to look at first, what matters most, and how the content is structured. Getting that hierarchy right is one of the most consequential decisions in any web design project, and one of the most commonly underestimated.

What is typographic hierarchy in web design?

Typographic hierarchy is the visual ordering of text elements so readers can navigate a page intuitively. A page with strong typographic hierarchy does not need to announce its structure — the structure is legible in the type itself. Headings are large and bold. Subheadings are smaller and lighter. Body text is regular and comfortable to read at length. Supporting text — captions, labels, metadata — is visually subordinate to everything above it.

The goal is not variety for its own sake. A web page with seven different font sizes and four different weights does not have strong hierarchy — it has noise. True typographic hierarchy uses the minimum number of distinctions necessary to make the content scannable and the structure clear.

The three levels that matter

Most web design projects require three clear typographic levels to function well:

Display level — the headline, the hero text, the page title. This is the largest type on the page. Its job is to orient the reader and communicate the page's primary purpose. In HTML, this is your h1. It should be immediately and unambiguously larger than everything else.

Secondary level — section headings, subheadings, card titles. These guide the reader through the structure of the content. Your h2 and h3 elements live here. They must be clearly smaller than the display level but clearly larger than body text — not a subtle shift, but an obvious one.

Body level — the paragraph text readers spend the most time with. This should be the most comfortable reading size on screen: typically 17–20px, with a line height of 1.7 or above, and a column width that does not exceed 70–75 characters per line.

Anything outside these three levels — captions, navigation, labels, metadata — should be treated as supporting type: visually smaller and lighter than the body, clearly distinguishable from primary content.

Building a type scale

The most reliable way to create typographic hierarchy in web design is to use a defined ratio — a fixed multiplier between each size level. Common ratios include 1.25 (Major Third), 1.333 (Perfect Fourth), and 1.5 (Perfect Fifth). Starting from a body size of 18px with a Perfect Fourth ratio gives:

  • Body: 18px
  • H3: 24px
  • H2: 32px
  • H1: 42px

Using a ratio ensures the steps between levels feel consistent and proportional. The Google Fonts Knowledge section covers type pairing and scale decisions in detail, and is one of the better free resources available for web designers working with typography.

Weight and contrast

Size alone is not enough to create hierarchy. Weight — the thickness of the letterform strokes — is equally important. A bold heading at 32px reads completely differently from a light or regular heading at the same size. The contrast between a heavy display weight and a regular body weight is one of the defining characteristics of clear, well-designed web typography.

That said, too many weights introduce visual complexity without adding clarity. Two weights is often sufficient for most web design projects: one for headings, one for body text. Three is a reasonable ceiling. Beyond that, the additions are usually cosmetic rather than functional.

Hierarchy and the grid

Typographic hierarchy does not exist in isolation from layout. The grid determines column widths, which constrain line length, which directly affects readability. A body size that works perfectly in a narrow editorial column becomes uncomfortable to read if the container is full-width at 1200px — the lines simply run too long for the eye to track comfortably.

This is why typographic and layout decisions need to be made together, not sequentially. Our guide to using the Swiss grid system in web design covers how column structures, gutters, and baseline grids shape these decisions in CSS — and why starting with the grid before setting type produces better results than the reverse.

Spacing as a typographic tool

The space between typographic elements is itself a typographic decision. The gap between a heading and the paragraph beneath it signals whether they are closely related or separate sections. A tight gap groups them; a generous gap separates them. Web designers who treat margin and padding as values to be adjusted at the end of a project miss the structural role spacing plays throughout it.

The relationship between whitespace and type is one of the areas where web design decisions compound most quickly. Our post on whitespace in web design and user experience covers macro and micro spacing in detail, including practical defaults for line height, paragraph spacing, and section padding that hold up across different content types and viewport sizes.

A practical pre-publish checklist

Before publishing any web design project, these typographic checks are worth running through:

  • Is there a clear, obvious size difference between each heading level?
  • Is body text comfortable to read at its column width — neither too wide nor too narrow?
  • Are heading and body weights visually distinct without relying on size alone?
  • Does the line height allow comfortable reading over several paragraphs?
  • Is supporting type — captions, labels, metadata — clearly subordinate to the body?
  • Does the hierarchy hold up on mobile, where font sizes and column widths are smaller?

If the answer to all six is yes, the typographic hierarchy is doing its job: making the content clear without drawing attention to itself. That invisibility is the goal. When typography works, readers notice what the page is saying — not how it is set.