Inter + Merriweather — The Perfect Blog Typography Pairing

Why Inter + Merriweather Works

The Inter + Merriweather pairing is a modern classic that combines the best of both worlds: a crisp, geometric sans-serif for headings with a highly readable serif for body text.

Inter for Headings

Inter was designed specifically for screens. Its tall x-height, open apertures, and carefully tuned optical sizes make it incredibly legible at any scale. At heading sizes (24px+), Inter's clean geometry creates strong visual anchors without overwhelming the page.

h1, h2, h3 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
}

Merriweather for Body Text

Merriweather was designed by Eben Sorkin with screen reading in mind. Its slightly condensed letterforms, sturdy serifs, and generous x-height make long paragraphs comfortable to read even at smaller sizes (14-18px).

body {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.7;
}

Why the Contrast Works

This pairing succeeds because it creates clear visual hierarchy through style contrast (sans-serif vs. serif) while maintaining harmony through matching x-heights. The geometric precision of Inter contrasts beautifully with Merriweather's organic letterforms, guiding the reader's eye naturally from heading to body text.