Fontduet

The API reference

IBM Plex Sans for headings · IBM Plex Serif for body · IBM Plex Mono for code — all three set live below.

Display · IBM Plex Sans 600

Details make the difference

Body · IBM Plex Serif 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

An API reference is the strongest case for a single superfamily: endpoints, prose and payloads should feel engineered from one system. IBM Plex Sans marks the method names and section headers with clean, confident semibolds. IBM Plex Serif softens the explanatory paragraphs so guidance reads like documentation rather than a schema dump. IBM Plex Mono sets every request, response and parameter with matching metrics and a shared design DNA — because all three come from the same family, the x-heights and rhythm line up perfectly, so switching between prose and code never jars.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'IBM Plex Serif', 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: IBM Plex Sans · IBM Plex Serif · IBM Plex Mono

Choosing type for this? Fonts for SaaS products →