Typography Hierarchy

The ordering of typefaces and fonts in a layout to create divisions that show users where to focus and how to find information

Why it matters

Readers do not read first — they scan for the shape of the page, and hierarchy is that shape. Size, weight, and spacing tell them what is a title, what is a section, and what is fine print before a single word registers. The test is the squint: blur your eyes and the levels should still be obvious. If everything is bold, or the h2 and h3 are one pixel apart, you have decoration, not hierarchy.

See it

Squint at it — the four levels should still be obvious as shapes. If they blur into one, the hierarchy is decoration.

The numbers

2 to 3 text levels are enough for most screens — more levels than that and users stop telling them apart

Related terms

Ask your assistant

Define "Typography Hierarchy" using uxspot.

Works in Claude, Cursor or any MCP client — connect the uxspot MCP.

Think it stuck? A 20-second round of Spot Check will tell you.