What fonts go well with Space Grotesk?

In the Nodlume catalog Space Grotesk appears in 3 curated pairings, combined with DM Sans, Inter and JetBrains Mono. The rule behind every one of them is contrast with harmony: the partner differs in classification (a serif over a sans, a geometric over a grotesque) while matching Space Grotesk's x-height and width closely enough that the two read as one system. Each card above shows the combination in the real faces so you can judge the fit before copying it.

How do I use Space Grotesk in Tailwind CSS v4?

Load the family with the Google Fonts link shown on the pairing card, then declare it in your stylesheet's @theme block as --font-heading, --font-body, or --font-mono. Tailwind v4 turns each token into a utility — font-heading, font-body, font-mono — so the pairing is one CSS edit rather than a per-component change. The theme generator emits the same three tokens inside a complete globals.css with colors, radius, and a type scale.

Font pairing generator

Space Grotesk font pairings

Space Grotesk, by Florian Karsten, grew out of Colophon's Space Mono: a proportional grotesque that kept the mono's quirky details — the ink traps, the sliced terminals — and turned them into a tech-forward display voice.

Those quirks are why Space Grotesk belongs in headings. Its personality at display sizes is exactly what a developer-tool or product brand wants, and it needs a deliberately neutral body underneath — Inter or DM Sans — so the details read as intentional rather than noisy.

In the Nodlume catalog, Space Grotesk leads the heading in all 3 of these pairings — its partners are DM Sans, Inter and JetBrains Mono. Every combination below previews in the real faces, with the full fallback-safe CSS font stacks and a Tailwind v4 @theme snippet you can paste as-is.

Space Grotesk & Inter

Product & interfaces

Space Grotesk as heading — Quirky, tech-forward headings grounded by a neutral UI body.

Voyage beyond the quiet harbor

Body copy sets the tone for long reading — Inter carries paragraphs while the heading takes the stage.

Heading: 'Space Grotesk', 'Segoe UI', sans-serif
Body: Inter, 'Segoe UI', sans-serif
Mono: 'JetBrains Mono', Consolas, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: Inter, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap">

Product Marketing

Product & interfaces

Space Grotesk as heading — Quirky and tech-forward in the headings, completely grounded in the body for explaining complex features.

Voyage beyond the quiet harbor

Body copy sets the tone for long reading — DM Sans carries paragraphs while the heading takes the stage.

Heading: 'Space Grotesk', 'Segoe UI', sans-serif
Body: 'DM Sans', 'Segoe UI', sans-serif
Mono: ui-monospace, SFMono-Regular, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap">

Developer Docs

Technical & docs

Space Grotesk as heading — Leans fully into the developer aesthetic with monospace body copy for an instant console feel.

Voyage beyond the quiet harbor

Body copy sets the tone for long reading — JetBrains Mono carries paragraphs while the heading takes the stage.

Heading: 'Space Grotesk', 'Segoe UI', sans-serif
Body: 'JetBrains Mono', Consolas, monospace
Mono: 'JetBrains Mono', Consolas, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'JetBrains Mono', Consolas, monospace;
  --font-mono: 'JetBrains Mono', Consolas, monospace;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap">

Using Space Grotesk in Tailwind CSS v4

Tailwind v4 reads fonts from @theme tokens, so a pairing is three lines of CSS: declare --font-heading, --font-body and --font-mono and Tailwind exposes them as the font-heading, font-body and font-mono utilities. Each card above carries that snippet plus the Google Fonts link for the families it needs. The theme generator writes the same tokens into a complete stylesheet with colors, radius and a modular type scale.

What fonts go well with Space Grotesk?: In the Nodlume catalog Space Grotesk appears in 3 curated pairings, combined with DM Sans, Inter and JetBrains Mono. The rule behind every one of them is contrast with harmony: the partner differs in classification (a serif over a sans, a geometric over a grotesque) while matching Space Grotesk's x-height and width closely enough that the two read as one system. Each card above shows the combination in the real faces so you can judge the fit before copying it.
How do I use Space Grotesk in Tailwind CSS v4?: Load the family with the Google Fonts link shown on the pairing card, then declare it in your stylesheet's @theme block as --font-heading, --font-body, or --font-mono. Tailwind v4 turns each token into a utility — font-heading, font-body, font-mono — so the pairing is one CSS edit rather than a per-component change. The theme generator emits the same three tokens inside a complete globals.css with colors, radius, and a type scale.

Try these pairings live

The font pairing generator has all 100 curated combinations — filter by use case, shuffle a random heading/body/mono mix with per-slot locks, and copy the CSS custom properties. For the rules behind pairings like these, read the font pairing guide, or set the type rhythm with the type scale calculator.

Open the generator

Space Grotesk & Inter

Product Marketing

Developer Docs

Using Space Grotesk in Tailwind CSS v4

Try these pairings live

More font pairings