Comfortaa + Karla
Grumpy wizards make toxic brew
A standfirst set in Karla, 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 — Comfortaa over Karla, in the wild.
Comfortaa 700 / Karla 400 — click any section and type your own copy.
Why it works
Comfortaa is built from near-circles with a low x-height and loose spacing, which makes headlines feel airy and bubbly but would be exhausting over paragraphs. Karla answers with a grotesque skeleton that has just enough quirk — the flicked leg of the R, slightly irregular spacing — to sit comfortably next to a novelty display face without being one. The result is playful at the top and quietly plain below, a good register for personal sites and gentle product pages.
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=Comfortaa:wght@700&family=Karla:wght@400;600&display=swap" rel="stylesheet">h1, h2, h3 {
font-family: 'Comfortaa', 'Century Gothic', 'Trebuchet MS', sans-serif;
font-weight: 700;
}
body {
font-family: 'Karla', 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-weight: 400;
}import { Comfortaa, Karla } from "next/font/google";
const heading = Comfortaa({
subsets: ["latin"],
weight: "700",
variable: "--font-heading",
});
const body = Karla({
subsets: ["latin"],
weight: "400",
variable: "--font-body",
});