Font Pairing

Font pairing is the practice of selecting two or more typefaces that work harmoniously together — typically one for headings and one for body text, though more complex systems use three or four fonts across different roles. Good pairing creates visual contrast and hierarchy without creating discord.

The foundational principle: contrast with compatibility

Effective pairs establish clear contrast in at least one typographic dimension (classification, weight, width, or historical period) while sharing enough underlying characteristics to feel cohesive. A high-contrast serif for headings with a neutral sans-serif for body text is the most reliable pattern.

Common pairing strategies:

Serif + Sans-serif (classic approach):

/* Headings: expressive serif; Body: readable sans */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Source Sans 3', system-ui, sans-serif; }

Superfamily pairing (safest option): Some font families include both serif and sans-serif variants designed to work together:

/* IBM Plex superfamily */
h1, h2 { font-family: 'IBM Plex Serif', serif; }
body { font-family: 'IBM Plex Sans', sans-serif; }
code { font-family: 'IBM Plex Mono', monospace; }

Neutral + Distinctive:

/* Clean body, expressive display */
h1 { font-family: 'Abril Fatface', cursive; }
body { font-family: 'Lato', sans-serif; }

Practical pairing rules:

Avoid pairing two fonts from the same visual category with similar proportions — two humanist sans-serifs, for example, often look like a mistake rather than a deliberate choice. The eye needs a clear reason for the switch.

Ensure size differentiation compensates for similar fonts. If you pair two sans-serifs, make the weight and size contrast significant enough to carry the hierarchy.

Evaluation checklist: - Do both fonts read well at their intended sizes? (Display fonts often break down below 18px) - Do the x-heights feel compatible? (Very different x-heights can make pairs feel mismatched) - Does the personality match the content? (A playful script and a technical monospace clash contextually) - Is the language coverage the same? (Both fonts need to support your character set)

Google Fonts offers a "Pairings" section on each font page with curated suggestions. Resources like Fontjoy generate contrast-optimized pairings algorithmically. Whatever tool you start with, always test your pair together in actual content at actual sizes — a pairing that looks elegant in a specimen can feel awkward in running text.