Noto Serif + Noto Sans

classicminimaleditorial

Grumpy wizards make toxic brew

A standfirst set in Noto 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 — Noto Serif over Noto Sans, in the wild.

Noto Serif 700 / Noto Sans 400 — click any section and type your own copy.

Why it works

The Noto siblings were designed as a matched pair across Google's entire Unicode project, so their weights, x-heights and vertical metrics are deliberately harmonised. Noto Serif's transitional headlines add editorial gravity while Noto Sans keeps body text plain and highly readable. The pairing's real superpower is script coverage: if your site serves content in many languages, no other serif-and-sans duo degrades this gracefully.

More about each face: Noto Serif · Noto 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=Noto+Serif:wght@700&family=Noto+Sans:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

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

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

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

Related pairings