Typographic hierarchy is the ordering of text through size, weight, colour and spacing so readers can tell what matters first, what comes next and what is detail. It turns a block of words into a page that can be scanned.
It is one of the core ideas in typography basics, and it shapes every layout, from a poster to a settings screen.
What typographic hierarchy does
The Nielsen Norman Group sums up the purpose: according to NN/g, a clear visual hierarchy guides the eye to the most important elements on the page. It defines the idea as the organisation of design elements so the eye consumes each one in the order of intended importance.
Type does most of that work in text-heavy designs. A reader landing on a page asks quick questions: what is this, is it relevant, where do I start. Headings, subheadings, captions and body text answer those questions in order, before a single paragraph is read in full.
The same NN/g article says hierarchy can be created through variations in colour and contrast, scale and grouping. Each of those has a typographic form, covered in the sections below.
The tools that build a hierarchy
Size and scale
Bigger elements attract attention, so size signals importance. NN/g advises using no more than 3 sizes: small, medium and large. Its suggested web ranges run from 14px to 16px for body copy, 18px to 22px for a subheader and up to 32px for a header. Treat these as starting points rather than rules; the point is that the steps between levels are clearly visible.
Weight and style
Weight is the quietest lever. According to NN/g, typefaces with heavy weight, like bold, stand out against light or regular ones, and words styled differently from surrounding text, such as italic, also attract attention. Weight lets a designer separate levels without growing the type, which helps on small screens.
Colour and contrast
Value and saturation set one level apart from another. NN/g notes that when too many contrast variations compete, nothing stands out, and it recommends no more than 3 contrast variations in complex designs (source). The same article warns not to rely only on colour, since some readers cannot tell certain combinations apart. Size or weight should carry the order as well.
Space and grouping
Closeness implies a relationship. A subheading placed nearer to the paragraph beneath it than to the one above reads as belonging to that paragraph. Generous space around a heading also raises its rank without enlarging it. Fine adjustments to letter and line spacing are covered in the guide to kerning tracking and leading.
Applying hierarchy on a page
Hierarchy starts with content rather than styling. NN/g recommends in its conclusion that designers define the hierarchy of the content and the key point they want readers to take away before beginning the visuals.
A workable order for a typical article or landing page looks like this:
- Name the levels in the content: page title, section headings, subsection headings, body, captions and small print.
- Give each level a distinct treatment, using size first, then weight, then colour.
- Apply each treatment consistently so that a reader learns the pattern once.
- Check the result with a squint test, then adjust.
Consistency matters as much as contrast. If two levels look alike in one place and different in another, the system stops working. Reusing a defined set of text styles, as design tools allow, keeps a long document honest.
Print and screen differ in how readers move through text. A printed page is taken in as a whole before reading starts, so headings, pull quotes and captions form a visible map. On a screen, people scroll and scan, so each heading must carry enough meaning to stand alone. Writing headings that describe the content beneath them helps hierarchy and comprehension at once.
Alignment and rhythm support the same order. Headings aligned to a shared edge and separated by regular spacing read as a system, while irregular gaps make levels harder to tell apart. Repetition across pages gives readers a familiar pattern, which is why teams define text styles once and reuse them everywhere.
Hierarchy in presentation mockups
Mockups for packaging, posters or interfaces are judged mostly on first impressions, so hierarchy decides whether the design reads at a glance. In a mockup, the viewer sees the item at reduced size and often from an angle, which exposes weak hierarchy quickly: tiny captions disappear and competing headlines fight.
Placing text on a rendered surface also tests it. If the main message is not readable on the scaled-down surface, the sizes between levels probably need more separation. This is a cheap check before anything is printed or built.
Hierarchy on the web: structure and accessibility
On the web, hierarchy has a structural half. The W3C accessibility tutorial explains that the most important heading has rank 1 and the least important rank 6. MDN adds two cautions: do not use heading elements merely to resize text, because that is the job of the CSS font-size property, and do not skip heading levels.
The reason is practical. MDN notes that most screen readers can generate a list of all headings on a page, and that a common navigation technique is jumping from heading to heading. Skipped levels leave the listener wondering where the missing heading went. Visual style and document structure should therefore agree: the largest-looking heading should also be the highest-ranked one.
Readability needs room as well. WCAG asks that content still work when line height is set to at least 1.5 times the font size, according to the W3C text spacing guidance, so layouts should leave space for readers who adjust spacing. Loading is the other practical limit: heavy custom faces affect headings first, which is the subject of web font performance.
Testing and fixing a weak hierarchy
NN/g describes a quick test in the same article: squint at the design or apply a slight blur to see the groupings and the emphasis. If the item that stands out is not the intended one, the hierarchy is working against the content.
Common repairs follow a pattern:
- Everything shouts: demote secondary elements to regular weight and smaller size.
- Nothing leads: enlarge or embolden the single element that carries the main message.
- Too many styles: collapse near-duplicate sizes into a short set of steps.
- Competing images: an image with very strong colour can outrank text, so adjust the crop or the surrounding space.
After changes, re-test by blurring again, and ideally by showing the design to people unfamiliar with it.
Frequently asked questions
How many font sizes should a design use?
Fewer than most beginners expect. The Nielsen Norman Group suggests a small set of steps so that relationships stay clear; extra sizes blur the order instead of refining it.
Can hierarchy rely on colour alone?
No. Some readers cannot distinguish certain colour pairs, so size, weight or position should carry the same order.
Should heading tags be chosen for their size?
No. Heading levels describe structure, and CSS controls appearance. Choosing a level for its default look produces skipped levels that confuse assistive technology users.
What is the quickest way to test a hierarchy?
Squint at the layout or blur it slightly. Whatever still stands out is what the design emphasises, and it should match the content priorities.
