Skip to content
UX Atlas
Plate FND·032 · UI foundationGrid D1 · Rev. 2026-08-14

Typographic Hierarchy

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Define roles, not styles
  3. 3Building hierarchy with less size variation
  4. 4Roles, and what carries each one
  5. 5In practice
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Continue from here

Reach for this when

  • Defining a typography system.
  • Reviewing content-heavy pages.
  • Auditing heading structure for accessibility.
  • Defining type for a system, before any component uses a size directly.

Common mistakes

  • Heading level chosen for appearance.
  • Too many roles.
  • Hierarchy carried by colour alone.

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.

Roles, and what carries each one

A role is a job with a name. Sizes are how it is expressed, and they can change without the role changing.

RoleTypical treatmentUsed for
Page titleLargest size, strong weightOne per page
Section headingOne step down, strong weightStructure the reader skims by
SubheadingBody size, medium weightGrouping inside a section
BodyBase size, regularThe text that carries the content
LabelSmall, medium weightField and control names
Caption or metaSmall, regular, quiet colourTimestamps, counts, attribution

In practice

  1. i.

    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.

  2. ii.

    Heading level and heading size

    Semantics decoupled from appearance

    A section that is the third level of the document may need to look quiet, and an h3 that is styled like body text is still an h3. Tying size to level makes one of the two wrong whenever they disagree.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Heading Structure

Accessibility

The sequence of heading levels that exposes a navigable outline of the page.

Key difference

Heading structure is the outline assistive technology navigates by, and it must follow the document, not the design. Typographic hierarchy is how importance is made visible. Big bold text is not a heading, and a heading need not be big.

Use Typographic Hierarchy when

  • Everything reads as equally important, or the page looks flat.
  • You are defining the type scale and its roles.
  • The fix is size, weight, colour and space.

Use Heading Structure when

  • Levels are chosen for size, or skipped to avoid a style.
  • Screen reader users need to skim sections.
  • The fix is which element is used, not how it looks.

Learn about Heading Structure

Local chart

FND·032 · Region II · Grid D1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Authority BiasBIAS·006 · PRINCIPLES BEHIND THISHalo EffectBIAS·013 · PRINCIPLES BEHIND THISAesthetic-Usability EffectLAW·011 · PRINCIPLES BEHIND THISHeading StructureA11Y·006 · COMMONLY CONFUSED WITHType ScaleTERM·058 · SHORT DEFINITIONVisual HierarchyTERM·054 · SHORT DEFINITIONDesign TokensSYS·001 · RELATED CONCEPTContrastFND·002 · RELATED CONCEPTFont SelectionFND·030 · RELATED CONCEPTFont WeightFND·033 · RELATED CONCEPTLetter SpacingFND·035 · RELATED CONCEPTNeutralsFND·025 · RELATED CONCEPT

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.