How to create a typographic hierarchy

No matter what you’re designing for – maybe it’s a website? A brand? A magazine, perhaps? – typographic hierarchy is your foundation, your building blocks. It’s what guides your reader through your website, brand or book. It tells them what to look at first, what to skim, and what to remember. Done right, it’s seamless. Done wrong, it can be extremely confusing.

In short, hierarchy is how you visually structure information. Here’s how to do it well.

Start with the text

Before choosing fonts or sizes, understand what you’re trying to say. Read the content. Figure out which parts are headlines, subheadings, body copy, pull quotes, calls to action, footnotes, etc. Then rank them by importance. This will become your hierarchy. Ask yourself, “if the reader only looks at one thing, what should it be?” Take this as your starting point.

Use size intentionally

Size is the most obvious way to show importance. Your biggest text should signal the most important element (usually the headline), followed by subheads, and so on.

For example:

(Web) Headline: 40–60px Subhead: 24–36px Body: 16–20px Caption/Footnote: 12–14px

(Print) Headline: 38–60pt Subhead: 20–36pt Body: 10–14pt Caption/Footnote: 6–8pt

For nice, clean, super straightforward type hierarchy, don’t go overboard. The key is consistency – more so than drama. Set your body text first, then scale the rest accordingly. If you want to know how to perfectly set justified text, we have another hand article for you…

Contrast weights and styles

Pair different font weights (light, regular, bold) to create emphasis. Bold text can draw attention to key ideas, while lighter text can signal secondary information. Italics are also great for differentiation, but use them sparingly for emphasis, quotes, or asides – not everything needs a tilt.

Make sure to use fonts with enough weight variety (like PP Neue Montreal , PP Nikkei or PP Right Grotesk ) to build complex hierarchies without needing multiple typefaces.

Play with spacing

Leading (line spacing) helps make large bodies of text more readable. For body copy, aim for 120–140% of your font size. For example,12pt text = ~12–14pt leading). Tracking and letterspacing can also help.

Tight tracking can make headlines feel compact and punchy; wider spacing can give text a sense of air and formality. For some tips on kerning, check out our Kerning Basics guide!

Use colour, but don’t rely on it

Colour is a great way to distinguish elements, especially for UI or branding. But make sure your hierarchy works in black and white first. Then, add colour to reinforce structure or to highlight interactive or important elements. Colour-coded hierarchies can fall apart with poor contrast or accessibility issues.

Limit your font choices (but choose well and wisely)

You don’t need five fonts to build a good hierarchy.

In most cases, one family with multiple styles is more than enough. If you do want to mix, try pairing a serif and a sans (which we have another handy article to help you out with). For example, try PP Editorial New for headlines + PP Neue Montreal for body, or PP Monument + PP Right Gothic.

Repeat, repeat, repeat

Once you’ve chosen your headline size, subhead spacing, and body text rules, stick to them. Repeating styles creates rhythm and makes your design feel intentional and cohesive, creating visual and conceptual pace across whatever you’re designing. Create text styles in your software and apply them consistently. No one wants nine subtly different heading sizes.

Test your system

Zoom out. Squint. Scroll. Can you tell what matters most? Can someone new glance at your design and know where to start? Hierarchy should be visible without effort – the eye should naturally follow the structure you’ve built. If it doesn’t, go back and tweak size, weight, spacing, or alignment until it clicks.