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
micro0.6875rem · 11px
The quick brown foxmini0.75rem · 12px
The quick brown foxsmall0.875rem · 14px
The quick brown foxregular· body default1rem · 16px
The quick brown foxlarge1.125rem · 18px
The quick brown foxtitle31.25rem · 20px
The quick brown foxtitle21.5rem · 24px
The quick brown foxtitle12.25rem · 36px
The quick brown foxEach 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