---
title: Visual Hierarchy
slug: visual-hierarchy
kind: grammar
summary: Size, weight, colour and position are a currency with a fixed supply. Spend them in proportion to importance, and accept that emphasising everything emphasises nothing.
problem: >-
  Every element on the screen was made important by someone who cared about it.
  Now all of it is bold, or coloured, or large, and the eye has no entry point —
  so the reader must read everything to find anything.
family: [scan]
principles: [progressive-disclosure, surface-dont-bury]
status: stable
visibility: public
related:
  - title: Progressive disclosure
    url: /patterns/progressive-disclosure
    summary: The layer model that decides what deserves emphasis in the first place.
  - title: Spacing and Proximity
    url: /patterns/spacing-and-proximity
    summary: The companion — hierarchy ranks, proximity groups.
---

## Weight is a currency

Four channels carry emphasis, and each is finite:

| Channel | Cheap version | Expensive version |
|---|---|---|
| **Size** | one step up | display-scale type |
| **Weight** | 600 | 800 |
| **Colour** | darker neutral | a semantic hue |
| **Position** | above the fold | top-left, first read |

The supply is fixed because emphasis is **relative**. Bold text stands out
against regular text; a page of bold text stands out against nothing. Every time
you emphasise a second element you devalue the first, and the arithmetic is
exact.

## The rules

- **One primary emphasis per screen.** Not two. If two things are both the
  loudest, neither is.
- **Match emphasis to layer.** The glance layer gets size and weight; the scan
  layer gets normal text; the demand layer gets small and muted. If a layer-3
  field is bold, it is competing with the answer.
- **Same layer, same treatment, everywhere on the page.** Two things that look
  different must *be* different. Where they are not, the difference is noise the
  reader has to discount.
- **Position is free hierarchy.** Top-left is read first in left-to-right
  layouts and costs nothing. Put the answer there rather than making it bigger.
- **Reserve the most saturated tone on the page for the single most important
  thing.**

## Prefer the cheapest channel that works

Reach for position first, then weight, then size, then colour. Colour is the
most expensive because it is also the [semantic
channel](/patterns/semantic-colour) — spending it on hierarchy leaves nothing
for meaning, which is how a page ends up with six hues that mean nothing in
particular.

Most hierarchy problems are solved by moving something and changing one weight.
Very few are solved by making something bigger, and almost none by making
something a different colour.

## The failure modes

- **The flat page.** Everything the same size and weight. Usually the result of
  building from the data outward, and the sibling of the data dump.
- **Everything bold.** Emphasis inflation, one reasonable request at a time.
- **Two primary buttons.** People click the wrong one, and that is a real error
  rather than a slowdown.
- **Hierarchy by colour alone**, which fails in greyscale, fails for many
  readers, and burns the semantic budget.
- **Inconsistent treatment within a layer**, so the reader infers a distinction
  that does not exist.
- **Type scales with too many steps.** Six heading sizes is not a hierarchy, it
  is a gradient nobody can rank.

## The tests

- **Squint.** Blur your eyes or shrink to 25%. You should see roughly three
  levels of contrast, and the first thing you see should be the answer to the
  screen's question. Uniform grey mush means no hierarchy; confetti means too
  many colours.
- **Five seconds.** Show someone the screen for five seconds, hide it, ask what
  it is for and what needs doing. If they cannot say, layer 1 is wrong.
- **Greyscale.** Print it in black and white. Hierarchy built on position,
  weight and size survives. Hierarchy built on colour disappears — and that is
  the version many people are already seeing.