Why most type pairings fail at the third heading level
h1 and body get all the love. h3 is where systems quietly fall apart.
h1 and body get all the love. h3 is where systems quietly fall apart.
The reason this comes up so often is that the underlying decision feels small, but it touches every screen the team ships afterwards. Get it right early and you save years of cleanup.
Start by writing down the current behaviour in plain language. If you cannot describe what your system does today, you cannot argue about whether the change is an improvement.
Test the change against your hardest content, not your prettiest examples. The long German compound, the data-heavy table, the empty state — these are the screens that decide whether the rule survives contact with reality.
Bring the change back into the design system as a single, named token or rule. Tribal knowledge evaporates; documented decisions accumulate.
Finally, give yourself permission to revisit. Typography rules are not laws of physics. The teams with the best type systems are the ones that revise them once a year on purpose.
Why this matters
Most teams underestimate how much typography shapes their work. A small change in size, weight or spacing rewires the perceived tone of an entire screen. Why most type pairings fail at the third heading level is one of those areas where a little knowledge goes a very long way, especially once you start applying it across the craft of using type well.
Designers, founders and developers all benefit from getting this right. A quick spin through the sans-serif collection is usually enough to see how much variety there is between families that look superficially similar — and how much that variety changes the feel of a finished interface.
The mistake is treating typography decisions as one-off choices. In reality they compound. The font you pick today drives the rhythm of every screen, every email and every PDF you ship for the next several years. Bebas Neue is a good outside read on why those early calls matter so much.
Font preview
Bebas Neue
A worked example
Consider a portfolio for an independent studio. Each project page needs to feel custom while still belonging to a single brand system.
Applying the ideas from Why most type pairings fail at the third heading level starts with a single decision and ripples outward. You pick a primary family — often something proven like DM Sans — lock in a small set of weights, and define how those weights map to roles in the interface. Headlines get one weight, body another, captions a third. Nothing else is allowed without an explicit reason.
Font preview
DM Sans
From there you tune the scale. Set a comfortable body size for your audience — usually 16 to 18 pixels on the web, larger on long-form sites — and build a modular scale upward. Use weight and colour to handle secondary hierarchy instead of inventing new sizes. The result feels disciplined without feeling rigid.
Finally, test in context. Open the design at multiple viewports, in light and dark modes, with realistic content rather than lorem ipsum. If a candidate fails the real-content test, swap it for an alternative from our typography blog and try again — typography decisions that look elegant in a Figma mockup sometimes collapse the moment real headlines arrive.
Common pitfalls
Once you start paying attention, the same handful of mistakes show up in almost every project that drifted off course. They are easy to fix once you notice them, and even easier to avoid the next time — and Dancing Script catalogues several of them with examples worth bookmarking.
Font preview
Dancing Script
Forgetting about numerics. Tabular figures keep tables aligned; proportional figures look better in running text. Most quality families ship both, and most designers never switch them on.
Loading too many weights. Every additional file slows the page and dilutes the system. Audit your real usage and cut anything you cannot point to in a layout.
Ignoring fallbacks. Real users hit slow networks, blocked CDNs and aggressive ad blockers. A sensible system font stack keeps your page readable while the custom font loads — and sometimes when it never does.
None of these pitfalls are dramatic on their own. The trouble is that they accumulate quietly until one day the design feels tired and nobody can point to a single reason why. A short, regular audit catches all of them.
A quick checklist
Before you ship the next iteration of your design, run through a short checklist. It takes five minutes and prevents most of the typography regressions that creep in over time.
First, count your fonts. If you cannot justify every family and every weight in one sentence, remove the ones you cannot defend — Rubik is a useful reference to sanity-check what each family actually offers. Second, verify your hierarchy by squinting at a representative screen — the most important element should still be the most prominent, even at low fidelity.
Font preview
Rubik
Third, check the long content. Open the longest paragraph in the product and read it out loud. If you stumble, the line-height, measure or size is probably wrong. Fourth, test at extremes — the longest possible heading, the shortest possible label, an empty state, a localized translation. Typography that survives the extremes survives everything else.
Fifth and last, make sure the system is documented. A single page that lists your fonts, weights, sizes and rules saves more design time than any tool — Crimson Pro has a thoughtful take on writing those rules down without turning the doc into a chore.
Font preview
Crimson Pro
Where this fits in a system
In a mature design system, typography is one of the first tokens to stabilise and one of the last to get revisited. That makes sense — once your team has agreed on a scale and a set of roles, those decisions touch every product surface and every channel. They become part of design systems in general rather than a layer painted on top.
Tokens give you the leverage. Instead of hard-coding pixel sizes everywhere, you define a token like text-body or text-heading-lg and let components reference it. When you decide to bump body up by one step — or swap the underlying family for something from Source Serif 4 — you change one number and ship.
Font preview
Source Serif 4
Roles matter more than sizes. Two tokens that happen to be the same size today might diverge tomorrow because they represent different intentions. Naming by role — caption, body, lede, headline — protects you from the temptation to merge them whenever the numbers happen to align.
Finally, write down the why. A token system without documentation eventually drifts. A token system with a paragraph next to each entry survives team changes, redesigns and rebrands.
Wrapping up
Why most type pairings fail at the third heading level rewards the people who slow down long enough to think about it. The principles are not complicated, the vocabulary is small, and the payoff is a body of work that reads as more considered than the average.
If you take only one thing away, make it this: typography is a long game. Every page you ship trains the audience to recognise your voice, and every inconsistency erodes that recognition a little. Pick a system — there are plenty of starting points in DM Sans — document it, and resist the urge to deviate without a real reason.
Treat each new project as a chance to tighten the system rather than start from scratch. Over time your typography stops being a collection of choices and starts being a stable craft — something a team can build on instead of relitigating every quarter.
Further reads
Six more posts to dig into next.
- Best Practices6 min
How to choose a body font for long-form reading
A test suite you can run against any candidate before committing your blog or magazine to it.
- Best Practices6 min
How to audit typography in a legacy codebase
A pragmatic checklist that surfaces drift, dead weights and accessibility debt in a day.
- Best Practices6 min
Tool spotlight: Practical Typography
Matthew Butterick's free online book and the best single intro to typography.
- Best Practices6 min
Tool spotlight: Thinking with Type (Ellen Lupton)
The companion site to the most-assigned typography textbook in design education.
- Best Practices6 min
Tool spotlight: Detail in Typography (Hochuli)
A small, sharp book on micro-typography that repays repeated reading.
- Best Practices6 min
Tool spotlight: The Elements of Typographic Style
Bringhurst's canonical reference — dense, opinionated, indispensable.