Montserrat + Crimson Text

classiceditorialelegant

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.

Montserrat 700 / Crimson Text 400 — click the text to edit

Why it works

Montserrat's bold geometric capitals give structure and modernity, while Crimson Text's old-style, Garamond-inflected paragraphs bring bookish warmth to the reading column. The contrast works on two axes at once — sans versus serif, and twentieth-century geometry versus Renaissance calligraphy — so each role is unmistakable. Because Crimson runs small on the body, size it up a notch; its literary texture rewards a comfortable 18px or more.

More about each face: Montserrat · Crimson Text

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=Montserrat:wght@700&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Montserrat', 'Trebuchet MS', Helvetica, sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Crimson Text', Garamond, Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
Next.js — next/font
import { Montserrat, Crimson_Text } from "next/font/google";

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

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

Related pairings