Typographic Hierarchy
Master the art of visual priority in text — how size, weight, spacing, and contrast work together to guide readers through any interface.
8 min read
Every size is the base (16px) multiplied by the ratio raised to a step. One ratio yields a consistent, musical hierarchy instead of arbitrary sizes.
The full lesson
Every time a reader lands on a screen, their eye makes a split-second decision: where do I start, and what can I skip? Typographic hierarchy is the system of visual cues you design to make that decision feel effortless. Get it right and users absorb information without friction. Get it wrong and they scan past everything, click nothing, and leave confused.
This lesson covers the mechanics of typographic hierarchy — the tools you have, the traps to avoid, and how to build a system that scales across a whole product, not just one screen.
What Typographic Hierarchy Actually Is
Hierarchy is the perceived order of importance among text elements. It is a communication problem, not an aesthetic one. The goal is not beauty — it is controlled attention.
Every piece of text in an interface sits at one of three levels:
- Primary level — the one thing the user must notice. A page headline, an error message, a price. Typically one element per view.
- Secondary level — context and support. Subheadings, card titles, labels. Multiple per view.
- Tertiary level — detail and metadata. Body copy, captions, timestamps. Read when wanted, ignored when not.
When these three tiers are distinct and consistent, users build a mental model in seconds. When they blur together — when body copy and subheadings share the same visual weight — users have to work to figure out an order the designer never actually established.
The Six Levers of Typographic Hierarchy
You do not need more variety to create hierarchy. You need contrast across a small number of controlled variables. Using all six levers at once creates visual chaos. The skill is choosing which two or three to emphasize at each level.
Size
Size is the most direct signal. A 36 px heading next to 16 px body copy communicates importance before a single word is read. A well-calibrated type scale (covered in the Modular Type Scale lesson) gives you pre-approved size jumps so every choice is systematic, not arbitrary.
Modern practice uses clamp() to make sizes fluid across viewport widths, rather than jumping at breakpoints:
/* Fluid heading: min 1.75rem, preferred 4vw, max 3rem */
font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);Always use rem as the floor and ceiling units. This ensures that users who set a larger browser default font size are not penalized.
Weight
Weight shifts importance within the same size tier. A bold (700-weight) label inside a form says “this matters” without making the label bigger. Variable fonts (covered in the Variable Fonts lesson) give you a continuous weight axis instead of a handful of static files. This lets you fine-tune — weight 550 for secondary headings, weight 650 for primary ones.
The old pattern is loading four separate font files (Regular, Medium, SemiBold, Bold) and then only using two in practice. A single variable font file with font-weight: 300 900 replaces all of them and is often a smaller download.
Color and Contrast
Color and contrast do two jobs at once: they communicate hierarchy and encode meaning (error red, success green). The modern approach works in OKLCH — a perceptually uniform color space — so a “de-emphasized” text color is a predictable luminance step below the primary. It is not a hand-picked hex value that may look fine on one screen and terrible on another.
A practical three-tier contrast pattern:
| Tier | Use case | WCAG 2.2 target |
|---|---|---|
| High (foreground on background) | Body, primary labels | 7:1 (AAA) where practical; 4.5:1 AA minimum |
| Medium (secondary text) | Subheadings, captions | 4.5:1 minimum |
| Low (disabled, placeholder) | Truly inactive UI | Below 3:1 — but must not carry essential information |
Spacing (Leading, Tracking, Margins)
Space is a hierarchy signal that designers often overlook. The gap above a section heading tells the reader a new topic is starting. Tight spacing between a label and its value groups them as a unit. These are not aesthetic tweaks — they are proximity-based hierarchy cues that register before the reader processes a single letterform.
Key ratios to calibrate:
- Line height (leading): 1.4–1.6 for body copy; 1.1–1.3 for large display headings (optical balance differs at scale)
- Margin above a heading: roughly 1.5–2× its own font size, to separate it from prior content
- Tracking (letter-spacing): slightly tighter (−0.01 to −0.03 em) for large headings; slightly looser (+0.04 to +0.08 em) for all-caps small labels
Typeface and Style
Two typefaces used consistently — one for display/headings, one for body — create a clear voice distinction. Beyond that, italics and monospace add hierarchy signals. Italics signal citations or emphasis. Monospace immediately reads as code or data.
Limit style variation to what carries semantic meaning. Using italics for pull-quotes and for in-sentence emphasis and for product names all at once destroys the signal. Pick one use and hold it.
Case and Treatment
All-caps text at small sizes (10–12 px equivalent) reads as “label” or “metadata” because the consistent cap height visually separates that tier. Sentence case at larger sizes reads as editorial or conversational. Avoid all-caps for body text — it reduces reading speed and is an accessibility concern for users with dyslexia.
Building a System, Not a One-Off
Making ad hoc hierarchy decisions — sizing every heading individually per page — creates inconsistency. That inconsistency accumulates into distrust. Users subconsciously notice when the same visual weight means different things on different screens.
The production-ready approach codifies hierarchy as design tokens:
{
"typography": {
"heading-1": {
"$type": "typography",
"$value": {
"fontFamily": "{font.family.display}",
"fontWeight": "{font.weight.bold}",
"fontSize": "{font.size.5xl}",
"lineHeight": "{font.leading.tight}"
}
}
}
}This follows the W3C Design Token Community Group (DTCG) stable format — using $value and $type keys — rather than a proprietary Figma-specific structure. Tokens defined this way sync to code, Storybook, and documentation without a separate spreadsheet that drifts out of sync over time.
Hierarchy in Context: Responsive Behavior
A heading hierarchy that works at 1440 px wide often breaks on a 390 px phone. The main failure is not just that things get smaller — it is that the size ratios compress until primary and secondary become indistinguishable.
Modern corrective patterns:
- Use fluid type scales with
clamp()so the size differential naturally moderates between viewport extremes, rather than collapsing suddenly at a breakpoint. - At very small viewports, it is legitimate to drop a tier entirely. Merge secondary and tertiary into one visual level rather than cramming three distinct steps into 20 px of range.
- Container queries let a card component use a tighter heading size when it appears in a narrow sidebar, independent of viewport width. This is more precise than viewport media queries for component-level hierarchy.
@container (max-width: 320px) {
.card-title {
font-size: clamp(1rem, 3cqi, 1.25rem);
font-weight: 600;
}
}Hierarchy and Accessibility
Visual hierarchy and accessible hierarchy must stay in sync. A heading that looks like a heading but is marked up as a <p> is invisible to screen reader navigation. Assistive technology users jump through headings as landmarks. If those landmarks are missing or out of order, the document structure is broken — no matter how beautifully it scans visually.
Non-negotiable rules:
- One
h1per page. It names the document. - Do not skip heading levels (for example, jumping from h1 to h3 and skipping h2). Screen readers and WCAG 2.2 success criterion 1.3.1 require a logical outline.
- Never use a heading just for size. If you want large text that is not a section landmark, apply
font-sizeto a<p>or<span>instead. - Body text minimum 16 px equivalent (1 rem at default browser settings). Smaller text for captions and labels is acceptable but must meet 4.5:1 contrast and should not carry essential information.
WCAG 2.2 introduced criterion 2.4.11 (Focus Not Obscured) and 2.5.8 (Target Size Minimum). These do not directly govern text hierarchy, but they reinforce the same principle: the most important interactive elements must be the most visually prominent, and prominence is hierarchy.
Do
Use heading levels that reflect document structure. An h2 introduces a section; an h3 introduces a sub-topic within that section. Style headings through CSS classes or design tokens rather than choosing a heading level based on how large you want the text to appear.
Don't
Do not choose heading levels (h1–h6) based on the visual size you need. Do not replicate the look of a heading with a styled paragraph just to avoid “disrupting the outline.” Do not use low-contrast secondary text for content that is actually important — contrast is an accessibility requirement, not a design preference.
Common Hierarchy Mistakes (and How to Fix Them)
Mistake 1: Too many tiers. Five or six visual levels on a single screen creates noise. Consolidate until three clear levels remain. If something does not fit cleanly into primary, secondary, or tertiary, it probably does not need to exist.
Mistake 2: Weight without size contrast. Making a heading bold but the same size as body copy produces weak hierarchy. Bold weight is a support signal, not a primary one. Lead with size contrast, then reinforce with weight.
Mistake 3: Hierarchy that only works in light mode. Designers who hand-pick hex values for de-emphasized text — say, #999999 on white — often find the same value looks nearly invisible on a dark background. The fix is OKLCH-based tokens with separate light and dark theme values, not a dark-mode afterthought that just inverts the hex palette.
Mistake 4: All-caps body copy for a “premium” feel. All-caps reduces reading speed in paragraph-length text and can trigger WCAG failure at small sizes. Reserve it for short labels (four or five words at most) where the consistent cap height is a deliberate tier signal.
Mistake 5: Hierarchy disappears in dense data views. Tables and dashboards strip hierarchy back to near-nothing by default. Intentionally re-establish it: use weight to distinguish column headers from cell values, use size and color to flag critical cells, and increase vertical padding to create breathing room that makes tier changes legible.
Evaluating Hierarchy: The Squint Test and Beyond
The squint test — literally squinting at your design until it blurs — reveals whether hierarchy is structural or just cosmetic. If the primary headline disappears into the body text when blurred, the contrast is insufficient. A well-hierarchied layout produces a clear dark blob at top (headline), a mid-weight zone below (subheadings and key content), and a lighter field of body copy.
Behavioral data is an even stronger validator than the squint test. Five-second tests and click-map heatmaps show whether users land on the primary element first and whether their reading path matches your intended flow. Attitudinal surveys asking “Did the page feel easy to read?” are a poor substitute — the say/do gap is real. Users consistently overestimate their ability to navigate hierarchically weak content.