Skip to main content

​
Font families

Three font families cover every typographic need — editorial headings, functional body text, and technical 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.

​
Fluid type scale

Text scales smoothly between mobile and desktop using CSS clamp() — no breakpoint jumps. This ensures readability at every viewport width.
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.

​
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.

​
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.