Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Typographic Hierarchy

Using size, weight, colour and space to make the structure of text visible before it is read.

Definition

Typographic hierarchy is the system of text treatments that signals relative importance and structure. It should be defined as a small set of named roles rather than as ad hoc styling.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Define roles, not styles
  3. Building hierarchy with less size variation
  4. In practice
  5. Continue from here

Define roles, not styles

A typography system should express roles such as page title, section heading, body, secondary body, label and caption. Each role has a fixed size, weight, line height, colour and spacing. Designers select roles rather than assembling values, which is what keeps a large product coherent.

Roles are separate from HTML heading levels. Semantic heading levels must follow document structure for assistive technology, while visual treatment can be chosen independently. A visually small heading can still be an h2.

Building hierarchy with less size variation

  • Weight before size. Moving from regular to semibold often creates enough separation without consuming vertical space.
  • Colour as a demotion tool. Reducing secondary text contrast, within accessible limits, recedes it without shrinking it.
  • Space above and below, which separates without changing the text at all.
  • Letter spacing and uppercase for small labels only, since uppercase reduces reading speed for longer text.
  • Never rely on italic alone for hierarchy. It is a poor differentiator at interface sizes.

In practice

Three weights, one size

Dense interfaces

Data-heavy tools frequently build an entire hierarchy from weight and colour at a single size, because vertical space is the scarce resource.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA Data TableA FormA Pricing PageA Search ExperienceAn AI ProductAn Ecommerce ExperienceAn Enterprise WorkflowAn Onboarding FlowAuthenticationNavigationSettings

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.