> ## Documentation Index
> Fetch the complete documentation index at: https://docs.highailabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Font families, hierarchy, fluid scaling, letter spacing, and pairing guidelines.

## 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               |

<Note>
  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.
</Note>

## 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)    |

<Info>
  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.
</Info>

## 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

<Tip>
  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
</Tip>

## For developers

<Note>
  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.
</Note>