Font families
Three font families cover every typographic need — editorial headings, functional body text, and technical code.
| Role | Font family | Weights | Usage |
|---|
| Headings | Noto Serif | 400, 600, 700 | Page titles, section headers, display text, strain names |
| Body | Noto Sans | 300, 400, 500, 600, 700 | Paragraphs, labels, UI text, navigation |
| Code | JetBrains Mono | 400, 500, 700 | Code blocks, technical values, inline code |
Fonts are self-hosted via Astro’s experimental fonts API — no Google Fonts CDN dependency. This improves privacy and performance by eliminating third-party network requests.
Type hierarchy
Each level in the hierarchy has a defined size, weight, letter spacing, and line height. These values create a consistent visual rhythm from hero text down to fine print.
| Level | Size | Weight | Letter spacing | Line height | Usage |
|---|
| Display / Hero | clamp(3rem, 2rem + 6vw, 5.5rem) | 800 | -0.04em | 1.0 | Homepage hero, major headings |
| H1 | clamp(2.25rem, 1.75rem + 3vw, 3.5rem) | 700 | -0.02em | 1.15 | Page titles |
| H2 | 1.375rem (22px) | 600 | -0.01em | 1.3 | Section headings |
| H3 | 1.1875rem (19px) | 600 | -0.01em | 1.3 | Subsection headings |
| Body | 0.9375rem (15px) | 400 | -0.01em | 1.55 | Paragraph text |
| Small | 0.8125rem (13px) | 400 | normal | 1.55 | Captions, labels |
| XS | 0.75rem (12px) | 400 | 0.02em | 1.55 | Fine print, badges |
Fluid type scale
Text scales smoothly between mobile and desktop using CSS clamp() — no breakpoint jumps. This ensures readability at every viewport width.
| Token | Min | Preferred | Max |
|---|
| fluid-sm | 0.8125rem (13px) | 0.75rem + 0.3vw | 0.9375rem (15px) |
| fluid-base | 0.9375rem (15px) | 0.85rem + 0.4vw | 1.0625rem (17px) |
| fluid-lg | 1.0625rem (17px) | 0.95rem + 0.45vw | 1.1875rem (19px) |
| fluid-xl | 1.1875rem (19px) | 1.05rem + 0.6vw | 1.375rem (22px) |
| fluid-2xl | 1.375rem (22px) | 1.2rem + 0.9vw | 1.625rem (26px) |
| fluid-3xl | 1.625rem (26px) | 1.3rem + 1.2vw | 1.875rem (30px) |
| fluid-display-sm | 1.875rem (30px) | 1.5rem + 2vw | 2.5rem (40px) |
| fluid-display | 2.25rem (36px) | 1.75rem + 3vw | 3.5rem (56px) |
| fluid-display-lg | 2.5rem (40px) | 2rem + 4vw | 4.5rem (72px) |
| fluid-hero | 3rem (48px) | 2rem + 6vw | 5.5rem (88px) |
The fluid scale uses a dramatic progression for display sizes. A heading that reads 36px on mobile expands to 56px on desktop without any media query intervention.
Letter spacing
Tighter tracking for large display text, wider tracking for small labels and all-caps elements. This follows the typographic principle that large text needs negative tracking while small text benefits from positive tracking.
| Token | Value | Usage |
|---|
| tighter | -0.04em | Display/hero text |
| tight | -0.02em | H1 headings |
| normal | -0.01em | Body text, H2, H3 |
| wide | 0.02em | Small caps, labels, XS text |
| wider | 0.05em | Buttons, UI elements |
| widest | 0.1em | Decorative all-caps |
Line height
Line height values control vertical rhythm. Tighter values for headings keep multi-line titles compact. Looser values for body text improve long-form readability.
| Token | Value | Usage |
|---|
| none | 1 | Display text, single-line elements |
| tight | 1.15 | Headings |
| snug | 1.3 | Subheadings, cards |
| normal | 1.55 | Body text (default) |
| relaxed | 1.7 | Long-form content |
| loose | 1.85 | Wide-set text, accessibility |
Pairing rules
The serif-sans pairing gives the brand its distinctive editorial authority — a knowledge platform that reads like a magazine, not a database. Follow these rules to maintain that identity:
- Noto Serif for emotional, editorial content: headings, hero text, strain names, pull quotes
- Noto Sans for functional, informational content: body text, UI elements, labels, navigation
- Never mix serif and sans-serif within a single heading
- JetBrains Mono exclusively for code and technical contexts (terpene percentages in code blocks, API responses, developer documentation)
- Use weight contrast (bold heading + regular body) rather than size contrast alone to establish hierarchy
For developers
Source of truth: apps/website/src/config/design-system/typography.ts. CSS custom properties are prefixed with --ds-typography-*. Mobile typography is defined separately in apps/mobile/src/_config/design-system/typography.ts with platform-appropriate values for React Native.
