We Tested Every Font-Pairing 'Rule.' Here's What Held Up.

Every font pairing article, including several I've written, eventually says some version of "use no more than two fonts" or "pair a serif with a sans-serif" as if it's settled law. After hearing the same five rules recycled across a hundred different blogs, I got curious whether they actually hold up once you put them into a real layout instead of just nodding along. So I built out actual mockups — a blog post, a SaaS landing page, a product card — and tested each rule against all three. Here's what survived contact with an actual layout, and what didn't.

The setup

Nothing fancy — three real layouts a project actually needs, not abstract "here are two words in two fonts" comparisons. A blog post template with a headline, a byline, and three paragraphs of actual body copy. A SaaS landing page hero with a headline, a subheadline, and a call-to-action button. A product card with a title, a price, and a short description. Each rule got tested against all three, because a pairing that works for a blog post doesn't necessarily hold up in a dense product card, and I wanted to know which rules were universal and which ones only sounded universal.

Mostly holds up, with an asterisk. Two fonts is the right ceiling for the vast majority of layouts, and every time I tested a third typeface just because I could, the result looked busier without looking more interesting. But the rule breaks down a little at the edges — a monospace font for code snippets or numeric data alongside a heading/body pair isn't really a "third font" in the sense the rule is warning against, because it's serving a completely distinct, clearly-signaled function rather than competing for the same visual space. Verdict: true in spirit, too rigid taken literally.

Rule 2: "Pair a serif with a sans-serif"

This one held up better than I expected going in, mostly because it's really a proxy for a deeper rule — contrast in structure — rather than a rule about serifs specifically. Serif-plus-sans works because the two categories are visually distinct in an obvious way, which is what actually matters. When I tried two well-chosen sans-serifs with genuinely different letterform philosophies (a geometric one and a humanist one), it worked just as well as a serif-sans pair did. When I tried a "safe" serif-sans combination where both fonts happened to have similar proportions and x-heights anyway, it looked flatter than the mismatched sans-sans pairing. The category matters less than people think. The underlying contrast is the actual rule.

Rule 3: "Match the x-height"

True, and underrated. This is the one piece of advice that consistently made the biggest visible difference across every mockup I tested it on, and it's also the one that gets the least attention in most pairing guides. Two fonts with wildly different x-heights set at the same point size look obviously mismatched even when everything else about the pairing is reasonable — one looks small and cramped next to the other even though the numbers say they're the same size. Fixing this sometimes means bumping one font up or down a couple of points rather than changing the pairing at all, which is a much smaller, cheaper fix than most people realize.

Rule 4: "Pick fonts with a shared mood"

Partially true, and the exception is more interesting than the rule. Same-mood pairings — two friendly fonts, two serious fonts — are the safest choice and rarely look wrong, which is exactly why they show up in "beginner-safe" pairing lists constantly. But the best-performing pairing in my entire test set was a deliberate mood mismatch: a slightly playful display font over a very serious, buttoned-up serif body, used for a mockup where the brand voice was genuinely "we don't take ourselves too seriously, but we know what we're doing." Matched mood is the safe default. Contrasted mood, used on purpose rather than by accident, can be the more memorable choice — but it requires knowing why you're breaking the rule, not just breaking it because you got bored of following it.

Rule 5: "If in doubt, use the same font family at different weights"

True far more often than I expected, and probably the most underused rule of the five. In the product card mockup specifically, a single font family at three weights — bold for the title, medium for the price, regular for the description — outperformed every two-font pairing I tried in the same slot. It read as more cohesive, and honestly, it was less work. The failure case is fonts that don't have enough weight range to pull this off — anything that only ships in regular and bold, with nothing in between, doesn't have the range to create real hierarchy this way, and you're better off introducing a genuine second typeface instead.

What actually mattered across all five

Contrast beats category every time. Whether that contrast comes from serif versus sans, weight versus weight, or mood versus mood barely mattered compared to whether real, visible contrast existed at all. The rules that survived intact were the ones measuring something concrete — x-height, weight range, structural difference. The rules that needed caveats were the ones treating a specific tactic (serif + sans, matched mood) as the goal itself, instead of a shortcut toward the actual goal, which is a heading and a body font that read as clearly, deliberately different from each other. None of that requires memorizing five rules. It requires looking at the actual pairing and asking whether the contrast is real or just assumed.

If you want to run your own version of this test, the font pair generator makes it fast to swap pairings in and out of the same mockup and actually see which of these hold up for whatever you're building, instead of taking any single blog post's word for it — including this one. Rules are a decent starting point. They're a bad place to stop.