Design
Typography Hierarchy:
How Visual Weight Guides the Eye
Hierarchy is the typographer's grammar. Without it, a page is a crowd. With it, the eye knows exactly where to go and in what order — without the reader needing to think about it at all.
What Hierarchy Actually Is
Typography hierarchy is the system of visual relationships that tells a reader: this matters more than that. It's communicated through size, weight, spacing, color, case, and style — not any one of these in isolation, but their combination and contrast.
A beginner's mistake is thinking hierarchy means "make the important things bigger." That's part of it. But hierarchy is really about contrast — and contrast requires a controlled range. When everything is large, nothing is important. When everything is the same weight, the eye wanders.
The Typographic Scale
A type scale is a set of predetermined sizes that relate to each other mathematically. Common ratios: 1.25 (Major Third), 1.333 (Perfect Fourth), 1.5 (Perfect Fifth). The ratio determines how dramatically sizes step up — a larger ratio gives bolder hierarchy, a smaller one gives subtle elegance.
Weight Is Underused
Most designers reach for size first. Weight is the more subtle and often more powerful lever. A body-sized but bold text draws the eye before a large but light heading. This is how pull quotes, callouts, and key terms work — not by being bigger, but by being heavier.
This is a heading
This is body text. The difference is minimal. The eye doesn't know where to start and doesn't feel a strong pull toward the heading.
This is a heading
This is body text. The contrast between bold heading and regular body creates an immediate, clear reading order. The eye is guided.
Spacing as Hierarchy Signal
Space around an element signals its importance. More space = more breathing room = more visual weight. The heading that has 3rem of space above it reads as more significant than one with 1rem, even at the same size and weight.
The practical rule: space above a heading should be roughly twice the space below it. This visually connects the heading to the content that follows it, rather than floating it between two sections with equal ambiguity.
Color in Hierarchy
Color adds a third dimension to hierarchy without changing size or weight. In a dark-mode palette, full-opacity white reads as primary, 70% opacity as secondary, 40% as tertiary metadata. This creates a hierarchy of visibility that parallels the size hierarchy.
Accent color — used sparingly — functions as a visual interrupt. A single accent-colored label or category tag draws the eye before the heading, establishing context before the reader enters the content. Use it once per section maximum.
The Test
Squint at your layout. Blur your vision until you can't read the text. What you see is the hierarchy as pure shape and value. Can you still tell which element is most important? Can you trace a clear reading order from the shapes alone?
If yes, your hierarchy is structural and will survive any context — small screens, fast scanning, translation. If no, you're relying on content to create hierarchy that the design should be providing. Content meaning and visual weight are separate systems. Both need to work independently.