Typography
Three purposeful typefaces, set via CSS custom properties and mapped into Tailwind. Everything else — size, weight, leading — is standard Tailwind utility classes.
Typefaces
Display — Syne 600
font-display · var(--font-display) · Headings only
The quick brown fox
Body — Instrument Sans 400 / 500 / 600
font-body · var(--font-body) · All UI copy
The quick brown fox jumps over the lazy dog
Code — JetBrains Mono 400 / 500
font-code · var(--font-code) · Code blocks and token names
const greeting = "Hello, world!";
Scale
Standard Tailwind text sizes — no custom scale needed.
| Class | Size | Preview | Usage |
|---|---|---|---|
| text-xs | 12px | Aa | Captions, labels, table cells |
| text-sm | 14px | Aa | Body text, descriptions, UI copy |
| text-base | 16px | Aa | Large body, input values |
| text-lg | 18px | Aa | Brand / wordmark, section intros |
| text-xl | 20px | Aa | Sub-headings, large callouts |
| text-2xl | 24px | Aa | Section headers (h2) |
| text-3xl | 30px | Aa | Dashboard / sidebar h1 |
| text-4xl | 36px | Aa | Page titles (h1) |
| text-5xl | 48px | Aa | Marketing hero (mobile) |
| text-6xl | 60px | Aa | Marketing hero (md+) |
Weight
| Class | Value | Preview | Usage |
|---|---|---|---|
| font-normal | 400 | The quick brown fox | Body copy |
| font-medium | 500 | The quick brown fox | Slightly emphasised UI text |
| font-semibold | 600 | The quick brown fox | Display headings (Syne), labels, buttons, table headers |
| font-bold | 700 | The quick brown fox | Strong emphasis |
| font-extrabold | 800 | The quick brown fox | Brand / wordmark only (Syne) |