Instrument Serif + Newsreader

Grumpy wizards make toxic brew

A standfirst set in Newsreader, 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 — Instrument Serif over Newsreader, in the wild.

Instrument Serif 400 / Newsreader 400 — click any section and type your own copy.

Why it works

This is an all-serif pairing that works on optical scale: Instrument Serif's high-contrast, thin-strokes display face makes a delicate, romantic headline, while Newsreader's text-optimized serif keeps the paragraph sturdy and readable. Sharing the serif genus gives the page a unified literary voice, and the leap in contrast between the two draws a clear line between the flourish and the reading.

More about each face: Instrument Serif · Newsreader

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=Instrument+Serif:wght@400&family=Newsreader:wght@400;600&display=swap" rel="stylesheet">

CSS

h1, h2, h3 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

body {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

Next.js — next/font

import { Instrument_Serif, Newsreader } from "next/font/google";

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

const body = Newsreader({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});

From the same deskKeychord— keyboard shortcuts for every app

Why it works

Use this pairing

Related pairings