Outfit + DM Sans
Grumpy wizards make toxic brew
A standfirst set in DM Sans, 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 — Outfit over DM Sans, in the wild.
Outfit 600 / DM Sans 400 — click any section and type your own copy.
Why it works
Both faces are built on circular geometry, so the page feels like one coherent voice — but Outfit's purer circles and tighter spacing at semibold read as brand typography, while DM Sans's shorter descenders and softer rhythm settle into paragraph duty. Sans-on-sans pairings fail when the faces are almost-but-not-quite alike; here the shared geometry is close enough to harmonize and the roles distinct enough to hold hierarchy.
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=Outfit:wght@600&family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">h1, h2, h3 {
font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600;
}
body {
font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
}import { Outfit, DM_Sans } from "next/font/google";
const heading = Outfit({
subsets: ["latin"],
weight: "600",
variable: "--font-heading",
});
const body = DM_Sans({
subsets: ["latin"],
weight: "400",
variable: "--font-body",
});