Outfit + DM Sans

modernminimalfriendly

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.

Outfit 600 / DM Sans 400 — click the text to edit

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.

More about each face: Outfit · DM Sans

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=Outfit:wght@600&family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
CSS
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;
}
Next.js — next/font
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",
});
From usKeychord— keyboard shortcuts for every app

Related pairings