Typography Relationships
Font Pairing
Two fonts on a page create a relationship. The question is whether that relationship is contrast or conflict. This tool scores pairings on category difference, size hierarchy, and weight contrast — then tells you what it thinks. It is opinionated. It should be.
pixel / font pairing
Font Pairing Studio
Pair two typefaces. Get a score. Get a judgment. Typography is not decoration — it is structure made visible.
"Restrained. Intentional. This pairing doesn't announce itself."
click text to edit
Playfair Display
400Aa Bb Cc 1234
500Aa Bb Cc 1234
600Aa Bb Cc 1234
700Aa Bb Cc 1234
800Aa Bb Cc 1234
Inter
300Aa Bb Cc 1234
400Aa Bb Cc 1234
500Aa Bb Cc 1234
600Aa Bb Cc 1234
700Aa Bb Cc 1234
Contrast vs. Conflict
Contrast is intentional difference. Conflict is accidental similarity. A serif heading with a sans body creates contrast — the structural difference is legible, purposeful. Two serifs with similar stroke weight create conflict — the difference exists but has no function. The eye registers it as noise.
The scoring algorithm penalizes same-category pairings because similarity without purpose is the most common pairing mistake. Two serifs is not inherently wrong, but it requires mastery: the differences must be deliberate and visible at every size in your hierarchy. Most pairings that attempt it fail.
Three Axes of Pairing
Category
Serif, sans-serif, monospace. The strongest axis. Crossing categories produces immediate visual contrast. Staying within a category demands compensation on the other two axes or the pairing feels redundant — two voices saying the same thing.
Size Ratio
The sweet spot is 2× to 3.5× between heading and body. Below 1.3×, the hierarchy collapses — heading and body read as the same level. Above 4×, the heading disconnects from the body. The size ratio establishes who leads and who supports.
Weight Contrast
A 200–400 weight difference between heading and body creates readable hierarchy. Below 100 difference, the fonts blur together. Same weight, same size, same category: you have two fonts that are functionally identical. Drop one.
The Hidden Variable: x-Height
Two fonts can share size, weight, and tracking — and still feel mismatched. The cause is almost always x-height: the height of lowercase letters relative to the cap height. A tall x-height (Inter, DM Sans) reads larger than a short x-height (Cormorant, EB Garamond) at the same pixel size.
When pairing fonts with different x-heights, you compensate with size. The body font at 16px may need the heading font at 15px or 17px to appear the same optical size. The tool scores the final composition, not the raw numbers — because the numbers lie when x-heights diverge.
When One Family Is Enough
Not every design needs two fonts. A superfamily with wide weight range — Inter at 300 body, 700 heading — creates hierarchy through weight alone. The visual unity is effortless. The tradeoff is character: single-family designs tend toward neutrality. That is a feature for product UI and a limitation for editorial.
The tool penalizes same-font pairings heavily because the exercise is pairing. But in practice, one well-chosen family with intentional weight contrast outperforms two poorly matched fonts every time.