Art, design & a little curiosity
Typography ↗

Typographic hierarchy: make levels visibly different

Build a restrained system of headings, paragraphs, captions, and labels, then use spacing and repeated roles to make a document easier to scan and read.

An original cut-paper collage study exploring typographic hierarchy.
Cut-paper collage / Original digital study

Map the content levels

Read the document and identify its actual structure before assigning sizes. A title, section heading, subsection, body paragraph, caption, and note are different roles only if the content requires them. Creating six visual levels for a short page can make the system feel more complicated than the information itself.

Write the roles in a simple outline. Check whether headings accurately describe the material beneath them. Typography can reveal a structure, but it cannot supply a missing editorial relationship. If two headings represent the same level, they should usually receive the same treatment even when one happens to be longer.

Choose clear differences

Use size, weight, style, spacing, or placement to distinguish levels. A heading should differ enough from the body to be recognizable without close inspection. Several almost-identical sizes can create uncertainty, especially when a bold paragraph looks more prominent than a nominally larger but lighter heading.

Begin with one family and a small set of sizes. Add another family or accent only if the first system cannot express the needed distinctions. The strongest hierarchy is not necessarily the loudest. A quiet document can have very clear levels through consistent spacing and careful proportion.

Use space as part of the system

Give headings enough space above to signal a new section and a closer relationship below to the material they introduce. Inspect the visible result rather than applying an identical gap mechanically. A two-line heading creates a different shape from a one-line heading even if both use the same style.

Keep captions visibly connected to their images, and keep notes from looking like another paragraph of the main argument. Alignment can reinforce those relationships. When readers must repeatedly guess which image a caption describes, the issue is structural and cannot be solved by changing the caption's font alone.

Test the whole document

Apply the styles to several pages or screens, including awkward content. Check whether a long heading wraps gracefully and whether a page with several short sections becomes too fragmented. A hierarchy needs to survive variation, not just the ideal specimen that introduced it.

Scan the document for headings, then read a complete section. These are different tasks. The first tests navigation and recognition; the second tests continuity and comfort. Revise both the text styles and the spacing rules when necessary, then update them consistently rather than making isolated exceptions on every page.

Put it into practice

Try it yourself

  1. Outline the actual content levels before styling them.
  2. Use a small number of clear and repeated role differences.
  3. Test both scanning and sustained reading with difficult content.
A worked example

Worked example: a studio reference sheet

Create a fictional reference sheet with a title, three main sections, two small warnings, and captions beneath diagrams. Give main headings one size and weight, body text another, and captions a quieter treatment. Put warnings in a consistent labeled style rather than making them look like extra headings. Test the longest section heading and the shortest caption. If both appear equally prominent, reduce caption weight or strengthen the heading difference while preserving readable caption size.

References & further reading

Examples and exercises in this guide are original teaching scenarios.

Keep following the thread.

More typography ↗