Bricolage Grotesque + Inter

boldmoderneditorial

Grumpy wizards make toxic brew

A standfirst set in Inter, 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 — Bricolage Grotesque over Inter, in the wild.

Bricolage Grotesque 700 / Inter 400 — click any section and type your own copy.

Why it works

Bricolage Grotesque headlines lead with deliberate imperfection — uneven widths, odd terminals, the charm of a nineteenth-century grotesque — while Inter supplies the most neutral reading experience on the web. The gap in temperament is the point: all the personality concentrates in the display sizes where Bricolage's quirks are legible, and Inter keeps paragraphs invisible. Both are built for screens, so rendering stays crisp at every size.

More about each face: Bricolage Grotesque · Inter

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

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
}
Next.js — next/font
import { Bricolage_Grotesque, Inter } from "next/font/google";

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

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

Related pairings