What is visual hierarchy in typography?

Visual hierarchy in typography is the way you use differences in type, such as size, weight, colour, case, spacing and position, to show readers which text is most important and in what order to read it. A clear hierarchy lets someone glance at a page and immediately find the main heading, the section headings, the body text and the small supporting details like dates and captions. It works because people notice contrast: text that is bigger, bolder, darker or surrounded by more space draws the eye first. Good hierarchy uses only as much contrast as each level needs, with a small number of clearly distinct levels. Bad hierarchy either makes everything look equally important or makes everything shout.

Most readers don't read web pages from top to bottom; they scan for the part they need. Typographic hierarchy is what makes scanning possible, and it's also how a page communicates structure to people who see it before they read a single word. In this article you'll learn the main tools for creating hierarchy, how many levels you need, how to combine the tools without overdoing it, how visual hierarchy relates to the semantic structure of your HTML, how to build a hierarchy in CSS, and how to test whether yours works.

Why Hierarchy Matters

A page without hierarchy forces readers to do the organising themselves. They have to read sentences to work out which ones are headings, which are labels and which are asides. A page with clear hierarchy does that work for them:

• Faster scanning: Readers jump between headings to find the section they want.
• Clear priorities: The most important message, offer or action is the first thing people notice.
• Lower effort: Consistent levels mean readers learn the pattern once and apply it across the whole site.
• Stronger brand impression: A confident, ordered hierarchy makes a site look deliberate and trustworthy.

The Tools of Typographic Hierarchy

You have six main levers. Each one creates contrast in a different way.

Size

Size is the strongest and most obvious signal. Larger text is read first. For size differences to register as a different level, they need to be clearly visible: a heading only slightly larger than body text tends to look like a mistake rather than a heading. A ratio-based scale, such as the ones described in what is a modular type scale, keeps size steps distinct and consistent.

Weight

Bold text stands out from regular text even at the same size. Weight is especially useful when you can't use size, such as in dense interfaces, table headers or small labels. Many hierarchies use size for the top levels and weight for the lower ones.

Colour and Contrast

Darker text on a light background reads as more important; lighter, greyer text reads as secondary. Colour can also signal function, such as links or warnings. Any text you de-emphasise still has to meet contrast requirements: WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum), at level AA, requires at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18pt, or 14pt bold.

Case and Letter Spacing

Uppercase text with slightly increased letter spacing works well for small labels and eyebrows above headings. It creates a distinct level without needing extra size. Use it sparingly and for short text only, since long runs of capitals are slower to read.

Typeface

A different typeface, such as a serif for headings and a sans-serif for body text, adds contrast through style. It's a strong signal, so it works best when limited to one or two roles.

Space and Position

Text with more space around it looks more important. Position matters too: readers start at the top and, in left-to-right languages, on the left. A heading with generous space above it reads as the start of a new section even before you look at its size.

How Many Levels Do You Need?

Most pages need fewer levels than designers expect. A typical article page needs about five:

1. Page title: The h1, the single most prominent piece of text.
2. Section headings: h2, clearly secondary to the title.
3. Subsection headings: h3, distinct from both h2 and body text.
4. Body text: The default, designed for comfortable reading.
5. Supporting text: Captions, metadata, footnotes and labels.

You might add an eyebrow label above headings, a lead paragraph, or a fourth heading level for long documentation, but every extra level makes the distinctions between neighbouring levels smaller. If you can't tell two levels apart at a glance, merge them.

Combine Tools, but Don't Stack Them All

Each level should differ from its neighbours in at least one clear way, often two. It shouldn't differ in every way at once.

Level	Size	Weight	Colour	Other
Page title	Largest	Bold	Darkest	Most space above
Section heading	Large	Bold	Darkest	Generous space above
Subsection heading	Slightly larger than body	Semibold	Darkest	Moderate space above
Body	Base	Regular	Dark	Standard spacing
Supporting text	Smaller	Regular	Muted grey	Tight spacing
Label or eyebrow	Small	Semibold	Accent or muted	Uppercase, tracked

Notice that the subsection heading relies mostly on weight, because it's only slightly larger than body text, and supporting text relies mostly on size and colour. Using big size jumps and heavy weight and bright colour on every heading would make the top of the hierarchy loud and leave nothing for emphasis.

Emphasis Through De-emphasis

Often the best way to make something stand out is to tone everything around it down. Rather than making a price huge and red, you can make the surrounding product details smaller and grey. The price stands out by contrast, and the page stays calm.

Visual Hierarchy and HTML Structure

