Typography
Hierarchy
Hierarchy is making the order of importance among elements visible through differences in size, weight, color, and spacing, so users know what to look at first.
Definition
Hierarchy is the practice of making the order of importance among elements on a screen visible. You change the size, adjust the weight, and introduce differences in color and spacing so that users naturally sense what to look at first and what to look at later. On the same page, clear hierarchy keeps the title, summary, body, and supporting details layered and distinct, so the structure reads at a glance. Without it, everything arrives with the same weight and users are left unsure where to begin. You can think of hierarchy as the purposeful weaving together of size, weight, color, and spacing — the concepts you already know — and it is also the answer to why you adjust those elements the way you do.
Why does it matter?
People do not read a screen carefully at first. In the opening seconds they scan quickly and decide where to focus. Good hierarchy works in exactly that moment, helping users settle on a scanning order in a fraction of a second. When the most important thing is the largest and boldest, the eye starts there naturally, and the next-most-important elements follow in turn as the gaze flows down the page. When every element sits flat at the same size and color, users have to hunt for the point on their own, grow tired, and leave. Hierarchy is not there just to look pretty — it is a practical device for delivering information quickly and accurately. A well-built hierarchy is also a kind of courtesy, sparing users the effort of interpreting the screen for themselves.
Common mistakes
- Emphasizing everything. When you make everything bold, everything big, and add color everywhere, the emphases compete with one another, nothing ends up standing out, and the result is no better than having no hierarchy at all.
- Leaning on a single tool. If you try to build hierarchy by varying size alone in tiny steps, the difference stays too weak to notice. You need size, weight, color, and spacing working together for the contrast to read clearly.
- Letting importance and visual emphasis drift apart. When the action button that really matters looks faint while a supporting note is bolder and bigger, the user's eye lands in the wrong place first and they miss the thing they were actually meant to do.
Practical tips
- Good hierarchy lets users decide their scanning order within a fraction of a second. After you build a screen, squint and look at it blurred to see what stands out first. If the thing that should be seen first really is seen first, your hierarchy is holding up.
- Limit yourself to three or four levels. Split the layers into something like title, subheading, body, and supporting detail, and widen the gap between each layer clearly. The structure comes out sharper than with many levels, and the order users should read in becomes far more obvious.
- Instead of adding emphasis to more things, try pushing the rest down. When you fade the color of supporting details or shrink their size, you can make the important elements stand out by comparison without enlarging them further, and the screen never feels overloaded.