Typography that converts: the hierarchy rules that actually matter

I've seen $5 typefaces outperform $500 ones. I've seen free system fonts beat carefully chosen premium pairs. Typography isn't about the font — it's about the system.

What converts is hierarchy that guides attention. What fails is type that looks nice in isolation but blurs into a wall of text the moment someone reads it on a phone after a long day.

The three variables that matter

Every typographic decision you make lives at the intersection of three variables: weight, size, and color. You don't need to manipulate all three to create hierarchy — but you need to manipulate at least two.

A 48px regular-weight heading next to 14px regular-weight body text has hierarchy. A 24px bold heading next to 22px regular body text does not, regardless of how beautiful the font is.

The most common mistake I see: designers pick one variable (usually size) and use it alone. Size contrast alone is weak. Weight contrast alone is weak. Color contrast alone is weak. Two of three is where hierarchy becomes readable.

The scale I use on every project

Five levels. That's it.

• Display — 56–80px, bold or black, tight tracking (–0.03em to –0.04em). For hero headlines only.
• Heading — 32–48px, bold, slightly tight tracking. H1 on most pages.
• Subheading — 20–28px, semibold, neutral tracking. Section titles, H2.
• Body — 16–17px, regular or medium, generous line height (1.6–1.75). Everything you read.
• Label — 11–13px, semibold or medium, open tracking (+0.05em to +0.08em). Captions, tags, eyebrow text.

The contrast between display and label — a huge bold headline paired with a small, spaced-out uppercase tag — is the most reliably impressive typographic move in web design. It's used everywhere in editorial print for a reason.

The line-height rule

Headlines: 1.0–1.15. They need to be tight. Loose line height on large type looks uncertain.

Body text: 1.6–1.75. Eyes need room to travel back to the start of the next line. Cramped body text slows reading speed noticeably.

Labels and captions: 1.4–1.5. Small type needs a bit more air than body, but not as much as body, since lines are short.

The number one fix on every site I audit is increasing body line-height. It costs nothing and immediately makes the page feel more confident and easier to read.

On choosing a typeface

If you're reading this and don't have a strong opinion on typefaces yet: use Inter for UI and body, and either a geometric sans (DM Sans, Plus Jakarta Sans) or a variable serif (Fraunces, Playfair Display) for display headlines.

This pairing covers 90% of commercial web projects, loads from Google Fonts for free, and won't embarrass you. Once you have strong opinions about type, you'll break from it naturally. Until then, restraint beats experimentation.

What actually converts

A hierarchy that works has one answer to the question: "what should I read next?" At every moment, the user should feel a pull toward the next element — headline to subheadline to body to CTA — without friction.

If the eye has to choose between two equally-weighted elements, you've lost a fraction of attention. Enough of those fractions and the page stops converting.

Measure your hierarchy by squinting. Blurred, can you tell what the most important thing on the page is? The second most important? Third? If not, the contrast is insufficient — regardless of how the precise, non-squinted design looks.

Fix contrast before fixing font choices. Always.