Building a Typographic Hierarchy
Typographic hierarchy makes the reading sequence explicit. Size, weight, and position each carry rank — and the reader follows the order you set, not the one you intend.
Hierarchy is the typographic signal that tells a reader: start here, then here, then here. Without it, text is a field of equal elements and the reader has to decide where to begin — which means most won’t. With a well-built hierarchy, the eye is guided through content in the intended sequence. The structure is felt before it is understood.
What hierarchy is and what it is not
Hierarchy is not decoration. It is not a matter of making headings look interesting. It is a system for encoding priority — a set of visual signals that communicate the relative importance and sequence of information. A heading is not large because large looks good. It is large because large is perceived first, and the heading contains the information the reader needs to decide whether to continue.
A typographic hierarchy should answer these questions for every element in the system: What is this? How important is it relative to everything else on the page? What should the reader encounter before or after it?
The variables available
Size is the most legible signal of hierarchy. Larger elements are perceived first. A heading that is twice the size of body text will be read before the body text in all but the most unusual layouts. Weight is the second most powerful signal. Bold text within a field of regular text draws the eye immediately. Position also carries hierarchy: elements at the top of a composition are read before elements at the bottom, and elements on the left before those on the right in left-to-right reading systems.
Colour and spacing are secondary signals. They reinforce hierarchy but cannot create it on their own. A light grey heading next to dark body text is fighting its hierarchy signal with its contrast signal — the result is ambiguous. Keep the primary signals clean and use secondary signals only to reinforce, not to override.
How many levels
Most systems need three to four levels of visual hierarchy. Primary: the main heading or dominant element on the page. Secondary: sub-section headings or key information. Tertiary: body text, the default reading level. Optional fourth level: labels, captions, secondary information that supports but does not carry the primary content.
Beyond four, levels start to collapse into indistinguishable gradations. If two levels look similar enough that you can’t tell which outranks the other, they are not functioning as distinct hierarchy levels. On small screens, ideal typographic hierarchy compresses — size differences that read clearly at desktop become indistinguishable at mobile widths. The Conflict Matrix covers how to maintain hierarchy as responsive constraints reduce the available size range.
See Building a Scale for how the type scale provides the size steps to work with. See Weight as Contrast for how weight changes within a single size level.