Serif + Sans-Serif Contrast — Typography Pairing Principles

The Serif + Sans-Serif Contrast Principle

The most reliable font pairing technique is combining a serif font with a sans-serif font. This creates natural visual contrast that helps readers distinguish headings from body text at a glance.

Why Contrast Matters

Typography serves two purposes: attracting attention (headings) and maintaining readability (body text). Using the same font style for both forces you to rely solely on size and weight differences, which can feel monotonous.

Serif Headings + Sans-Serif Body

The traditional approach uses ornate serif headings to create visual anchors, with clean sans-serif body text for easy screen reading:

h1 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Lato', system-ui, sans-serif; }

Sans-Serif Headings + Serif Body

The reverse also works well, especially for blog and editorial content where serif body text improves long-form readability:

h1 { font-family: 'Inter', system-ui, sans-serif; }
body { font-family: 'Merriweather', Georgia, serif; }

Matching X-Heights

The key to making any serif/sans-serif pair work is matching x-heights (the height of lowercase letters). Fonts with similar x-heights create visual harmony even though their styles differ dramatically.

Common Pitfalls

Avoid pairing two fonts that are too similar (e.g., two geometric sans-serifs) or too different (e.g., a heavy slab serif with a delicate script). The goal is contrast without conflict.