Visual hierarchy and document structure should match, but they're not the same thing. HTML heading levels (h1 to h6) describe the structure of the content. Screen reader users often navigate by headings, and WCAG Success Criterion 1.3.1 Info and Relationships requires that structure conveyed visually is also available programmatically.

Two common mistakes break the link between them:

• Choosing heading tags for their look: Using an h4 because it's the right size, even though it introduces a main section, gives screen reader users a confusing outline.
• Styling text to look like a heading without using a heading tag: A bold div might look like a heading but it won't appear in a screen reader's list of headings.

Separate the semantic level from the visual style so each can be chosen correctly:

<section aria-labelledby="pricing">
  <p class="eyebrow">Plans</p>
  <h2 id="pricing" class="title-l">Simple, honest pricing</h2>
  <p class="lead">Choose the plan that fits your team.</p>
</section>

<aside>
  <!-- Structurally an h2, visually smaller because it's secondary -->
  <h2 class="title-s">Related articles</h2>
</aside>

Both headings are h2 because both start a top-level section, but the sidebar heading is styled smaller. The structure stays correct while the visual hierarchy reflects importance.

Build a Hierarchy in CSS

Define each level once as a set of tokens and classes, then apply them to whichever element is semantically correct.

:root {
  --text-strong: #111418;
  --text: #2b3138;
  --text-muted: #5b6570;   /* about 5.9:1 on white */
  --accent: #0b5cad;

  --font-body: "Source Sans 3", system-ui, sans-serif;
  --font-display: "Source Serif 4", Georgia, serif;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.title-xl,
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-strong);
}

.title-l,
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  margin-block: 2.5em 0.5em;
}

.title-m,
h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
  margin-block: 2em 0.5em;
}

.title-s {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong);
}

.lead {
  font-size: 1.25rem;
  line-height: 1.5;
}

.meta,
figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 0.5rem;
}

A few details worth noting:

• Headings use one typeface; everything else uses another: Only two families, each with a clear role.
• Weight steps down with size: h1 and h2 are bold, h3 and the small title are semibold, body is regular.
• Muted text still passes contrast: The grey is dark enough to exceed 4.5:1 on white.
• The eyebrow uses case, spacing and colour: It sits at a small size but is clearly its own level.

The colour contrast ratio in the comment can be checked with any WCAG contrast tool. If you change the palette, recheck every level, especially muted text and text on coloured backgrounds.

Hierarchy in Components

Hierarchy also applies inside small components such as cards. A card typically has three levels: a title, a short description and metadata.

<article class="card">
  <p class="meta">Guide · 6 min read</p>
  <h3 class="card-title">
    <a href="/blog/what-is-x-height">What is the x-height?</a>
  </h3>
  <p>Why the height of lowercase letters affects readability at every size.</p>
</article>

.card {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.card .meta {
  order: 3;
  margin: 0;
}

The title stands out by weight and a small size step; the description is body text; the metadata is smaller and muted. Using order places the metadata visually after the description while keeping it first in the source. Be careful with this: if the visual and source orders differ, keyboard and screen reader users experience a different sequence, so only reorder non-interactive content where the order doesn't change the meaning.

Test Your Hierarchy

The Squint Test

Step back from the screen or squint until you can't read the words. You should still be able to see the page title, the section headings and the body blocks as distinct shapes. If everything blurs into the same grey texture, the levels aren't different enough.

You can simulate this in the browser console:

document.body.style.filter = "blur(4px)";
// When finished:
// document.body.style.filter = "";

The Heading Outline Test

Check that the semantic structure matches the visual one. This snippet prints the heading outline of the current page:

for (const h of document.querySelectorAll("h1, h2, h3, h4, h5, h6")) {
  const level = Number(h.tagName[1]);
  console.log(`${"  ".repeat(level - 1)}${h.tagName} ${h.textContent.trim()}`);
}

H1 Pricing
  H2 Simple, honest pricing
    H3 Starter
    H3 Team
  H2 Related articles

Look for skipped levels and for headings whose visual size doesn't match their importance.

The Five-Second Test

Show the page to someone for five seconds, then ask what it was about and what they'd do next. If they can't say, the most important text isn't standing out.

---

FAQ: Visual Hierarchy in Typography

---

Conclusion

Visual hierarchy in typography is how you tell readers what matters and where to look next. Size, weight, colour, case, typeface, spacing and position are the tools, and the art lies in using just enough contrast between a small number of clear levels: a page title, section and subsection headings, body text and supporting details.

Build those levels once as reusable styles, keep them separate from the semantic heading tags so structure and appearance can both be right, and make sure de-emphasised text still meets contrast requirements. Then test with a blur, a heading outline and a quick five-second glance. If the important things stand out and everything else steps back, your hierarchy is doing its job.