What fonts go well with Geist?

In the Nodlume catalog Geist appears in 3 curated pairings, combined with Fraunces and Newsreader. 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 Geist'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 Geist 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

Geist font pairings

Geist is Vercel's typeface family — a Swiss-inspired neo-grotesque drawn for developer tools and product interfaces, released open source and hosted on Google Fonts since 2024. It has the even texture and tight rhythm of Inter with slightly more character in the terminals, and Geist Mono is its purpose-built code companion.

Geist works as a one-family system — heading, body and mono all from the same drawer — or as the neutral body under a face with more warmth: a modern text serif like Newsreader keeps an editorial site contemporary, and a soft display serif such as Fraunces gives a brand headline personality that Geist's paragraphs ground. Keep Geist Mono in the code slot either way; it was cut to sit beside the sans.

In the Nodlume catalog, Geist leads the heading in 2 of these 3 pairings and the body in 2 — its partners are Fraunces and Newsreader. 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.

Geist System

Product & interfaces

Geist as heading & body — One Swiss-inspired family across every role — the Vercel look, with Geist Mono carrying code and data.

Voyage beyond the quiet harbor

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

Heading: Geist, 'Segoe UI', sans-serif
Body: Geist, 'Segoe UI', sans-serif
Mono: 'Geist Mono', Consolas, monospace

Tailwind v4 snippet

@import "tailwindcss";

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

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

Geist & Newsreader

Editorial & publishing

Geist as heading — A crisp grotesque heading over a modern text serif — product voice up top, long-form comfort below.

Voyage beyond the quiet harbor

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

Heading: Geist, 'Segoe UI', sans-serif
Body: Newsreader, Georgia, serif
Mono: 'Geist Mono', Consolas, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: Geist, 'Segoe UI', sans-serif;
  --font-body: Newsreader, Georgia, serif;
  --font-mono: 'Geist Mono', Consolas, monospace;
}

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

Fraunces & Geist

Brand & campaign

Geist as body — A soft, wonky display serif over Geist's neutral body — warmth in the headline, engineering in the paragraph.

Voyage beyond the quiet harbor

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

Heading: Fraunces, Georgia, serif
Body: Geist, 'Segoe UI', sans-serif
Mono: 'Geist Mono', Consolas, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: Fraunces, Georgia, serif;
  --font-body: Geist, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', Consolas, monospace;
}

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

Using Geist 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 Geist?: In the Nodlume catalog Geist appears in 3 curated pairings, combined with Fraunces and Newsreader. 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 Geist'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 Geist 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 67 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

Geist System

Geist & Newsreader

Fraunces & Geist

Using Geist in Tailwind CSS v4

Try these pairings live

More font pairings