What fonts go well with Manrope?

In the Nodlume catalog Manrope appears in 3 curated pairings, combined with Anton, Barlow Condensed and Fira Code. 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 Manrope'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 Manrope 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

Manrope font pairings

Manrope, by Mikhail Sharanda, is an open-source semi-condensed sans that splits the difference between geometric and grotesque — modern and slightly technical, with distinctive details like the lowercase g that keep it from feeling generic.

Manrope works both roles in a system: semibold Manrope headings over a neutral body read crisp and product-like, while Manrope body text under a serif heading gives an editorial site a contemporary backbone.

In the Nodlume catalog, Manrope leads the heading in 1 of these 3 pairings and the body in 2 — its partners are Anton, Barlow Condensed and Fira Code. 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.

Launch Campaign

Brand & campaign

Manrope as body — Tightly packed, cinematic headers with a highly readable modern sans — great for dramatic splash pages.

Voyage beyond the quiet harbor

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

Heading: 'Barlow Condensed', 'Arial Narrow', sans-serif
Body: Manrope, 'Segoe UI', sans-serif
Mono: ui-monospace, SFMono-Regular, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: Manrope, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}

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

Agency Bold

Brand & campaign

Manrope as body — Loud, blocky, unapologetic headers that command attention while Manrope handles sub-copy gracefully.

Voyage beyond the quiet harbor

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

Heading: Anton, Impact, sans-serif
Body: Manrope, 'Segoe UI', sans-serif
Mono: ui-monospace, SFMono-Regular, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: Anton, Impact, sans-serif;
  --font-body: Manrope, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}

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

Command Palette

Technical & docs

Manrope as heading — A stark, utilitarian pairing focused purely on interface efficiency and code readability.

Voyage beyond the quiet harbor

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

Heading: Manrope, 'Segoe UI', sans-serif
Body: 'Fira Code', Consolas, monospace
Mono: 'Fira Code', Consolas, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: Manrope, 'Segoe UI', sans-serif;
  --font-body: 'Fira Code', Consolas, monospace;
  --font-mono: 'Fira Code', Consolas, monospace;
}

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

Using Manrope 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 Manrope?: In the Nodlume catalog Manrope appears in 3 curated pairings, combined with Anton, Barlow Condensed and Fira Code. 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 Manrope'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 Manrope 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

Launch Campaign

Agency Bold

Command Palette

Using Manrope in Tailwind CSS v4

Try these pairings live

More font pairings