Lato + Merriweather
Grumpy wizards make toxic brew
A standfirst set in Merriweather, one size up — where a pairing starts earning trust.
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.
“Type is a beautiful group of letters, not a group of beautiful letters.”
— Matthew Carter
Fig. 1 — Lato over Merriweather, in the wild.
Lato 900 / Merriweather 400 — click any section and type your own copy.
Why it works
One of the most recommended pairings on the web, and for good reason: Lato's warm, semi-rounded sans headlines sit comfortably over Merriweather's sturdy reading serif, sans-over-serif in the classic newspaper arrangement. Both faces were engineered for screen legibility around the same era, so their x-heights and overall colour match closely — the contrast is in texture, not in tone. Use Lato at 900 to give headlines enough weight against Merriweather's dark paragraphs.
More about each face: Lato · Merriweather
Use this pairing
<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=Lato:wght@900&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">h1, h2, h3 {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-weight: 900;
}
body {
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
font-weight: 400;
}import { Lato, Merriweather } from "next/font/google";
const heading = Lato({
subsets: ["latin"],
weight: "900",
variable: "--font-heading",
});
const body = Merriweather({
subsets: ["latin"],
weight: "400",
variable: "--font-body",
});