# Typography

Our type system uses two families: a serif accent for headings and a clean sans-serif for everything else. The combination signals editorial confidence, more magazine than SaaS dashboard.

**Source of truth:** `app/web/app/styles/main.css`

## Typefaces

**Loretta** (Accent / Headings)

- Family: `"loretta", "serif"`
- CSS variable: `--font-accent`
- Weight: 400 (regular) for headings
- Source: Adobe Typekit (`use.typekit.net/lbl4dtu.css`)
- Usage: Page titles, section headings, hero text. Loretta is the personality, used sparingly and with intention.

**Inter** (Body / UI)

- Family: Tailwind system default sans-serif stack
- Weights: 400 (regular), 600 (semibold for emphasis, buttons)
- Usage: All body copy, UI elements, navigation, labels, form fields. Inter is the workhorse: clear, neutral, invisible.

**Material Symbols Outlined** (Icons)

- Family: Google Material Symbols Outlined
- Variable axes: `opsz` (20-48), `wght` (100-700), `FILL` (0-1), `GRAD` (-50-200)
- Source: Google Fonts
- Usage: All UI icons. Outlined style, not filled. Weight matches surrounding text weight.

## Hierarchy

**Page titles:** Loretta, semibold (600), large. These set the editorial tone.

**Section headings:** Loretta, semibold (600), medium. Used to divide major content areas.

**Body text:** Inter, regular (400), base size. The default for everything.

**UI text / Buttons:** Inter, semibold (600), `text-xs` (0.75rem). Compact, confident.

**Captions / Secondary:** Inter, regular (400), small. Muted color (`base-500` or `base-600`).

## Spacing philosophy

The spacing system uses a hierarchical ratio: sections get the most breathing room, subsections less, individual elements the least. The general ratio is **8:4:2**. If sections are separated by 8 units of space, subsections get 4, and elements within get 2.

This prevents the two most common spacing failures: everything equidistant (no hierarchy) or random spacing (no system).

## Mobile considerations

- Minimum input text size: 16px, which prevents browser zoom on focus in iOS Safari
- This is enforced in CSS: `input, textarea, select { font-size: 16px; }` within mobile container queries

## Principles

- **Serif for personality, sans-serif for work.** The Loretta headings say "we have taste." The Inter body says "we have things to tell you." Never reverse this: no serif body text, no sans-serif hero headlines.
- **Tight but not cramped.** We use compact spacing for UI density, but every element has breathing room. If text feels squeezed, add space.
- **Consistent weight.** Don't use bold for emphasis in body text. Use bold sparingly, for structural emphasis (labels, section headers). In body copy, prefer _phrasing_ for emphasis.