{"slug":"visual-hierarchy","meta":{"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."}]},"body":"## Weight is a currency\n\nFour channels carry emphasis, and each is finite:\n\n| Channel | Cheap version | Expensive version |\n|---|---|---|\n| **Size** | one step up | display-scale type |\n| **Weight** | 600 | 800 |\n| **Colour** | darker neutral | a semantic hue |\n| **Position** | above the fold | top-left, first read |\n\nThe supply is fixed because emphasis is **relative**. Bold text stands out\nagainst regular text; a page of bold text stands out against nothing. Every time\nyou emphasise a second element you devalue the first, and the arithmetic is\nexact.\n\n## The rules\n\n- **One primary emphasis per screen.** Not two. If two things are both the\n  loudest, neither is.\n- **Match emphasis to layer.** The glance layer gets size and weight; the scan\n  layer gets normal text; the demand layer gets small and muted. If a layer-3\n  field is bold, it is competing with the answer.\n- **Same layer, same treatment, everywhere on the page.** Two things that look\n  different must *be* different. Where they are not, the difference is noise the\n  reader has to discount.\n- **Position is free hierarchy.** Top-left is read first in left-to-right\n  layouts and costs nothing. Put the answer there rather than making it bigger.\n- **Reserve the most saturated tone on the page for the single most important\n  thing.**\n\n## Prefer the cheapest channel that works\n\nReach for position first, then weight, then size, then colour. Colour is the\nmost expensive because it is also the [semantic\nchannel](/patterns/semantic-colour) — spending it on hierarchy leaves nothing\nfor meaning, which is how a page ends up with six hues that mean nothing in\nparticular.\n\nMost hierarchy problems are solved by moving something and changing one weight.\nVery few are solved by making something bigger, and almost none by making\nsomething a different colour.\n\n## The failure modes\n\n- **The flat page.** Everything the same size and weight. Usually the result of\n  building from the data outward, and the sibling of the data dump.\n- **Everything bold.** Emphasis inflation, one reasonable request at a time.\n- **Two primary buttons.** People click the wrong one, and that is a real error\n  rather than a slowdown.\n- **Hierarchy by colour alone**, which fails in greyscale, fails for many\n  readers, and burns the semantic budget.\n- **Inconsistent treatment within a layer**, so the reader infers a distinction\n  that does not exist.\n- **Type scales with too many steps.** Six heading sizes is not a hierarchy, it\n  is a gradient nobody can rank.\n\n## The tests\n\n- **Squint.** Blur your eyes or shrink to 25%. You should see roughly three\n  levels of contrast, and the first thing you see should be the answer to the\n  screen's question. Uniform grey mush means no hierarchy; confetti means too\n  many colours.\n- **Five seconds.** Show someone the screen for five seconds, hide it, ask what\n  it is for and what needs doing. If they cannot say, layer 1 is wrong.\n- **Greyscale.** Print it in black and white. Hierarchy built on position,\n  weight and size survives. Hierarchy built on colour disappears — and that is\n  the version many people are already seeing.\n"}