Font pairings
Pairs that work, with the size correction that makes them work.
IBM Plex Serif
One superfamily: identical 0.516 em x-height and 0.698 em cap, so hierarchy comes only from weight and size and never from optical mismatch.
IBM Plex Sans
Mono drawn on the same skeleton and the same vertical metrics, so inline code sits on the prose baseline without optical jump.
Red Hat Display
MCKL cut Text with a deliberately smaller x-height (0.488 vs 0.501) and looser spacing for small sizes; body needs +2.7% to read optically equal.
Alegreya
Shared calligraphic dynamic skeleton with x-heights within 1.3%, so the sans reads as the same voice with the serifs removed.
PT Serif
Designed as one state-commissioned system with matched 0.500 em x-height and 0.700 em cap; zero correction needed.
Source Serif 4
Adobe superfamily; the serif runs 2.3% smaller in x-height, and both hold up at documentation sizes.
Fira Sans
Same Spiekermann skeleton and identical 0.527 em x-height, so code blocks and prose share one optical size.
Space Grotesk
Space Grotesk is the proportional redraw of Space Mono, so the pair shares every idiosyncratic detail at a 2% x-height gap.
Geist
Vercel drew the mono as the deliberate partner to the sans; identical 0.530 em x-height and 0.710 em cap.
Roboto Slab
Slab and sans share Roboto's exact vertical metrics, so the slab adds weight to headings without changing apparent size.
Ubuntu
Dalton Maag drew both for Canonical on one humanist skeleton with matched 0.520 em x-height.
DM Serif Display
Same Colophon commission; the serif's smaller x-height (−4.6%) and cap (−5.7%) mean the display cut needs to run larger than instinct suggests.
Wix Madefor Display
Display is tight and near-circular for large sizes, Text is spaced for UI, on identical 0.492 em vertical metrics.
Libre Caslon Display
Optical-size pair from one family whose x-heights differ by 20% — the largest intra-family correction in the Google catalogue.
Instrument Serif
Condensed display serif against its own sans, both drawn for one brand system at matched cap-height.
Archivo Black
Same Omnibus-Type grotesque at two optical weights; x-heights within 0.4%, so weight alone carries the hierarchy.
Merriweather
Both run unusually large (0.556 em x-height) and match to 0.2%, so a 16px body genuinely reads at 16px.
Zilla Slab
Mozilla's own stack, and a measurement trap: Inter's x-height is 23% larger, so an unadjusted slab heading looks weaker than its body copy.
Libre Franklin
American Gothic against Transitional, a 100-year-old newspaper convention; identical 0.530 em x-height but a 3.6% cap-height gap.
Cormorant Garamond
Humanist sans against an Old Style serif sharing a calligraphic axis; Cormorant's 0.386 em x-height forces a 25.5% correction.
Work Sans
Taviraj's wide proportions echo Work Sans's wide spacing, and its teardrop terminals answer Work Sans's quirky letterforms.
Trirong
Shared geometric skeleton, vertical axis and wide proportions across a serif and a sans, at a 4.2% x-height gap.
Eczar
Two serifs split by size role: Gentium's simpler shapes stay clear small, Eczar's calligraphic drama only reads large.
Merriweather
A USWDS default: the serif runs 7.5% optically larger, which is why the system normalises size tokens rather than trusting px.
Merriweather
The exact pair USWDS cites when explaining optical size; needs +14.4% on the body to match.
Public Sans
USWDS's UI sans and code face; a 2.1% gap means inline code needs no size tweak.
Literata
A reading serif drawn for e-ink and screen against a neutral civic sans, matched to within 1.9%.
Literata+Public SansCommon, but uncited-1.9% size correctionJosefin Sans
Geometric deco sans over a humanist serif; Josefin's 0.538 x/cap ratio is the lowest in the catalogue and needs a 13.9% correction.
Josefin Sans
Two sans of opposite construction, geometric against humanist, with a 25.3% x-height gap that must be corrected.
Lora
Calligraphic-rooted serif over the most-tested humanist screen sans; Open Sans runs 6.5% larger.
Newsreader
A serif commissioned for long-form screen reading against the default UI sans; Newsreader's 0.426 em x-height is 22% smaller than Inter's.
Newsreader+InterCommon, but uncited-22% size correctionSpectral
Screen-first serif drawn for Google Docs against a wide, open sans; the serif runs 10% optically smaller.
Spectral+Work SansCommon, but uncited-10% size correctionFraunces
Personality in the heading, low-vision legibility in the body, at a near-free 2.8% correction.
Fraunces+Atkinson Hyperlegible NextCommon, but uncited-2.8% size correctionBricolage Grotesque
An optical-size grotesque with a very high 0.783 x/cap against Inter's neutral 0.750; the display cut looks larger than its px value.
Bricolage Grotesque+InterCommon, but uncited-5.3% size correctionSchibsted Grotesk
An editorial-publishing grotesque over a rational text serif; the serif needs +10.9% to hold its own.
Schibsted Grotesk+Source Serif 4Common, but uncited+10.9% size correctionPlayfair Display
High-contrast Didone display against a low-contrast rational sans; shared vertical axis, 5.8% correction.
Playfair Display+Source Sans 3Common, but uncited+5.8% size correctionEB Garamond
Old Style against neo-grotesque, 400 years apart; the largest correction in this library at 26.7%, and unreadable as a naive pairing.
EB Garamond+InterCommon, but uncited-26.7% size correctionAnton
Anton's 0.852 x/cap is the largest in the catalogue, so it reads far heavier than its px size; body needs +38.6% to keep up.
Anton+RobotoCommon, but uncited+38.6% size correctionBodoni Moda
Didone extremes against a warm humanist sans; Bodoni's tall 0.750 cap and low 0.613 x/cap make it look bigger and read smaller.
Bodoni Moda+LatoCommon, but uncited-9.1% size correctionBitter
Screen-drawn contemporary slab over a grotesque with a high 0.761 x/cap that stays open at 13-14px; needs +10.5%.
Bitter+KarlaCommon, but uncited+10.5% size correction
Why every pairing shows a percentage
Two typefaces set at the same size almost never look the same size. What you read is the x-height, not the em box, and it varies enormously. Pick a pairing from any other gallery, set both at your intended sizes, and the heading will usually look wrong — not because the pairing is bad, but because nobody told you the correction.
The clearest case here is Libre Caslon. Its own Display and Text cuts, same designer, same family, differ in x-height by 20%. Set them at matching sizes and the display cut looks shrunken.
What “cited” means
29 of these 40 can be traced to someone using or recommending them — a production stack, a design system's own documentation, a named typographer. The rest are common combinations with no attribution we could find, and they say so. A pairing nobody can be shown using is still worth listing; it is not worth inventing authority for.
How a pairing fails
Rarely because the fonts “clash”. Usually because their skeletons are too similar to read as a hierarchy, so the page looks like a font failed to load; or because their x-heights differ enough that no single size aligns them; or because two display faces are both trying to be the interesting one.
Licensing
Every family here is free for commercial use and available from Google Fonts. Most are SIL Open Font License 1.1; Ubuntu and Ubuntu Mono use the Ubuntu Font Licence 1.0, which is also free commercially. This site ships measurements rather than font files, so nothing is redistributed either way.