Typography
Type families, hierarchy and the responsive scale for editorial and interface design.
Families
- Display:
Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, sans-serif. Headings use 700 weight with-0.02emtracking and balanced text wrapping (text-wrap: balance). - Interface and body:
Nunito Sans, system-ui, -apple-system, sans-serif. Standard reading and interactive controls. - Monospace:
JetBrains Mono, ui-monospace, SFMono-Regular, monospace. Code blocks, hash values, domain DNS records, invoice identifiers. - Fallback: system sans-serif stack.
Usage
Plus Jakarta Sansis the primary display face for hero headlines, major section headings, modal headers, card titles, and page titles.Nunito Sanshandles paragraphs, navigation links, forms, tables, controls, labels and long-form content.- Use sentence case for interface copy. Headings use bold / 700 weights with tight
-0.02emtracking.
Responsive type scale
Standard body text is 18px. This is the default for paragraphs, form descriptions, instructions and ordinary interface copy. Use 21px for introductory or editorial lead text. The 16px size is a compact supporting size, not the default reading size.
| Token | Suggested size | Line height | Typical use |
|---|---|---|---|
| Display XL | clamp(4rem, 8vw, 6rem) | 1.0–1.05 | Landing hero |
| Display L | clamp(3rem, 6vw, 4rem) | 1.05–1.1 | Page statement |
| H1 | clamp(2.5rem, 4vw, 3rem) | 1.1 | Page title |
| H2 | clamp(1.75rem, 3vw, 2rem) | 1.2 | Section title |
| H3 | 1.375rem | 1.25 | Component heading |
| H4 | 1.125rem | 1.3 | Subsection / card heading |
| Intro | 1.3125rem (21px) | 1.381 | Editorial lead |
| Body | 1.125rem (18px) | 1.55 | Standard reading and interface copy |
| Body compact | 1rem (16px) | 1.5 | Supporting / dense UI copy |
| Caption | 0.875rem (14px) | 1.45 | Secondary metadata |
| Micro label | 0.75rem (12px) | 1.4 | Nonessential metadata only |
The 21px intro specification uses regular weight and letter-spacing: 0.011em. Standard body uses regular weight. Avoid 12px for essential instructions, navigation or form labels. Test at 200% zoom and with user text scaling.