Typographic Hierarchy: Guide the Reader's Eye

Every piece of text on a screen competes for attention. Headings fight subheadings, body copy competes with captions, labels contest with values. Without deliberate typographic hierarchy — a system that visually ranks information by importance — readers must do the cognitive work of inferring structure themselves. Good hierarchy makes that structure explicit and effortless.

Typographic hierarchy is not a single tool. It is an orchestration of type size, weight, color, spacing, and placement. Use one of these levers alone and you get something crude. Use several together, in calibrated combination, and you get text that guides attention smoothly from the most important information to the supporting detail — exactly what effective communication requires.

What Is Typographic Hierarchy?

Typographic hierarchy is the visual system that communicates relative importance through differences in typographic treatment. When a heading looks more prominent than body text, and body text looks more prominent than a caption, hierarchy is working. When everything looks the same — or worse, when the wrong elements look important — hierarchy has failed.

The goal is not decoration. Hierarchy serves readers by letting them scan before they read, understand structure before they parse content, and find what they need before they read everything. This is how people actually consume digital content: they scan first, then commit to reading.

A useful way to test your hierarchy is to view your design through squinted eyes (or with reduced opacity). The structural skeleton of the page should remain legible — you should be able to identify what is most important, what is secondary, and what is supporting detail, without being able to read the actual words.

The Fundamental Distinction: Contrast

Hierarchy works through contrast. Any element that needs to be more prominent than its neighbors must differ from them in at least one typographic dimension — size, weight, color, spacing, or font. The greater the contrast, the more clearly the hierarchy communicates.

The challenge is calibration. Too little contrast and the hierarchy collapses — everything looks the same. Too much contrast and the page feels chaotic, with every element fighting for attention. Good typographic hierarchy is a carefully tuned system of contrasts, not a collection of individual decisions.

The Three Levels: Primary, Secondary, Body

Most typographic systems organize into three broad levels. Understanding these levels helps you think systematically about hierarchy rather than making ad hoc decisions element by element.

Primary Level: What They See First

Primary level elements are the dominant visual anchors of a composition. This is typically the main heading (H1), hero text, or page title — whatever is the most important single piece of information on the page. There should usually be only one primary-level element per view, or at most a small number of clearly ranked primary elements.

Primary text is often characterized by: - Significantly larger size than secondary and body text (often 2× to 4× the body size or more) - Maximum font weight for the typeface in use, or a display variant - Tight letter-spacing in many cases - Generous surrounding white space

Secondary Level: Structure and Navigation

Secondary level elements are the structural markers that divide content into navigable sections. Subheadings (H2, H3), section titles, sidebar headings, and category labels all live at this level. There will typically be several secondary elements on a page, and they need to be clearly subordinate to the primary level while clearly superior to body text.

Secondary text is often characterized by: - Moderately larger size than body text (typically 1.25× to 1.75×) - Increased weight relative to body text - Sometimes a different typeface than body text (if using a typographic pair) - Less dramatic letter-spacing than primary, but possibly still tightened relative to body

Body Level: The Content Itself

Body level is where most of the actual content lives. It should be the most comfortable, the most readable, the most neutral of the three levels. The goal at the body level is not to attract attention but to sustain it — to be legible and comfortable across extended reading.

Body text hierarchy is not flat, though. Within body text, you often have: - Lead paragraphs or drop caps that introduce a section - Pull quotes that highlight key passages - Captions beneath images (typically smaller, lighter, or in a different style) - Inline emphasis via bold or italic - Links via color or underline

Each of these creates micro-hierarchy within the body level, without competing with the primary or secondary levels.

Size: The Type Scale Foundation

Size is the most direct lever of hierarchy. Bigger = more important is a visual primitive that requires no learning. But how you progress from the smallest to the largest size in your system matters enormously.

Type Scales

A type scale is a series of font sizes related by a consistent ratio. The most commonly used scales are:

• Minor Third (1.2): 12, 14.4, 17.3, 20.7, 24.9, 29.9 — gentle, compact progression
• Major Third (1.25): 12, 15, 18.75, 23.4, 29.3, 36.6 — balanced, practical
• Perfect Fourth (1.333): 12, 16, 21.3, 28.4, 37.9 — the most widely used
• Golden Ratio (1.618): 12, 19.4, 31.4, 50.8 — dramatic contrast, better for display than body

/* Perfect Fourth scale (ratio: 1.333) */
:root {
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.333rem;    /* ~21px */
  --text-2xl: 1.777rem;   /* ~28px */
  --text-3xl: 2.369rem;   /* ~38px */
  --text-4xl: 3.157rem;   /* ~51px */
}

The value of a mathematically defined scale is not slavish adherence — it is a starting point that ensures the relationships between sizes feel intentional rather than arbitrary. In practice, you will adjust sizes to achieve the contrast you need, but starting from a rational scale saves a great deal of trial and error.

Responsive Type Sizes

Size hierarchy must adapt to screen size. At small viewport widths, the contrast between heading and body sizes needs to be reduced — a 3rem heading on mobile can feel overwhelming. The CSS clamp() function provides elegant control:

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

h2 {
  font-size: clamp(1.35rem, 2.5vw + 0.75rem, 2.25rem);
}

p {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
}

This approach maintains hierarchy across viewport sizes while preventing text from becoming either too small to read on mobile or too large to scan comfortably on desktop.

