Raleway + Merriweather

elegantwarmclassic

Grumpy wizards make toxic brew

The five boxing wizards jump quickly over the lazy dog, mixing jugs of quiet vodka while the jury watches. Click anywhere in this preview and type your own text to try the pairing.

Raleway 600 / Merriweather 400 — click the text to edit

Why it works

Raleway's slim, geometric headlines have a quiet sophistication, and Merriweather — designed specifically for on-screen body text — grounds them with a sturdy slab-ish serif, tall x-height and open counters. The pairing inverts the usual serif-heading formula, which instantly reads as more contemporary. Raleway's light elegance up top keeps Merriweather's density from feeling heavy, making long articles feel both serious and approachable.

More about each face: Raleway · Merriweather

Use this pairing

HTML — Google Fonts embed
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

body {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
Next.js — next/font
import { Raleway, Merriweather } from "next/font/google";

const heading = Raleway({
  subsets: ["latin"],
  weight: "600",
  variable: "--font-heading",
});

const body = Merriweather({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});
From usKeychord— keyboard shortcuts for every app

Related pairings