Typography
Type scale
Atomic tokens — a family, a size, and a weight. Composite styles like
title-display pair Inter Display with a size step.Fonts
Inter Variable
Primary UI / Display
↳ SF Pro Display, system stack
Grumpy wizards make toxic brew
Geist Mono
Monospace / Code
↳ SF Mono, Consolas, Menlo
const brew = toxic(wizards);
Apple Color Emoji
Emoji
↳ Segoe UI Emoji, Noto Color Emoji
🧪 ⚗️ 🔬 ✨ 🪄 📐 🎨 🧮
Size scale
| Token | Rem | Px | Line height | Sample |
|---|---|---|---|---|
| micro | 0.6875rem | 11px | 1.35 | The quick brown fox |
| mini | 0.75rem | 12px | 1.35 | The quick brown fox |
| smaller | 0.8125rem | 13px | 1.4 | The quick brown fox |
| small | 0.875rem | 14px | 1.4 | The quick brown fox |
| regular· body default | 1rem | 16px | 1.45 | The quick brown fox |
| large | 1.125rem | 18px | 1.4 | The quick brown fox |
| title3 | 1.25rem | 20px | 1.3 | The quick brown fox |
| title2 | 1.5rem | 24px | 1.25 | The quick brown fox |
| title1 | 2.25rem | 36px | 1.1 | The quick brown fox |
Each body size also has a Plus token variant.
Weight scale
light300
The quick brown foxnormal· body default450
The quick brown foxmedium500
The quick brown foxsemibold600
The quick brown foxbold700
The quick brown foxComposite styles
title-displayInter Display · 20px / 500
The quick brown fox
Default page title — Inter Display at the title3 size.
title-display-boldInter Display · 24px / 700
The quick brown fox
Emphasized heading — Inter Display at the title2 size.
Notes
Editor body: 15px · line-height 1.6 · letter-spacing −0.0067em
Common applied combos
11px / 450micro labels14px / 500nav & counts14px / 550emphasized headers