Typography Hierarchy: The Three-Level Rule

Typography hierarchy is the practice of organizing text by importance through visual differentiation. It sounds simple and is deceptively difficult to execute well. Most designers either under-differentiate (everything looks similar, hierarchy is unclear) or over-differentiate (so many levels that the system breaks down into noise).

My working principle: three levels of typographic hierarchy is the target for most design work. Sometimes two is right. Rarely is four necessary. More than four is always too many.

The Three Levels

Level one — Primary: The most important information. The headline, the brand name, the key message. This level should be immediately arresting — larger, heavier, or more visually prominent than everything else by a significant margin.

Level two — Secondary: Contextualizing information. Subheads, callouts, supporting statements. This level should be clearly subordinate to primary but clearly superior to body text. The differentiation from level one should be at least a 2:1 size ratio, often more.

Level three — Tertiary: Body copy, captions, supporting details, fine print. This level should recede — it's information the viewer seeks rather than information that seeks the viewer.

Why Three Works

Three levels maps well onto how people actually read: they scan for relevance (primary level), decide whether to engage (secondary level), and then read for information (tertiary level). A hierarchy that supports this three-stage process serves communication efficiently.

More than three levels creates a system the eye can't quickly parse. The incremental differences between level four and level five type, for instance, are rarely distinct enough to communicate clear hierarchy — they just add complexity.

Fewer than three — a two-level system — can work for simple, information-light design. But it often sacrifices the secondary level, which is where a lot of the most communicatively useful decisions happen (subheads that make a long article scannable, callouts that interrupt a content block with emphasis).

Establishing the Levels

I establish the three levels at the start of every project, before any real content is placed. I define each level in terms of typeface, size, weight, and color. Then I document those decisions and apply them consistently.

The consistency is the key. A hierarchy that's applied inconsistently — where the primary level sometimes looks like the secondary, or where exceptions keep being made — is worse than no hierarchy because it actively misleads the viewer.

Differentiating Between Levels

The most effective differentiation tools, in rough order of impact:

1. Size — the most unambiguous hierarchy signal
2. Weight — bold vs. regular vs. light creates clear reading order
3. Color or value — dark vs. lighter or brand color vs. neutral
4. Typeface — a different face for different levels (use sparingly; usually only two typefaces maximum)
5. Capitalization — all caps vs. mixed case (limited use; affects readability at body text sizes)

I rarely use all five for three levels — that would create excessive complexity. Usually two or three differentiators, applied consistently, are sufficient.

The Trap of Fake Hierarchy

The most common hierarchy failure is creating visual differentiation that doesn't actually reflect information importance. Making a subhead bold and large because it looks good there, even though the content isn't actually more important than adjacent content, teaches the eye that visual emphasis is arbitrary. Once the viewer learns the hierarchy is fake, they stop relying on it — and then they have to work harder to find what matters.

Hierarchy is a promise. Visual prominence says "this matters." Breaking that promise costs reader trust.