Montserrat + Nunito Sans

friendlymodernminimal

Grumpy wizards make toxic brew

A standfirst set in Nunito Sans, one size up — where a pairing starts earning trust.

The five boxing wizards jump quickly over the lazy dog, mixing jugs of quiet vodka while the jury watches. Click anywhere in this preview and type your own text to try the pairing.

“Type is a beautiful group of letters, not a group of beautiful letters.”

— Matthew Carter

Fig. 1 — Montserrat over Nunito Sans, in the wild.

Montserrat 700 / Nunito Sans 400 — click any section and type your own copy.

Why it works

Two well-tempered sans-serifs at slightly different temperatures: Montserrat's geometric headlines read designed and confident, while Nunito Sans — rounder and softer without being childish — makes paragraphs feel approachable. The contrast is subtle, so lean on weight and size to keep hierarchy crisp: Montserrat at 700 against Nunito Sans at 400 is enough. A good fit for consumer SaaS and ecommerce brands aiming for polished but warm.

More about each face: Montserrat · Nunito Sans

Use this pairing

HTML — Google Fonts embed
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Montserrat', 'Trebuchet MS', Helvetica, sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
  font-weight: 400;
}
Next.js — next/font
import { Montserrat, Nunito_Sans } from "next/font/google";

const heading = Montserrat({
  subsets: ["latin"],
  weight: "700",
  variable: "--font-heading",
});

const body = Nunito_Sans({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});
From usKeychord— keyboard shortcuts for every app

Related pairings