Montserrat + Crimson Text

Grumpy wizards make toxic brew

A standfirst set in Crimson Text, 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 — Montserrat over Crimson Text, in the wild.

Montserrat 700 / Crimson Text 400 — click any section and type your own copy.

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 the same deskKeychord— keyboard shortcuts for every app

Why it works

Use this pairing

Related pairings