visual design
Typography hierarchy
What is typographic hierarchy?
Typographic hierarchy is using size, weight, spacing and colour to rank text, so the eye knows what to read first, what's a heading, what's an aside. It is visual hierarchy done with type alone - the structure you feel before you read a word.
Also known as: typographic hierarchy, type hierarchy
Prefer to watch?
Watch the recap 0:38
The demo
The same little article, two ways. Flatten the type to one size and the words blur into a wall; restore the hierarchy and your eye is led straight down it.
Guide
Choosing a payment method
A quick walk-through of the options, and when each one makes sense.
Most checkouts offer a card, a wallet and pay-later. Cards are universal and familiar; wallets are fastest on mobile if the user already has one set up; pay-later suits larger baskets but adds friction and obligations. Offer the two or three your customers actually use, not every option you can find.
Updated June 2026 · 3 min read
Switch to hierarchy and watch the article become scannable.
What this demo shows (text version)
A short article with five parts - a kicker ("Guide"), a title, a standfirst summary, a body paragraph and a caption. In flat mode every part is set at the same size, weight and colour, so there is nothing to tell the eye which is the title or where to begin - it reads as an undifferentiated block.
In hierarchy mode the parts are ranked by type: the kicker small and muted, the title large and bold, the standfirst medium, the body plain, the caption small and quiet. The words are identical; only the type treatment changes, and the article becomes instantly scannable. That ranking by size, weight, spacing and colour is typographic hierarchy.
Typographic hierarchy uses size, weight, spacing and colour to rank text, so the eye knows what to read first, what's a heading, what's an aside - structure you feel before reading a word. Make the levels clearly distinct and a wall of uniform text becomes something people can scan and navigate without effort.
Flattened to one size and weight, the same words turned into an undifferentiated wall you had to wade through. Restore the hierarchy and your eye instantly found the title, then the summary, then the detail - in that order, without deciding to. Nothing changed but the type; everything changed about how readable it felt.
Build the ranks with contrast, not just size. A heading reads as a heading through a jump in size and weight and a little space around it; lean on size alone and you end up with a timid scale where nothing clearly wins. Three or four distinct levels is usually plenty - title, section, body, caption - and far clearer than seven sizes a hair apart.
Hierarchy guides the eye; it does not replace structure. Style your headings to look like headings, but mark them up as real headings too (an actual heading element, in order), so the ranking a sighted reader feels is one a screen reader can follow as well. Looking like a hierarchy and being one should always agree.