Brand · Typography
Fonts
Two faces. Cormorant Garamond for editorial weight. Inter for everything you read or click. Both open-source, both self-hosted in production.
Display · Editorial
--font-cormorant
Cormorant
Garamond.
A serif by Christian Thalmann inspired by Claude Garamond's 16th-century cuts. We use it everywhere a sentence carries weight: page titles, product names, section headers, and the occasional pull quote.
Glyph set
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9 . , : ; " ' & ? !
Use it for
- Page titles and h1, h2, h3
- Product names on detail pages
- Email subject lines and hero text
- Pull quotes in blog posts
- Hero copy on landing pages
Don't use it for
- Body paragraphs (use Inter)
- Buttons or form labels
- Navigation
- Any size below 18px (loses optical balance)
- Tables of numbers (Inter is denser)
Source: Google Fonts · Cormorant Garamond · License: SIL Open Font License 1.1 (free for commercial use)
Body · UI
--font-inter
Inter.
A neutral grotesque by Rasmus Andersson, designed for screens. Tall x-height, open counters, sturdy at small sizes. Carries everything the eye actually scans: paragraphs, buttons, labels, numbers, tables.
Glyph set
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9 . , : ; " ' & ? !
Use it for
- All body copy and paragraphs
- Buttons, form fields, navigation
- Section labels (600 / uppercase / 0.2em tracking)
- Tables, prices, SKUs, order numbers
- Email body
Don't use it for
- Hero headlines (Cormorant carries the brand voice)
- Display text above 36px (Cormorant feels right at scale)
- Decorative pull quotes
- Anything where you want a touch of formality
Source: Google Fonts · Inter · License: SIL Open Font License 1.1 (free for commercial use)
Type scale
The eight sizes that cover every surface of the site, top to bottom. Stick to the scale; don't invent new sizes mid-component.
| Token | Sample | Spec |
|---|---|---|
| h1 | The peptide arrived. | 60px · 300 · lh 1.05 |
| h2 | The peptide arrived. | 36px · 600 · lh 1.15 |
| h3 | The peptide arrived. | 24px · 600 · lh 1.2 |
| lead | The peptide arrived. | 18px · 400 · lh 1.55 |
| body | The peptide arrived. | 16px · 400 · lh 1.6 |
| ui | The peptide arrived. | 14px · 500 · lh 1.4 |
| caption | The peptide arrived. | 12px · 400 · lh 1.4 |
| label | Section label | 11px · 600 · lh 1.4 |
Pairings in context
Page header
Weight Loss
Retatrutide
Triple-receptor agonist targeting GLP-1, GIP, and glucagon simultaneously. Phase 2 trials reported up to 24% body weight reduction.
Card header
VR-MOPZFB57
Order received
Paid May 3, 2026 · ships within 14 days
Email subject + preview
Payment confirmed
Your order has been paid and is being prepared for shipment.
Data row
Implementation
Both fonts are loaded via next/font/google and self-hosted at build time. No external requests, no FOIT, no FOUT.
CSS variables are exposed at the document root:
/* Cormorant Garamond */ font-family: var(--font-cormorant), Georgia, serif; /* Inter */ font-family: var(--font-inter), system-ui, sans-serif; /* Tailwind utility */ className="font-[family-name:var(--font-cormorant)]"
In email templates we fall back to Georgia, serif for display and Inter, system-ui, sans-seriffor body, since most email clients won't download web fonts.