Typography Hierarchy: The Cheapest Way to Make Any Interface Look Designed
How to build a type scale that creates hierarchy, why most interfaces have too many sizes, and the contrast rules that make hierarchy read instantly.
Most interfaces do not look designed because of layout or colour. They look flat because everything is competing at the same level. Hierarchy in type is a hierarchy of attention, and getting it wrong flattens everything else.
Hierarchy comes from four levers
Size is the loudest, and the most overused. Teams reach for it first, then have nothing left to escalate to.
- Size — the primary signal, and the one you should use first.
- Weight — a 600 next to a 400 reads as structure without taking more space.
- Colour — most text should be secondary or tertiary grey, not full black. Full black is for the one thing that matters most.
- Space — the space above a heading belongs to the heading. This is the cheapest lever and the most neglected.
Use fewer sizes than you think
A good interface needs about four or five type sizes, not twelve. Every additional size has to be maintained, and each one that does not map to a real level of importance becomes noise.
Build a scale with a consistent ratio and commit to it. If a value is not on the scale, that is usually a sign the element does not deserve its own level.
Contrast, not difference
Adjacent levels need enough difference to be instant. If a heading and its body text are close in size and weight, the reader has to work to work out the relationship, and they will feel it as the page being tiring rather than unclear.