The short version
- Visual hierarchy is the order in which people notice and read the parts of a design.
- Hierarchy is controlled with five tools: size, weight, colour and contrast, position, and space.
- Most designs need no more than three levels: one thing seen first, a few things second, and details last.
- The element with the most contrast against its surroundings is usually seen first, whatever its size, so accent colours should be spent on one thing.
- The squint test, blurring your view until only shapes remain, shows at a glance which element really leads.
On this page
Visual hierarchy is the order in which people notice and read the parts of a design. You control it with five tools: size, weight, colour and contrast, position and space. A clear hierarchy has one thing that is seen first, a few things seen second, and details that are found only when someone looks for them. Without it, everything competes and people read nothing.
The five tools of visual hierarchy
Every tool works the same way: it makes one element different from its neighbours. The bigger the difference, the earlier the element is seen. Using several tools on the same element strengthens it; using them on different elements makes them compete.
| Tool | How it creates emphasis | Example |
|---|---|---|
| Size | Bigger is seen sooner | A headline twice the size of the text around it |
| Weight | Heavier strokes stand out | A bold date in a line of regular text |
| Colour and contrast | The most different colour wins | One gold accent on a dark, quiet design |
| Position | Top and start of the reading direction come first | The headline at the top left |
| Space | Isolated elements draw the eye | A single line with wide margins around it |
Decide the order before you design
Hierarchy problems are usually decision problems. If you haven't decided what matters most, the design can't show it. Before you open a design tool, rank the content.
- 1
List everything
Every piece of text and every image the design must hold.
- 2
Pick the one thing
If people remember only one element, which should it be? That's level one.
- 3
Group the supporting facts
The two to four things people need next, such as a date, a place or a short explanation. That's level two.
- 4
Everything else is detail
Handles, small print, logos. That's level three, small and quiet.
- 5
Cut what doesn't fit
If something can't find a level, it probably belongs in the caption or the next slide.
Three levels: the event's name first, then the date above and the details below, each a clear step smaller.
Size and weight
Size is the strongest tool, and the easiest to get wrong by being timid. If a headline is only slightly bigger than the text beneath it, the two look like a mistake rather than a hierarchy. Make steps between levels obvious; a type scale, as described in typography basics, keeps them consistent.
Flat hierarchy
- Headline barely larger than the body
- Everything bold, so nothing is
- Four different sizes that are almost the same
- Two headlines of equal weight
Clear hierarchy
- Headline at least about twice the body size
- Bold kept for the few words that must lead
- Three sizes with clear steps between them
- One headline, one supporting line
Colour and contrast
The eye goes first to whatever is most different from its surroundings. A small patch of bright colour on a dark, quiet design will beat a larger element in a muted tone. That makes accent colour a budget: spend it on the one thing that should lead, or on the action you want people to take, and nowhere else.
Lowering contrast is how you push things back without shrinking them: a softer ink for captions and labels keeps them readable but behind the headline. Keep even the quietest text above the minimums in colour contrast. The 60-30-10 rule is another way to think about how much of each colour to use.
Position and reading direction
In languages read from left to right, people tend to start at the top left and move right and down, so elements placed there are seen early. In right-to-left languages, the starting corner flips. Centred, symmetrical layouts start in the middle and work outward, which suits short, single-message designs such as posters, quotes and announcements.
Position can also work against you. On social formats, platform controls cover parts of the image, and on thumbnails a badge sits in the corner. Keep the first element away from those areas; YouTube thumbnail design shows how.
Space
Space does two jobs. Around a single element, it isolates it, and isolation reads as importance: one line with generous margins can outrank a much larger block of text. Between elements, it groups them: things close together are read as belonging together. Put the date and place close to each other and further from the headline, and people read them as one unit of detail.
Words lead: the headline carries the news and the detail supports it.
A number leads: the same content, re-ranked so the figure is seen first.
The same content can support different hierarchies. Choosing which one depends on what you want people to remember: the idea, or the number.
How to test visual hierarchy
- The squint test. Half-close your eyes or blur the design. The shape that still stands out is your real level one. If it isn't the one you chose, adjust.
- The two-second test. Show the design to someone for two seconds, then ask what it said. They should repeat your level one.
- The thumbnail test. Shrink it to the size it will appear on a phone. Levels two and three may vanish, and that's fine; level one must not.
- The greyscale test. Remove the colour. If the hierarchy collapses, it was relying on hue rather than lightness contrast.
Hierarchy gets harder when the background is busy or colourful, because contrast changes under the words; text on a gradient covers how to keep level one readable wherever it sits. For announcements, where hierarchy matters most, see how to design an announcement post.
Questions people ask
What is visual hierarchy?
Visual hierarchy is the order in which people notice and read the parts of a design, controlled with size, weight, colour and contrast, position and space.
How many levels of hierarchy should a design have?
Usually three: one element seen first, a few supporting elements second, and details last.
What is the squint test?
Half-close your eyes or blur the design until only shapes remain. Whatever still stands out is what people will notice first.
Is size the only way to create hierarchy?
No. Weight, contrast, colour, position and space all create emphasis, and a small element in a bright accent colour can outrank a larger muted one.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
