Type Hierarchy

Organizing information visually through typographic differentiation.

Type hierarchy guides readers through content. It signals importance, groups related information, and creates a reading path. Without hierarchy, everything competes equally. With hierarchy, structure emerges from the page.

---

Why Hierarchy Matters

Readers don't read—they scan first. Hierarchy tells them:

• What's most important
• How content is organized
• Where to start
• What relates to what

Poor hierarchy forces readers to work. They guess at importance. They miss structure. They abandon content.

Strong hierarchy makes content self-explaining. The visual treatment carries meaning before words are read.

---

Tools for Creating Hierarchy

Size

The most obvious differentiator. Larger text draws attention first.

Guidelines:

• Clear size jumps between levels (at least 20-25% difference)
• Limit to 4-5 size levels maximum
• Establish a consistent scale (more on this in Type Systems)

Weight

Bold draws attention within same-size text. Useful for emphasis without size change.

Guidelines:

• Reserve bold for genuine emphasis
• Avoid overuse—when everything is bold, nothing is
• Consider semibold for subtle differentiation

Color and Contrast

Darker text advances. Lighter text recedes. Color draws attention.

Guidelines:

• Primary content in high-contrast colors
• Secondary content in reduced contrast
• Accent colors for specific emphasis only

Spacing

White space around elements signals importance and creates grouping.

Guidelines:

• More space above headings than below (associates heading with following content)
• Generous margins around primary elements
• Tight spacing within related groups

Position

Top and left positions carry more weight in left-to-right reading cultures.

Guidelines:

• Place important elements high and prominent
• Use consistent positions for consistent functions
• Left-align most text for readability

Style

Italic, uppercase, small caps, and underline provide additional differentiation.

Guidelines:

• Use sparingly—these reduce readability
• Uppercase for very short text only (labels, buttons)
• Italic for emphasis within body text
• Avoid underline except for links

---

Common Hierarchy Levels

For Web/UI

For Print

These are starting points. Specific needs vary by context, content, and brand.

---

Building Hierarchy

1. Inventory Content Types

List everything that needs differentiation:

• Headlines and subheads
• Body paragraphs
• Lists and bullets
• Quotes and callouts
• Captions and credits
• Navigation and labels

2. Determine Relative Importance

Rank content types by importance. What must readers see first? What supports primary content?

3. Assign Visual Treatment

Map importance to visual differentiation. Primary content gets maximum differentiation. Lower levels get progressively subtler treatment.

4. Test with Real Content

Apply hierarchy to actual content. Check:

• Is the reading order clear?
• Do related elements group visually?
• Is the hierarchy consistent?

5. Document and Systematize

Capture decisions in Type Systems for consistent application.

---

Common Mistakes

Too many levels — More than 5-6 levels creates confusion, not clarity

Insufficient contrast — Subtle differences get lost; hierarchy fails

Inconsistent application — Using different treatments for same-level content

Style overload — Combining too many differentiators (bold, italic, underline, color, size)

Ignoring context — Hierarchy that works in design comps may fail in real use

---

Related

• Typography
• Type Systems
• Font Pairing
• Visual Identity