Type hierarchy is the system that tells a reader's eye where to look first, second, and last, and a type scale is the simple math that makes it consistent everywhere. Get both right and a viewer understands a slide or graphic in a single glance, before they've consciously read a word. Get them wrong and even great copy reads like a wall of noise.
This guide covers the foundations: what hierarchy does, how a type scale works, and a repeatable method for building a size ladder you can reuse across every headline, subhead, and body block you ship.
What type hierarchy actually does
Hierarchy is visual ranking. When you scan a page, your eye doesn't read top to bottom like a typewriter, it jumps to the largest, boldest, highest-contrast element first, then settles into the supporting text. Typographic hierarchy is how you deliberately control that order so the most important idea lands first.
There are only a handful of levers that create rank: size, weight, color and contrast, spacing, and position. Size does the heaviest lifting, which is why a type scale matters so much. The mistake most people make is treating every line as equally important. When everything shouts, nothing is heard. Strong hierarchy means making a confident decision about what is primary and then making everything else visibly subordinate.
A good test: squint at your design until the text blurs. You should still be able to tell the headline from the body from the caption purely by their shape and weight. If they all blur into one gray mass, your hierarchy is too flat.
What is a type scale?
A type scale is a predefined set of font sizes that relate to one another by a consistent ratio, instead of arbitrary numbers chosen one slide at a time. You pick a base size for body text, often around 16px on screen, and a ratio, then multiply up and divide down to generate every other size in the system.
The ratio is what makes the steps feel intentional rather than random. A scale built on a single ratio produces sizes that share a visual rhythm, the same way notes in a musical scale sound related. This is why designers reach for a modular scale: it removes guesswork and guarantees that your H1, H2, and body never end up awkwardly close in size.
Common ratios
| Ratio | Name | Feel |
|---|---|---|
| 1.125 | Major second | Tight, dense, good for data-heavy UI |
| 1.200 | Minor third | Balanced, safe for most decks |
| 1.250 | Major third | Clear, confident contrast |
| 1.333 | Perfect fourth | Bold, editorial |
| 1.618 | Golden ratio | Dramatic, big jumps |
A larger ratio means bigger jumps between steps and more dramatic contrast, great for marketing slides and title cards. A smaller ratio keeps sizes close together, which suits dense interfaces and documents where many levels need to coexist without eating the whole screen.
Build your size ladder: a practical method
A size ladder is just your type scale applied to real roles, display, H1, H2, H3, body, caption. Here's a reliable way to build one.
- Set your base. Pick the body size first, because it's the size people read most. Around 16px is a sane on-screen default; nudge up for slides viewed across a room.
- Choose one ratio. Start with 1.25 (major third) if you're unsure. One ratio for the whole system keeps it coherent.
- Generate the steps. Multiply the base repeatedly: 16 → 20 → 25 → 31 → 39 → 49. Round to clean numbers your tools like (20, 24, 32, 40, 48).
- Assign roles. Body 16, H3 20, H2 32, H1 40, display 48+. Drop a caption step below the base by dividing: 16 ÷ 1.25 ≈ 13.
- Cap the levels. Most designs need only three to four text sizes. More than that and the hierarchy starts to blur. Resist the urge to invent a new size for every exception.
- Pressure-test it. Drop real headlines and a real paragraph in. If the H2 and body look too similar, your ratio is too small; widen it or skip a step.
The payoff is that you stop deciding font sizes by feel and start deciding by role. Every "how big should this be?" question has a pre-made answer.
Headings vs body: what sizes to use
There's no single correct number, because viewing distance changes everything. Body text read on a phone six inches from your face behaves very differently from a title slide projected across a conference room. Use these as starting points, then adjust for context:
- Body: 16–18px on screen. This is your anchor, set it for comfortable reading, not to save space.
- Subheads (H3/H2): roughly 1.25× to 2× the body. Enough jump to read as "new section," not so much it competes with the title.
- Headlines (H1): 2× to 2.5× body for documents; far larger for slides and hero graphics.
- Captions and labels: 0.75× to 0.85× body, often paired with a weight or color shift so they read as secondary without becoming illegible.
For anything that will be filmed, projected, or shrunk into a feed, legibility outranks elegance, a beautiful size that nobody can read at playback is a failed size. If your text is destined for video, pair this scale with the rules in our guide to on-screen text legibility for video, where minimum sizes and safe margins matter even more.
Beyond size: weight, spacing, and contrast
Size creates the skeleton, but it's rarely enough on its own. The most refined hierarchies use small reinforcing signals so each level reads clearly even when sizes are close.
- Weight. A bold headline above regular-weight body separates the two instantly, even at similar sizes. Reserve your heaviest weight for one role so it stays meaningful.
- Spacing. Generous space above a heading (and tighter space below it) groups the heading with the text it introduces. The fine details of letter and line spacing get their own treatment in our explainer on kerning, tracking, and leading.
- Color and contrast. Muting captions to a softer gray pushes them back; a saturated brand color can lift a single word forward. Always check that the contrast still passes for accessibility.
- Case. All-caps labels with a touch of added tracking read as system text, not content, useful for kickers and eyebrows above a headline.
The goal is redundancy of signal: the headline should be obviously the headline because of size and weight and spacing, so the hierarchy survives small screens, compression, and color shifts.
Make the ladder reusable across slides and graphics
A type scale only pays off when it's applied consistently, and consistency by hand is where most teams fail. The point of doing this work once is to never re-decide it. In CoreReflex, your size ladder becomes part of your brand system rather than a habit you have to remember. This is the kind of foundation that lives alongside the rest of your brand and design resources.
Inside Slide Studio, the Slides pillar, you set heading and body roles against your scale and reuse them across an entire deck, so a title on slide 2 and a title on slide 40 are identical without manual fiddling. Because the scale is defined as roles, not loose numbers, your slides and graphics inherit the same rhythm automatically, and the brand-voice guard keeps the words on them as consistent as the type. Choosing the right typefaces to sit on that ladder is its own decision; if you're still selecting, start with our font pairing guide and our advice on how to choose brand fonts that last.
Frequently asked questions
What is a type scale and why does it matter?
A type scale is a set of font sizes derived from a single base size and a consistent ratio, instead of arbitrary numbers picked per design. It matters because it guarantees your sizes feel related and your hierarchy stays clear. H1, H2, and body never drift into looking accidentally similar. It also turns sizing into a quick lookup rather than a judgment call you re-litigate on every slide.
How do I create clear typographic hierarchy?
Decide what the single most important element is, make it visibly dominant with size and weight, then make everything else clearly subordinate. Use a capped set of three to four sizes from your type scale, reinforce each level with weight and spacing, and squint-test the result, if you can still tell headline from body when the text blurs, your hierarchy is working.
What font sizes should headings and body text use?
Start from a body size of about 16–18px on screen, then scale headings up by your chosen ratio: subheads roughly 1.25×–2× body, and headlines 2×–2.5× for documents (much larger for slides and hero graphics). These are starting points, increase sizes for text viewed at a distance or compressed into a social feed, where legibility beats subtlety.
Start with a scale, not a guess
Typographic hierarchy isn't a matter of taste so much as a matter of decisions made once and applied everywhere. Set a base size, pick a ratio, build a short ladder of roles, and reinforce it with weight and spacing, then let your tools hold the line. CoreReflex turns that ladder into a reusable part of your brand so every slide and graphic reads at a glance.
Ready to put a clean type system to work? Start free, no credit card required.