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 — 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.