Hierarchy is the difference between a page users understand instantly and a page that requires effort to parse. It's not decoration — it's communication architecture. This guide covers the techniques and the rules for using them deliberately.
The Hierarchy Techniques
| Technique | How it works | Watch for |
|---|---|---|
| Size | Larger elements feel more important | Diminishing returns above 3x ratio |
| Weight | Bolder type / heavier elements draw eye | Too much bold = none stands out |
| Color | Saturated or high-contrast colors pop | Color-only signals fail accessibility |
| Spacing | White space around an element isolates it | Powerful and underused |
| Position | Top-left and natural focal points get noticed first | Culture-dependent (RTL vs LTR) |
| Contrast | Bigger visual difference = bigger perceived importance gap | Contrast levels should match meaning levels |
The Rules
- One primary focal point per screen. Identify it and protect it.
- Stack techniques. The most important elements typically combine multiple techniques (largest + bold + most saturated + most whitespace).
- Restraint matters. The contrast between "loud" and "quiet" creates hierarchy. If everything is loud, nothing is.
- Keep ratio meaningful. The size step between H1 and H2 should match the importance step.
- Test the squint. Squint at your design — what stands out should be the most important content.
Common Failures
- Every paragraph has a bold word, eroding the meaning of bold.
- Multiple "primary" CTAs on a single screen.
- Headline and body type look almost the same size.
- Background color competes with primary content for attention.
- Visual emphasis driven by aesthetics, not communication importance.
A Reliable Workflow
- List the content elements and rank them by importance.
- Assign type scale, weight, and color to match the ranking.
- Add spacing to isolate the most important elements.
- Squint test. Adjust. Repeat.
- Test with real users — if they can't identify the primary action, hierarchy is failing.
The Five Levers, and When to Use Each
Hierarchy is built from a small set of tools. Knowing which to reach for keeps a layout from getting noisy:
- Size — the bluntest, most reliable signal. Use it for the single most important element (the headline, the price, the hero number).
- Weight — bolder text reads as more important without taking more space; ideal for labels and subheadings where size is fixed.
- Colour and contrast — a saturated accent pulls the eye, which is why primary buttons are coloured and secondary ones muted. Reserve the accent for one job.
- Spacing — whitespace isolates. Surrounding an element with room signals importance as effectively as making it bigger.
- Position — top and left (in left-to-right reading) are seen first; the eye follows a rough F or Z path down the page.
Stack two or three of these on your focal point, and deliberately strip them from everything else.
Try It Yourself
Build type hierarchy with the DesignKit color and gradient tools.
Color Palette Extractor →