Brand · Typography
Fonts
Two faces. Playfair Display for editorial weight. Inter for everything you read or click. Both open-source, both self-hosted in production, both shipped as variable fonts.
Display · Editorial
--font-playfair
Playfair
Display.
A transitional serif by Claus Eggers Sørensen, drawn in the spirit of the 18th-century types that followed Caslon. Its high stroke contrast gives headlines authority at scale. We use it everywhere a sentence carries weight: page titles, product names, section headers, testimonials and pull quotes.
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 · Playfair Display · 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 (Playfair carries the brand voice)
- Display text above 36px (Playfair 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 · 400 · lh 1.0 |
| h2 | The peptide arrived. | 36px · 400 · lh 1.15 |
| h3 | The peptide arrived. | 24px · 500 · 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. | 13px · 600 · 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
Metabolic
GLP-3(RT)
Triple-receptor agonist targeting GLP-1, GIP, and glucagon simultaneously. Phase 2 clinical program ongoing.
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:
/* Playfair Display */ font-family: var(--font-playfair), Georgia, serif; /* Inter */ font-family: var(--font-inter), system-ui, sans-serif; /* Tailwind utility */ className="font-serif"
In email templates we fall back to Georgia, serif for display and Inter, system-ui, sans-serif for body, since most email clients won't download web fonts.