Typographic Hierarchy

Typographic hierarchy is the systematic use of visual variation — size, weight, color, spacing, and typeface — to signal the relative importance of text elements and guide readers through content in a deliberate sequence. Good hierarchy answers the question "what should I read first?" at a glance.

Hierarchy is not decoration. It is information architecture expressed through type.

The core tools of hierarchy:

Size is the most powerful signal. A 2× size difference between heading and body creates unmistakable priority. Size alone can establish a basic hierarchy, but relying on it exclusively produces flat, monotonous results.

Weight adds fine-grained distinction. In a system where heading sizes are fixed by grid constraints, weight variation — regular, medium, semibold, bold — allows sub-levels of importance:

/* Primary heading: size + weight */
h1 { font-size: 3rem; font-weight: 800; color: #111; }

/* Secondary: smaller, lighter */
h2 { font-size: 2rem; font-weight: 600; color: #222; }

/* Tertiary: same weight as h2, but smaller + different color */
h3 { font-size: 1.375rem; font-weight: 600; color: #444; }

/* Body: visually subordinate */
p  { font-size: 1rem; font-weight: 400; color: #333; }

/* Caption / metadata: receded */
.caption { font-size: 0.875rem; font-weight: 400; color: #777; }

Color signals importance without changing size. Dark text reads as primary; lighter gray text recedes. Avoid using hue alone for hierarchy (accessibility concern), but luminance contrast is a reliable tool.

Typeface — using a display font for headings and a text font for body — establishes hierarchy through a distinct change in character. This works best when the contrast is clear: a slab serif heading with a humanist sans-serif body, for example.

Spacing creates groupings. Headers that sit closer to the content below them than to the content above form a visual unit, communicating that the heading belongs to what follows:

h2 {
  margin-top: 2.5em;   /* large gap above — separates from previous section */
  margin-bottom: 0.5em; /* small gap below — stays close to its content */
}

Common mistakes:

Using too many levels of hierarchy without sufficient differentiation between them produces visual noise rather than structure. Aim for 3-5 distinct levels that are clearly distinguishable from each other. If you can't tell h3 from h4 without reading the HTML, the hierarchy isn't working.

Over-relying on size without varying weight makes text feel either too large or too dense. The most readable hierarchies use 2-3 size levels combined with 2-3 weight levels.

Inter is particularly effective for UI hierarchy because its extensive weight range (100-900) provides fine-grained control without switching typefaces.