Weight: Bold, Semibold, and the Nuances

Weight is the second most powerful lever of hierarchy after size. Bold text within a paragraph immediately attracts attention. A semibold heading above body text creates distinction without requiring a large size difference.

Working with Weight in Practice

A common mistake is reaching straight for "bold" (700 weight) whenever differentiation is needed. But most font families offer a spectrum of weights — thin (100), extra-light (200), light (300), regular (400), medium (500), semibold (600), bold (700), extra-bold (800), black (900) — and using the full spectrum creates much more nuanced hierarchy than toggling between regular and bold.

Inter and Roboto both offer the full range of weights. EB Garamond offers fewer weights but pairs its regular and bold forms beautifully. When you choose a font for a typographic system, consider how many weights are available — more weights gives you more hierarchical options.

/* Full weight spectrum hierarchy */
:root {
  --weight-body: 400;
  --weight-medium: 500;      /* Slightly emphasized body text, nav items */
  --weight-semibold: 600;    /* H3, H4, subheadings */
  --weight-bold: 700;        /* H1, H2, primary headings */
}

.body-text { font-weight: var(--weight-body); }
.nav-item { font-weight: var(--weight-medium); }
h3, h4 { font-weight: var(--weight-semibold); }
h1, h2 { font-weight: var(--weight-bold); }

Weight Contrast Without Size Change

Weight alone can create strong hierarchy without changing size. A section heading and body text at the same size — one at weight 600, one at weight 400 — creates a clearly felt but spatially compact distinction. This is particularly useful in dense UI contexts like dashboards, data tables, and sidebars where vertical space is precious.

/* Compact hierarchy for dense UIs: weight without size change */
.data-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111;
}

.data-value {
  font-size: 0.875rem;
  font-weight: 400;
  color: #444;
}

Color and Opacity for Subtle Hierarchy

Color is a powerful but often underused tool for establishing hierarchy. Most designers think of color as decoration rather than a structural tool, but varying color and opacity within a typographic system creates natural, readable hierarchy with minimal size or weight changes.

The Grayscale Foundation

Before adding any hue, establish hierarchy through grayscale. Primary text — headings, key data, important labels — should be the darkest. Body text should be slightly lighter. Secondary text — captions, metadata, supporting information — lighter still. Disabled or placeholder text is the lightest.

:root {
  /* Grayscale text hierarchy */
  --color-primary: #111827;     /* Near-black: headings, primary data */
  --color-secondary: #374151;   /* Dark gray: body text */
  --color-tertiary: #6B7280;    /* Medium gray: captions, metadata */
  --color-quaternary: #9CA3AF;  /* Light gray: placeholders, disabled */
  --color-disabled: #D1D5DB;    /* Very light: disabled states */
}

h1, h2, h3 { color: var(--color-primary); }
p { color: var(--color-secondary); }
figcaption, .meta { color: var(--color-tertiary); }
::placeholder { color: var(--color-quaternary); }

Using Opacity

An alternative approach is to use a single text color and vary opacity. This is particularly useful for dark themes or over images, where absolute color values are less predictable:

.card-heading {
  color: white;
  opacity: 1;
}

.card-body {
  color: white;
  opacity: 0.8;
}

.card-caption {
  color: white;
  opacity: 0.6;
}

The limitation of the opacity approach is that it affects transparency of the text relative to whatever is behind it — which may or may not be what you want.

Accent Color for Emphasis

A single accent color in a primarily grayscale typographic system draws powerful attention. A link, a highlighted statistic, an active navigation item — shown in your brand color against grayscale text — will always command attention without disrupting the overall hierarchy.

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2563EB; /* Brand blue — stands out in grayscale hierarchy */
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Putting It Together: A Complete Hierarchy System

Individual levers matter less than how they work in combination. Here is a complete typographic hierarchy system for a content-focused website, using Inter as the primary typeface.

/* Base reset and typographic foundation */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* Font */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "EB Garamond", Georgia, serif;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

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

  /* Colors */
  --color-ink: #111827;
  --color-ink-2: #374151;
  --color-ink-3: #6B7280;
  --color-ink-4: #9CA3AF;

  /* Spacing */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
}

/* Primary heading */
h1 {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-2xl), 3vw + 1rem, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

/* Secondary heading */
h2 {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-xl), 2vw + 0.5rem, var(--text-3xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

/* Tertiary heading */
h3, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

/* Body text */
p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-ink-2);
  max-width: 70ch;
}

/* Captions and metadata */
figcaption, .meta, .caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
  color: var(--color-ink-3);
}

/* Labels and tags */
.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

This system uses size, weight, letter-spacing, and color together. Headings differentiate from body via size, weight, and letter-spacing. Body text differentiates from captions via size and color. Labels differentiate via size, weight, and text-transform.

Notice that no single element gets all the hierarchy levers turned up to maximum. Restraint is what makes hierarchy work. If everything is bold, nothing is bold. If everything is large, nothing is large. The system works because each level has a clear, specific treatment, and because those treatments create an unambiguous ranking.

The relationship between hierarchy and font pairing — when to use one typeface versus two — is explored in the Kerning, Tracking, and Leading guide. The technical foundations that make hierarchy choices possible — understanding how fonts are classified and what makes them distinct — are in the Font Classification Guide.