Mono-led workbench

A monospace takes the lead in headings and labels to signal precision and craft, while a clear sans carries the explanations so reading never feels like reading code.

Headings: JetBrains Mono
Body: IBM Plex Sans

The faces, live

The sample is set in the pairing's own fonts, at its own sizes and line heights. The ladder shows every step of its type scale.

v2.4: faster builds, fewer surprises

Builds now reuse unchanged steps, so a typical rebuild finishes in under ten seconds. Error messages point to the exact line and suggest a fix. Two old settings were retired; the upgrade notes list what replaces each one.

Heading in JetBrains Mono 700 at 28px, line height 1.2. Body in IBM Plex Sans 400 at 18px, line height 1.65.

Headings

JetBrains Mono

Bold 700

Body

IBM Plex Sans

Regular 400
Semibold 600

The type scale

36pxv2.4: faster builds, fewer surprises
28pxv2.4: faster builds, fewer surprises
22pxv2.4: faster builds, fewer surprises
18pxv2.4: faster builds, fewer surprises
15pxv2.4: faster builds, fewer surprises
13pxv2.4: faster builds, fewer surprises

Copy the idea

The Mono-led workbench recipe — its idea, faces, scale and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Mono-led workbench — type pairing recipe

## The idea
- A monospace takes the lead in headings and labels to signal precision and craft, while a clear sans carries the explanations so reading never feels like reading code.

## Use it for
- Technical blogs and changelogs
- Developer product pages
- Maker and hardware project write-ups

## Avoid it when
- The audience is non-technical and could read it as cold
- Headings are long, since fixed-width letters take more room

## The faces
- Headings: JetBrains Mono (@fontsource/jetbrains-mono), weights 700
- Body: IBM Plex Sans (@fontsource/ibm-plex-sans), weights 400 and 600

## Scale and rhythm
- Scale: 13px, 15px, 18px, 22px, 28px, 36px
- Heading line height: 1.2
- Body line height: 1.65

## Principles
- Use the monospace for headings, labels, numbers and inline code; keep paragraphs in the sans.
- Keep the scale compact: monospace headings feel loud sooner than proportional ones.
- Line numbers, versions and dates read best in the monospace so their digits line up.
- Use the semibold sans for emphasis inside paragraphs rather than switching faces mid-sentence.

Design with the "Mono-led workbench" type pairing.
The idea: A monospace takes the lead in headings and labels to signal precision and craft, while a clear sans carries the explanations so reading never feels like reading code.
It suits: Technical blogs and changelogs.
It suits: Developer product pages.
It suits: Maker and hardware project write-ups.
Do not choose it when: The audience is non-technical and could read it as cold.
Do not choose it when: Headings are long, since fixed-width letters take more room.
Use JetBrains Mono in weights 700 for headings.
Use IBM Plex Sans in weights 400 and 600 for body text.
Use only these type sizes: 13px, 15px, 18px, 22px, 28px, 36px.
Set headings at a line height of 1.2 and body text at 1.65.
Follow this rule: Use the monospace for headings, labels, numbers and inline code; keep paragraphs in the sans.
Follow this rule: Keep the scale compact: monospace headings feel loud sooner than proportional ones.
Follow this rule: Line numbers, versions and dates read best in the monospace so their digits line up.
Follow this rule: Use the semibold sans for emphasis inside paragraphs rather than switching faces mid-sentence.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --font-heading: "JetBrains Mono", monospace;
  --font-body: "IBM Plex Sans", sans-serif;
  --type-1: 13px;
  --type-2: 15px;
  --type-3: 18px;
  --type-4: 22px;
  --type-5: 28px;
  --type-6: 36px;
  --leading-heading: 1.2;
  --leading-body: 1.65;
}

Download brief (.md)

Where it fits

Use it for

Technical blogs and changelogs
Developer product pages
Maker and hardware project write-ups

Avoid it when

The audience is non-technical and could read it as cold
Headings are long, since fixed-width letters take more room

Principles

Use the monospace for headings, labels, numbers and inline code; keep paragraphs in the sans.
Keep the scale compact: monospace headings feel loud sooner than proportional ones.
Line numbers, versions and dates read best in the monospace so their digits line up.
Use the semibold sans for emphasis inside paragraphs rather than switching faces mid-sentence.

Back to all pairings