Playfair Display + Manrope
Grumpy wizards make toxic brew
A standfirst set in Manrope, 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 — Playfair Display over Manrope, in the wild.
Playfair Display 600 / Manrope 400 — click any section and type your own copy.
Why it works
Playfair's hairline-and-slab contrast, rooted in 18th-century Didone tradition, supplies the romance; Manrope's contemporary semi-geometric forms keep everything else strictly of-the-moment. The pairing succeeds on distance — one face is all modulation and flourish, the other nearly monoline — so each role is unambiguous, and Manrope's generous x-height compensates for Playfair's tighter fit by keeping small text open and legible.
More about each face: Playfair Display · Manrope
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=Playfair+Display:wght@600&family=Manrope:wght@400;600&display=swap" rel="stylesheet">h1, h2, h3 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
font-weight: 600;
}
body {
font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
}import { Playfair_Display, Manrope } from "next/font/google";
const heading = Playfair_Display({
subsets: ["latin"],
weight: "600",
variable: "--font-heading",
});
const body = Manrope({
subsets: ["latin"],
weight: "400",
variable: "--font-body",
});