← ggrigo.xyz
Type Pairing Proposals · The Font Matrix Method

A serif, paired
with a monospace

Five proposals built on Indra Kupferschmid's font matrix. The principle is simple: match the construction, contrast the category. Two faces that share an underlying skeleton feel related; the leap from a proportional serif to a fixed-width monospace supplies the contrast.

Method · Kupferschmid / Schöndorfer All families self-hosted
01 — Harmony

Both faces are placed on the same row of the matrix — the same construction principle. A shared skeleton (stress, aperture, stroke logic) is what makes an otherwise odd couple read as a family.

02 — Contrast

They sit in different categories — a proportional serif against a fixed-width monospace. Different rhythm, different job. That gap is the tension you actually want.

The construction axis
Dynamic
Humanist

Drawn from the broad-nib pen. Angled stress, open apertures, organic, warm.

Rational
Static / Transitional

Upright, vertical stress, even and neutral. Engineered rather than handwritten.

Geometric
Constructed

Built from circles and straight lines. Monoline, mechanical, deliberate.

Dynamic · Humanist
02 pairings
01  Source Serif 4  ×  Source Code Pro
Superfamily match
Built from one drawing board

Both faces come from Adobe's Source superfamily, so the construction principle isn't just similar — it's identical. The serif carries the reading; the mono handles anything literal. The safest pairing on this sheet, and a textbook demonstration of the matrix.

# role split
body, h1–h6 : "Source Serif 4";
code, label : "Source Code Pro";
Documentation Technical editorial Low risk
02  Spectral  ×  IBM Plex Mono
Warm humanist
Calligraphic, with a slab's handshake

Spectral's stress is angled and pen-drawn; IBM Plex Mono answers with subtle humanist details and faint slab serifs of its own. Shared dynamic skeleton, more personality than proposal 01 — editorial with a quietly technical undertone.

// captions, metadata, code
2026-06-19   ed. note   v.2
stress = angled · aperture = open
Long-form reading Magazine / blog Brand voice
Rational · Static
02 pairings
03  Bitter  ×  JetBrains Mono
The article's case
Screen-built slab meets upright mono

This is close to the matrix article's own worked example. Bitter is a rational, low-contrast slab serif made for screens; JetBrains Mono shares its upright stress and even stroke. Two engineered faces — sturdy, legible, unfussy.

/* same skeleton, different grid */
contrast: low;  stress: vertical;
ligatures: on;  width: fixed;
Developer docs Dashboards UI-friendly
04  Roboto Slab  ×  Roboto Mono
Superfamily match
Neutral by design

Same family DNA again, this time on the rational row. Roboto Slab's grotesque-derived skeleton and Roboto Mono's are one and the same. Maximally neutral — it recedes and lets content lead. The dependable choice for product and data.

# dashboard label set
REVENUE   $1,284,900   ▲ 4.2%
UPTIME    99.98%
Product UI Data / fintech Low risk
Geometric · Constructed
01 pairing
05  Zilla Slab  ×  Space Mono
Most expressive
Drawn with a compass

Zilla Slab's near-monoline, geometric slab forms sit beside Space Mono's circular bowls and quirky descenders. Both are constructed rather than written, so the shared geometry holds while Space Mono's character makes it the boldest, most brand-forward option here.

// loud on purpose
geometry = circles + lines
vibe = studio / editorial / tech
Posters / titling Creative brand High character

The matrix is a guide, not a cage — read it as a way to retrain your eye, not a rulebook. Two faces on the same construction row will almost always cooperate; the rest is choosing how much contrast you want between them.

After Indra Kupferschmid
& Oliver Schöndorfer
// the method, applied — proposal 02 as a working kit ↓
// design system · type swap Editorial Kit · Dynamic · Humanist
Spectral × IBM Plex Mono — applied throughout

Editorial Kit,
retyped

The warm paper, the slate ink, the two-tone ribbon — all kept. Display is set in Spectral; everything you read sits in IBM Plex Mono. A soft slate-and-rose colourway over warm paper.

// the slate-and-rose ribbon — the one recurring motif
Palette · one colourway
paper
#F5F0ED
taupe
#D4C6BD
rose · accent
#D6B7B5
slate · ink
#3D5361
The pairing
Warm humanist
Spectral  ×  IBM Plex Mono

A calligraphic, pen-drawn serif for display; a monospace that hides faint slab serifs and humanist details of its own for the reading. The dynamic skeleton binds them — there's just more voice in the room.

Spectral — display
The ribbon ran slate and rose; only the letters changed.
set like a typed page, with a calligraphic hand.
IBM Plex Mono — body

Spectral's angled stress and open apertures give the page personality without losing its composure. Plex Mono carries the body in the same register — engineered, but warm — every glyph the same width, so prose, captions and code all sit on one rhythm.

# role split
display, heading : "Spectral";
body, label, code : "IBM Plex Mono";
pitch · 10 cpi   ribbon · slate + rose
Draft · /ibd-sim
no. SF-26
An IBD Leaderboard backtest

net roughly flat against a market that ran away.

Read piece Source
Type scale · spec plate
DisplaySpectral 600 · 44px
HeadingSpectral 600 · 26px
DeckSpectral italic · 22px
BodyPlex Mono 400 · 15px
CaptionPlex Mono 400 · 13px
LabelPlex Mono 500 · 11px ↑
Editorial Kit no. SF-26 · paper · Spectral × Plex Mono Pairing method after the Google Fonts matrix