Install FontSwap
Most font pairing advice boils down to “pair a serif with a sans-serif” or “use contrasting styles.” That’s not wrong, but it’s incomplete. Two serif+sans pairs can look wildly different — one harmonious, the other jarring — and vague rules can’t explain why. FontAlternatives scores every pairing using five measurable metrics, each weighted by its impact on visual compatibility. Here’s how the system works and what the numbers actually mean.
Why Most Pairing Advice Fails
The problem with subjective pairing rules is that they can’t distinguish between degrees of compatibility. Merriweather + Roboto scores 88, while Crimson Pro + DM Sans scores 66. Both are serif+sans combinations. Both “follow the rules.” But their compatibility differs by 22 points because the underlying metrics diverge significantly.
A deterministic scoring system replaces gut instinct with measurable properties. If you understand the five metrics, you can predict whether a pairing works before you ever see it rendered.
The 5 Metrics and Their Weights
Each metric contributes a weighted percentage to the overall compatibility score:
| Metric | Weight | What It Measures |
|---|---|---|
| X-height ratio | 25% | How similarly sized the lowercase letters appear |
| Stroke contrast | 20% | Difference in thick-thin stroke variation |
| Classification contrast | 20% | Whether categories create intentional contrast |
| Mood alignment | 20% | Overlap in personality traits and intended use |
| Width ratio | 15% | How similarly wide the characters are |
1. X-Height Ratio (25%)
X-height ratio is the single most important metric because it determines whether two fonts look like they belong together at the same size. When Inter sits next to Lora, both set at 16px, you want the lowercase letters to occupy roughly the same vertical space. A ratio of 0.95 or higher scores a perfect 100 points. Drop below 0.8 and the fonts start looking like they were set at different sizes — instant visual discord.
2. Stroke Contrast (20%)
Stroke contrast measures the difference in thick-thin variation between two fonts. This metric has an intentional sweet spot and an “uncanny valley.” Fonts with very similar stroke contrast (differential below 0.3) score 90 points — they harmonize through similarity. Fonts with dramatically different contrast (above 1.7) score 85 — they create intentional, readable contrast. But a differential between 0.5 and 1.5 scores only 30 points. That middle range creates fonts that are different enough to clash but similar enough that the contrast feels accidental.
3. Classification Contrast (20%)
Pairing a serif with a sans-serif earns a 95-point classification bonus. Same-class pairings score only 40. This metric explains why Merriweather + Source Sans Pro (serif+sans, score 88) dramatically outperforms two sans-serifs paired together. The structural difference between serif and sans-serif creates hierarchy without requiring different weights or sizes.
4. Mood Alignment (20%)
Two fonts should share some personality traits — but not too many. A trait overlap between 30% and 60% scores 90 points: enough shared DNA to feel cohesive, enough difference to remain distinct. Above 60% overlap, the fonts feel redundant (70 points). Below 15%, they feel disconnected (30 points). The sweet spot rewards fonts that share a general direction — both “professional,” both “clean” — while differing in specifics.
5. Width Ratio (15%)
Width ratio compares average character widths. Fonts with similar character widths (ratio above 0.9) score 100. This metric carries the least weight because width differences are easier to compensate for with CSS — you can adjust letter-spacing or font-size to bring widths closer. But a ratio below 0.75 creates noticeable rhythm problems in mixed-font layouts like navigation bars or data tables.
Score Breakdown: Real Pairings
Here’s how the scoring plays out across actual font combinations:
| Pairing | Score | Why It Works (or Doesn’t) |
|---|---|---|
| Inconsolata + Source Sans 3 | 92 | Strong classification contrast, aligned mood |
| Fira Code + Inter | 88 | Mono+sans pairing with matched x-heights |
| Merriweather + Roboto | 88 | Classic serif+sans with complementary traits |
| Merriweather + Open Sans | 82 | Solid but less differentiated than Roboto pair |
| Inter + Lora | 76 | Good combination, moderate classification bonus |
| Playfair Display + Source Sans 3 | 76 | High contrast display serif + neutral body |
| Crimson Pro + DM Sans | 66 | Classification bonus present but weaker metric alignment |
What a “Good” Score Looks Like
- 90-100: Exceptional compatibility. Fonts share x-height harmony, complementary classification, and aligned mood. Use confidently in any context.
- 80-89: Strong pairing. Minor metric mismatches that are easily compensated with CSS adjustments. Suitable for professional and editorial use.
- 70-79: Decent pairing. Works well in specific contexts but may need careful sizing or spacing. Good for body+heading combinations where fonts aren’t mixed on the same line.
- Below 70: Proceed with caution. Significant metric mismatches. Consider anti-pairing detection rules before committing.
CSS Tips for Balancing X-Heights
When two fonts have slightly different x-heights, you can compensate with the font-size-adjust property:
/* If your sans-serif body text has a taller x-height than your serif headings */
h1, h2, h3 {
font-family: "Merriweather", serif;
font-size-adjust: 0.52;
}
body {
font-family: "Roboto", sans-serif;
}The font-size-adjust property scales the font so its x-height matches the specified ratio, keeping paired fonts visually consistent even when their raw x-heights differ. Browser support is strong — all modern browsers handle it correctly.
Another approach is to manually adjust sizes based on the ratio. If Font A’s x-height is 10% smaller than Font B’s, bump Font A’s size by roughly 10%:
.serif-heading {
font-family: "Lora", serif;
font-size: 1.1em; /* compensate for smaller x-height */
}FAQ
How are the metric weights determined? The weights reflect each metric’s impact on visual compatibility as measured through typographic analysis. X-height ratio carries the most weight (25%) because it has the strongest effect on whether fonts look like they belong at the same size. The remaining four metrics are balanced at 15-20% each.
Can a high-scoring pair still look bad? Yes — scoring measures structural compatibility, not aesthetic taste. A 92-scoring pair used with poor hierarchy, wrong sizes, or clashing colors will still fail. The score tells you the raw material is compatible; design execution determines the final result.
Why do monospace+sans pairings score so high? Monospace fonts paired with sans-serifs benefit from strong classification contrast (20% bonus) and typically share clean, modern mood traits. Pairings like Fira Code + Inter (88) and Inconsolata + Source Sans 3 (92) are especially strong for developer tools and SaaS dashboards.
Does the system account for variable font axes? The scoring uses static metric values. Variable fonts like Inter or Source Sans 3 can adjust weight and width dynamically, which may improve or degrade a pairing depending on the chosen axis values. The score represents the default instance.
Where can I see all scored pairings? The complete pairing index lists all combinations with scores, industries, and detailed breakdowns.