Fontduet

The knowledge base

Figtree for headings · Inter for body · IBM Plex Mono for code — all three set live below.

Display · Figtree 600

Details make the difference

Body · Inter 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

A support knowledge base is read in a hurry by someone with a problem, so clarity beats character everywhere. Figtree's friendly semibold makes article titles and category headers approachable and easy to skim. Inter carries the step-by-step body copy with the highest small-size legibility of any UI sans, so numbered instructions never blur. IBM Plex Mono sets file paths, settings values and short commands with its humanist warmth and clear glyphs, keeping the copy-and-paste bits obviously distinct from the surrounding prose so users know exactly what to type.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Figtree', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-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: Figtree · Inter · IBM Plex Mono

Choosing type for this? Fonts for SaaS products →