03 · Typography

Three voices, tuned for their role.

Bricolage Grotesque carries weight — that's the mark-making voice. DM Sans is the rest of the conversation — readable, quiet, dependable. JetBrains Mono is how we show our work. And one serif italic (Fraunces) is the brand signature.

3.1 The three voices

Each family has a job. Never swap them — if a display element is set in DM Sans, it reads as a lapse, not a style.

All four fonts live on Google Fonts. Download the full set for local install — Bricolage Grotesque, DM Sans, JetBrains Mono, and Fraunces.
Download all 4
Aa
Display

Bricolage Grotesque

Variable 200–800 · opsz 12–96 · requires font-optical-sizing: auto. Used for headlines, pull-quotes, big numbers.
Download
Aa
Body

DM Sans

Variable 100–1000 · opsz 9–40. Used for body copy, UI, paragraphs — anywhere a reader needs to get through the words.
Download
Aa
Technical

JetBrains Mono

400 / 500 / 600. Used for code, tokens, hex values, anything that wants to look like it means business.
Download

3.2 Type scale

The scale we actually use on this page. Keep the optical-size instruction set when you copy display weights.

Display / XL96 · 500 · -0.035em
Every lead. Every time.
Display / L56 · 600 · -0.02em
Pink is the hero.
Display / M32 · 600 · -0.02em
The logo is a system.
Serif / signatureFraunces · 34 · italic
tuned for their role.
Body / LDM Sans · 20 · 400
Four cubes, four colours, four roles in the funnel — engage, qualify, nurture, convert.
Body / MDM Sans · 16 · 400
The default body size for paragraphs, UI text, and anything a reader needs to get through quickly.
Mono / SJetBrains · 13 · 500
font-variation-settings: "opsz" 96;

3.3 The italic signature

One serif italic — Fraunces with SOFT 80 axis set — appears once in every hero. It's how the brand “signs its name” in pink on the page.

The logo is a system, not a stamp. Fraunces italic · opsz 144 · soft 80 · --accent
Download Fraunces

3.4 Drop-in font stack

The exact preconnect & CSS you need to reproduce MagicBlocks type on any page.

<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:opsz,wght@12..96,200..800&family=DM+Sans:opsz,wght@9..40,100..1000&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..700,0..100;1,9..144,400..700,0..100&display=swap" rel="stylesheet">

/* CSS */
:root {
  --display: "Bricolage Grotesque", sans-serif;
  --body:    "DM Sans", -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --serif:   "Fraunces", Georgia, serif;
}
h1, h2, h3 { font-family: var(--display); font-optical-sizing: auto; letter-spacing: -0.02em; }
body       { font-family: var(--body); }
code       { font-family: var(--mono); }
em.sig     { font-family: var(--serif); font-style: italic;
             font-variation-settings: "SOFT" 80; color: var(--accent); }

3.5 Anatomy & notes

Small things that keep the type feeling on-brand.

  • Always set font-optical-sizing: auto on display type — without it, Bricolage loses the “carved” feel at large sizes.
  • Letter-spacing of -0.02em is the default for display; push to -0.035em for display-XL only.
  • Body copy never goes below 14px, except for metadata captions which can drop to 12–13 px mono.
  • The Fraunces italic is used once per hero. Not for body, not for subheads. One italic, one moment.
  • Numbers in display should use font-variant-numeric: tabular-nums when columns need to align.