Visual hierarchy in web design: size, weight, position and space first
Visual hierarchy is the order in which a page asks to be read. You can build almost all of it with four tools: size, weight, position and space. Colour and a second typeface are stronger signals, which is exactly why they work best held back for the one or two things that need them.
What hierarchy does for a reader
Nobody reads a web page from top-left to bottom-right, and visual hierarchy in web design exists because of that. People glance, land on the biggest or most contrasting thing, then skim for what they came for. Hierarchy decides where that first glance lands and where the eye goes next. A page with clear hierarchy feels calm and obvious; one without it feels busy even when there isn't much on it, because everything competes at the same level.
Hierarchy also has a structural side. The visual order should match the document order: the largest heading is the h1, section titles are h2, and so on. Screen reader users navigate by those heading levels, so a page that looks well ordered but has headings chosen for their size rather than their rank is ordered for only some of its readers.
The four tools, in order of subtlety
- Size
- The strongest and most reliable signal. A modest scale works: body at 16px to 18px, subheads around 1.2 to 1.5 times body, section titles around 2 to 3 times, the main headline larger still. Too many sizes blur the levels; four to six steps usually cover a page.
- Weight
- Bold against regular separates labels from values, names from descriptions and prices from the rest of a line. Use two or three weights, not five.
- Position
- Top and left are read first in left-to-right languages. Things placed alone, with space around them, read as more important than things in a row.
- Space
- Space groups and separates. Tight spacing inside a group (a heading and its paragraph) and wide spacing between groups tells the eye what belongs together without any lines or boxes.
Notice what isn't on the list: colour, a second typeface, icons, boxes, shadows. All of them can help, but they're louder than they look. Use them after the four basics are working, not to fix a page where they aren't.
Why colour comes last
Colour is the quickest way to make something stand out, and that's the problem. If the heading is blue, the links are blue, the icons are teal and the button is orange, every coloured thing competes and none wins. Reserving one accent colour for actions (links and buttons) makes colour mean “you can click this”, which is a hierarchy of its own. Colour also can't carry meaning alone: people with colour vision deficiencies may not see the difference, so a coloured heading still needs size or weight to work.
Visual hierarchy examples, fixed
| Problem | Fix with the basics |
|---|---|
| Section titles barely bigger than body text | Increase the step: titles at 2 to 3 times body size, with more space above than below |
| Prices lost in long service descriptions | Put the price on the right, in a heavier weight, on its own line in the layout |
| Every card looks equally important | Make the main item larger, or span two columns, and keep the rest smaller |
| The button disappears among links | One filled button for the main action; secondary actions as plain text links |
| Headings float between sections | Move each heading closer to the content it introduces than to the section above |
| Long page feels monotonous | Vary section layouts (a list, a split, a grid) while keeping the same type and colours |
Two quick tests
- The squint test. Blur your eyes or the screenshot until text is unreadable. You should still see one dominant element, a few secondary ones and a lot of quiet body text. If you see an even grey, the levels are too close.
- The five-second test. Show the page to someone for five seconds, then ask what it was and what they'd do next. If they can't say, the headline or the main action isn't winning.
Hierarchy in Anticode's design systems
Every Anticode design system uses exactly one font family, so a second typeface is never available as a shortcut. Hierarchy comes from the system's type scale, its weights and its spacing, which are set together for each of the seven systems. Editorial, for example, pairs a very large headline with hairline rules and generous body text; Swiss adds numbered section titles on a strict grid; Luxury uses light display weights and wide-tracked small capitals for labels. Each system also has one action colour, which keeps colour for actions.
If the headline isn't dominant enough, or too dominant for a long business name, the visual editor's headline scale control enlarges the hero headline in steps without changing the rest of the scale. For more on choosing sizes, see type scale for web.
Questions people ask
What are the principles of visual hierarchy?
Contrast in size and weight, deliberate position, grouping by space, and restraint with colour. Each element's prominence should match its importance to the visitor.
How many font sizes should a website use?
Four to six for most sites: body, small text, one or two subhead sizes, section titles and a display size for the main headline.
Does visual hierarchy affect accessibility?
Yes. Clear size steps help readers with low vision and cognitive disabilities, and matching visual order to heading levels helps screen reader users navigate.