Raleway + Vollkorn

elegantclassiceditorial

Grumpy wizards make toxic brew

A standfirst set in Vollkorn, 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 — Raleway over Vollkorn, in the wild.

Raleway 600 / Vollkorn 400 — click any section and type your own copy.

Why it works

Raleway's crisp geometry and distinctive details, like the crossed W, give headings a refined, almost fashion-editorial coolness. Vollkorn pulls the opposite direction in body text: dark, sturdy old-style serifs made for long comfortable reading, with a faint blackletter grit. The temperature contrast — cool display, warm text — is what makes the pairing feel considered, and both families carry enough weights to build a full editorial hierarchy.

More about each face: Raleway · Vollkorn

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=Raleway:wght@600&family=Vollkorn:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

body {
  font-family: 'Vollkorn', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
Next.js — next/font
import { Raleway, Vollkorn } from "next/font/google";

const heading = Raleway({
  subsets: ["latin"],
  weight: "600",
  variable: "--font-heading",
});

const body = Vollkorn({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});
From usKeychord— keyboard shortcuts for every app

Related pairings