What fonts go well with Nunito?

In the Nodlume catalog Nunito appears in 4 curated pairings, combined with Fredoka, Mulish, Work Sans and Gill Sans. 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 Nunito'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 Nunito 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

Nunito font pairings

Nunito, begun by Vernon Adams, is a well-balanced sans with rounded terminals — soft where a grotesque would be sharp, which lends interfaces an approachable, almost playful tone without tipping into a display face.

Nunito is unusual in working both roles: as a heading it softens a product's voice, and as a body it stays legible while keeping the warmth. Pair it with itself for a cohesive friendly system, or put it under a rounded display face when the brand leans playful.

In the Nodlume catalog, Nunito leads the heading in 2 of these 4 pairings and the body in 2 — its partners are Fredoka, Mulish, Work Sans and Gill Sans. 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.

Friendly App

Product & interfaces

Nunito as heading — Soft, rounded terminals in the header create a welcoming, almost gamified interface for consumer apps.

Voyage beyond the quiet harbor

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

Heading: Nunito, 'Trebuchet MS', sans-serif
Body: 'Work Sans', 'Segoe UI', sans-serif
Mono: ui-monospace, SFMono-Regular, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: Nunito, 'Trebuchet MS', sans-serif;
  --font-body: 'Work Sans', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}

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

Nunito & Mulish

Product & interfaces

Nunito as heading — Rounded, humanist faces with a soft voice throughout.

Voyage beyond the quiet harbor

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

Heading: Nunito, 'Trebuchet MS', sans-serif
Body: Mulish, Verdana, sans-serif
Mono: 'Fira Code', Consolas, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: Nunito, 'Trebuchet MS', sans-serif;
  --font-body: Mulish, Verdana, sans-serif;
  --font-mono: 'Fira Code', Consolas, monospace;
}

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

Humanist Clean

Product & interfaces

Nunito as body — Friendly strokes with calligraphic roots meet a soft, rounded sans for a welcoming experience.

Voyage beyond the quiet harbor

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

Heading: 'Gill Sans', 'Trebuchet MS', sans-serif
Body: Nunito, 'Trebuchet MS', sans-serif
Mono: ui-monospace, SFMono-Regular, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: 'Gill Sans', 'Trebuchet MS', sans-serif;
  --font-body: Nunito, 'Trebuchet MS', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}

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

Playful Brand

Brand & campaign

Nunito as body — Double rounded fonts for a highly approachable, warm, distinctly non-corporate aesthetic.

Voyage beyond the quiet harbor

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

Heading: Fredoka, 'Trebuchet MS', sans-serif
Body: Nunito, 'Trebuchet MS', sans-serif
Mono: ui-monospace, SFMono-Regular, monospace

Tailwind v4 snippet

@import "tailwindcss";

@theme {
  --font-heading: Fredoka, 'Trebuchet MS', sans-serif;
  --font-body: Nunito, 'Trebuchet MS', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}

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

Using Nunito 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 Nunito?: In the Nodlume catalog Nunito appears in 4 curated pairings, combined with Fredoka, Mulish, Work Sans and Gill Sans. 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 Nunito'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 Nunito 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

Friendly App

Nunito & Mulish

Humanist Clean

Playful Brand

Using Nunito in Tailwind CSS v4

Try these pairings live

More font pairings