Fontduet

The editorial stack

Fraunces for headings · Newsreader for body · IBM Plex Mono for code — all three set live below.

Display · Fraunces 600

Details make the difference

Body · Newsreader 400

Good type pairing is quiet craft: a display face with character, a body face that gets out of the way, and a monospace that keeps code honest. Set them together and a page finds its rhythm — headings announce, paragraphs settle, and the details stay precise.

Mono · IBM Plex Mono 400
function pair(display, body, mono) {
  return { display, body, mono }; // three roles, one system
}

Why these three

Long-form editorial writing benefits from two serifs with different tempers plus a mono for the technical asides. Fraunces brings high-contrast, characterful headlines with old-style warmth that sets the tone of a feature. Newsreader carries the body: built for screens, with open counters and a comfortable reading x-height that survives thousands of words. IBM Plex Mono steps in for pull-quoted data, code samples and figure captions — a restrained, humanist mono whose modest contrast sits quietly beside two expressive serifs instead of fighting them.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-weight: 400;
}
From the same deskKeychord— keyboard shortcuts for every app

Read more

More about each face: Fraunces · Newsreader · IBM Plex Mono

Choosing type for this? Fonts for magazines →