Hanken Grotesk + Source Serif 4

moderneditorialminimal

Grumpy wizards make toxic brew

A standfirst set in Source Serif 4, 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 — Hanken Grotesk over Source Serif 4, in the wild.

Hanken Grotesk 700 / Source Serif 4 400 — click any section and type your own copy.

Why it works

Hanken Grotesk sits between Helvetica's neutrality and humanist warmth, which makes its bold weights read as confident but not corporate in headlines. Source Serif 4 was engineered by Adobe for screen body text, with optical sizes and a large x-height that keep long passages comfortable. Together they give product blogs and documentation the increasingly common grotesque-over-serif look with two of the best-hinted free families available.

More about each face: Hanken Grotesk · Source Serif 4

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=Hanken+Grotesk:wght@700&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
Next.js — next/font
import { Hanken_Grotesk, Source_Serif_4 } from "next/font/google";

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

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

Related pairings