#Hierarchy: Guiding the Eye Through a Page

#What Hierarchy Actually Does

Typographic hierarchy is the visual encoding of information priority. It tells the reader's eye where to start, where to go next, and what can be skipped. A page without hierarchy is a flat field — every element demanding equal attention, none receiving any. A page with strong hierarchy is navigable: the eye moves through it with intent.

Hierarchy is not decoration. It is the structural logic of a composition made visible. When hierarchy fails — when a product page requires careful study to locate the price, or when a news article's most important information is buried — it is a usability failure, not merely an aesthetic one.

#The Five Tools

#

1. Size

Size is the most immediate hierarchy signal. Larger type reads first. This is so fundamental that it barely requires defending — it works across cultures, literacy levels, and contexts.

The key requirement is sufficient differentiation. A heading at 20px and body at 16px produces a 1.25x size ratio — enough to distinguish them, but only barely. A heading at 32px and body at 16px produces a 2x ratio — unambiguously hierarchical. In a multi-level hierarchy (page title, section heading, subheading, body), ensure each level is meaningfully smaller than the one above, not incrementally smaller.

The modular scale approach described in Font Size, Scale & Modular Type Systems is the right tool for this — scales ensure each step is proportionally distinct.

#

2. Weight

Weight works independently of size. A bold paragraph introduction within body text creates local hierarchy without size change. A medium-weight label in a form signals "this is important" without requiring the label to be larger than the input.

Weight's limitation: it requires an actual weight range in your chosen typeface. A typeface available only in Regular and Bold has a binary weight distinction. A typeface with a full axis from Thin (100) to Black (900) has near-infinite gradations.

/* Weight-based hierarchy within same size */
.card-title {
  font-weight: 700;
  font-size: 1rem; /* Same size as body */
}

.card-meta {
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

#

3. Color

Color is the most emotionally complex hierarchy tool. It carries associations that size and weight do not: red signals urgency or error; muted gray signals secondary information; a brand color signals identity. These associations are learnable conventions, not universal — they must be applied with awareness of the context and the audience.

For accessibility, color cannot be the only differentiator. If your hierarchy relies on distinguishing primary text (black) from secondary text (gray), ensure the contrast ratio between those colors still meets WCAG 2.2 requirements. Secondary text at #767676 on white (#FFFFFF) has a contrast ratio of approximately 4.54:1 — barely passing for normal text. Go lighter than that and you are creating accessibility failures. (See Color & Contrast for Readable Text for the full treatment.)

:root {
  --color-text-primary:   #1a1a1a;  /* ~17:1 contrast on white */
  --color-text-secondary: #6b7280;  /* ~4.6:1 contrast on white — passing for normal text */
  --color-text-tertiary:  #9ca3af;  /* ~2.9:1 — for large text only */
  --color-text-accent:    #2563eb;  /* Interactive / brand */
}

#

4. Space

Space is the most underestimated hierarchy tool. The whitespace around an element is a signal of its importance: elements with generous surrounding space read as primary; elements packed tightly read as secondary or supplementary.

This works at multiple scales:

• Macro space: generous margins around a page title signal that it is the most important element on the page
• Section spacing: more space above h2 than above a paragraph signals the start of a new section
• Micro space: tighter letter-spacing on all-caps labels, extra margin-bottom on block quotes

/* Space as hierarchy signal */
h2 {
  margin-block-start: 3rem;  /* Generous space above — signals new section */
  margin-block-end: 0.75rem; /* Tight space below — groups heading with its content */
}

p + p {
  margin-block-start: 1rem;  /* Less space between paragraphs than before headings */
}

This is the CSS expression of proximity principle: elements that belong together are spaced close; elements that are distinct are spaced apart.

#

5. Position

Position — where on the page or component an element appears — is a hierarchy signal because Western readers have learned to read from top-left to bottom-right. The first element the eye encounters tends to be interpreted as hierarchically primary.

Position is also relative. A headline centered on a full-bleed section reads as the primary element not because of its size alone but because of its position in the visual field. A note that appears below a fold, or a disclaimer at the bottom of a long page, is hierarchically deprioritized regardless of its font size.

#The Squint Test

The most practical single technique for evaluating typographic hierarchy: squint at your design until the text is unreadable. You are not looking at letters now — you are looking at density, contrast, and spatial organization. The highest-contrast elements should be the most important ones; the groupings should reflect the information structure.

If you squint at a design and the first thing you see is a decorative pull quote rather than the headline, your hierarchy is inverted. If you cannot distinguish between section headings and body text, your differentiation is insufficient.

The squint test is effective because it removes the cognitive distraction of actually reading — the same mechanism that makes lorem ipsum useful for early design stages.

#Hierarchy Without Multiple Typefaces

A common misconception: typographic hierarchy requires multiple typefaces. It does not. Some of the most effective type systems use a single typeface family, differentiating levels through size, weight, and space alone.

/* Single-typeface hierarchy — Fraunces only */
:root {
  --font: 'Fraunces', Georgia, serif;
}

.page-title {
  font-family: var(--font);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-heading {
  font-family: var(--font);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
}

.body-text {
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.65;
}

The discipline of building hierarchy within a single family often produces more elegant results than mixing typefaces precisely because it forces attention onto the five tools above rather than relying on typeface contrast as a shortcut.

Set a block of lorem ipsum at these settings using the generator above to evaluate the hierarchy before committing to a specific copy.

#Key Takeaways

• Typographic hierarchy encodes information priority as visual signal; it is a usability mechanism, not decoration
• The five tools: size, weight, color, space, position — effective hierarchy uses multiple tools together
• Size requires meaningful differentiation (2x ratios) not incremental differences
• Color hierarchy must still meet WCAG 2.2 contrast requirements for accessibility
• The squint test evaluates hierarchy by removing semantic content — equivalent to seeing the design as pure density and contrast
• Strong hierarchy is achievable with a single typeface family using size, weight, and space alone

#Further Reading

• Font Size, Scale & Modular Type Systems
• Color & Contrast for Readable Text
• Whitespace Is Not Empty
• Mastering Line Length, Leading & Measure