Visual hierarchy is the arrangement of typographic elements to show their order of importance. Without hierarchy, a page becomes a wall of text—every element competing for attention, nothing guiding the reader's eye. With effective hierarchy, users scan confidently, find what they need, and read in the intended sequence. Hierarchy is the difference between a page that communicates and a page that merely displays text.

Why Hierarchy Matters

Human eyes do not read web pages word by word from top to bottom. Eye-tracking studies consistently show F-shaped and layer-cake scanning patterns: readers skim headings, subheadings, and the beginnings of paragraphs, jumping between points of visual interest. Hierarchy serves this behavior by creating landmarks—typographic signals that say "start here," "this is secondary," and "this is detail."

Three properties create hierarchy:

1. Size — Larger text attracts attention first
2. Weight and contrast — Bold and high-contrast text stand out against lighter surroundings
3. Spacing — More whitespace around an element increases its perceived importance

These properties work together. A large, bold heading surrounded by whitespace dominates a page. A small, light caption tucked close to its reference element recedes appropriately.

Scannability and Reading Flow

Scannability is the ease with which a reader can extract key information without reading every word. Typography directly controls scannability through:

• Heading clarity — Descriptive headings that summarize the content below them
• Paragraph length — Shorter paragraphs with clear topic sentences improve scan patterns
• Visual breaks — Subheadings, lists, and pull quotes create rest points for the eye
• Consistent patterns — Predictable heading styles let readers build a mental model of page structure

Reading flow is the path the eye follows through content. Good flow moves from the most important element (typically H1) through supporting headings (H2, H3) into body text and supplementary elements (captions, labels). Disruptions in flow—sudden size changes, inconsistent spacing, or skipped heading levels—force readers to recalibrate, increasing cognitive load.

Heading Levels: H1 Through H4

Semantic HTML heading levels (H1–H6) should align with visual hierarchy. Each level has a distinct role.

H1 — Page Title

There should be exactly one H1 per page. It names the page's primary subject—the answer to "what is this page about?" Visually, H1 is the largest and boldest text element.

Typical treatment: 2.25–3rem, weight 700, tight letter-spacing (-0.02em to -0.04em), generous bottom margin.

Example: "Typography Hierarchy" on this page.

H2 — Major Sections

H2 marks the primary divisions of content. A reader scanning H2s should understand the page's structure without reading body text. Each H2 introduces a substantial topic block.

Typical treatment: 1.75–2.25rem, weight 600–700, moderate bottom margin with larger top margin to create section breaks.

Example: "Scannability and Reading Flow" above.

H3 — Subsections

H3 subdivides H2 sections. Use H3 when a section contains multiple distinct topics that need separation but do not warrant their own H2.

Typical treatment: 1.375–1.5rem, weight 600, tighter margins than H2.

Example: "H1 — Page Title" above.

H4 — Minor Divisions

H4 handles granular subdivisions—rare in web content but useful in documentation, legal text, and complex articles. If you find yourself needing H5 or H6 frequently, consider restructuring content.

Typical treatment: 1.125–1.25rem, weight 600, minimal size difference from body text compensated by weight.

Body Text

Body text is the workhorse of typography—the size at which most content is read. It must prioritize readability above all else.

Typical treatment: 1rem (16px) minimum, weight 400, line-height 1.5–1.75, measure 45–75 characters.

Body text should recede visually compared to headings while remaining highly legible. Avoid using color alone to differentiate body from headings; size and weight should carry the primary contrast.

For long-form content, consider a serif typeface at body size to improve sustained reading comfort. For UI-heavy pages, a sans-serif body maintains consistency with interface elements.

Captions and Labels

Captions and labels occupy the bottom of the hierarchy—they provide supplementary information without competing for primary attention.

Captions

Captions annotate images, figures, tables, and charts. They provide context, attribution, or explanation for visual elements.

Typical treatment: 0.75–0.875rem, weight 400, muted color (60–70% of body text contrast), tight line-height (1.4).

Captions should sit close to the element they describe—proximity reinforces the relationship.

Labels

Labels identify UI elements: form fields, navigation items, badges, and metadata. They must be legible at small sizes but visually subordinate to content.

Typical treatment: 0.75–0.875rem, weight 500–600, uppercase or sentence case depending on context, letter-spacing 0.02–0.05em for uppercase labels.

Building a Hierarchy System

A hierarchy system defines the relationship between all typographic levels in a project. Document it as a type scale:

:root {
  /* Type scale — Major Third (1.25) */
  --text-xs:   0.75rem;    /* 12px — captions, labels */
  --text-sm:   0.875rem;   /* 14px — small body, meta */
  --text-base: 1rem;       /* 16px — body text */
  --text-lg:   1.125rem;   /* 18px — lead paragraphs */
  --text-xl:   1.25rem;    /* 20px — H4 */
  --text-2xl:  1.563rem;   /* 25px — H3 */
  --text-3xl:  1.953rem;   /* 31px — H2 */
  --text-4xl:  2.441rem;   /* 39px — H1 */

  /* Weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line heights */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;
}

Map each token to a semantic role rather than using sizes directly in components:

.heading-1 { font-size: var(--text-4xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }
.heading-2 { font-size: var(--text-3xl); font-weight: var(--font-semibold); line-height: var(--leading-tight); }
.heading-3 { font-size: var(--text-2xl); font-weight: var(--font-semibold); line-height: var(--leading-tight); }
.heading-4 { font-size: var(--text-xl); font-weight: var(--font-semibold); line-height: var(--leading-normal); }
.body       { font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--leading-loose); }
.caption    { font-size: var(--text-xs); font-weight: var(--font-normal); line-height: var(--leading-normal); }
.label      { font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-normal); }

Interactive Demo

The demo below shows hierarchy in action. Observe how size, weight, and spacing work together to create a clear reading path from the most important element to the least.

Testing Your Hierarchy

Evaluate hierarchy with these practical tests:

1. The squint test — Blur your eyes or squint at the page. Can you still distinguish heading levels from body text? If everything blurs into uniform gray, hierarchy is too weak.

2. The outline test — Read only the headings. Do they form a coherent outline of the content? If yes, your heading hierarchy works.

3. The five-second test — Show the page to someone for five seconds. Can they identify the main topic and primary action? Strong hierarchy makes this possible.

4. The screen reader test — Navigate the page with a screen reader. Heading levels should match visual prominence and form a logical document structure.

Typography hierarchy is the backbone of readable design. Master it, and every page you build will guide readers with confidence—from the first headline to the smallest caption.