Aa
Inter
Body & UI
--font-sans300 · 400 · 500 · 600 · 700Foundations · Typography
Three families. One job each.
Inter handles UI and body. IBM Plex Mono handles headlines, eyebrows, and code. Caveat handles the personal signature. Keep the roles clear and avoid adding extra families.
Families
Aa
IBM Plex Mono
Headlines · Code
--font-mono400 · 500 · 600 · 700Aa
Caveat
Signature
--font-script500 · 600 · 700Scale
Use role-based sizes for headings, body, metadata, and labels.
Display64px / 700Design systems need rhythm.
H144px / 700Build clear interfaces.
H230px / 700Document the pattern.
H322px / 600Name the decision.
Body18px / 400Body copy should explain the tradeoff without slowing the reader down.
Small14px / 400Small text supports controls, captions, and compact notes.
Meta11px / 400
Eyebrow11px / 500SECTION · 02