# Typography

## Marketing site (public)

**Family:** Criazo Display (self-hosted). Loaded via `public/css/criazo-display.css` + `public/css/criazo-typography.css`. Tailwind `font-sans` in `layouts/app.blade.php` matches the same stack.

**Source of truth:** `public/css/criazo-typography.css` (CSS variables + component classes). Do not add parallel scales in Blade.

### Scale (rem)

| Token | Size | Use |
| --- | --- | --- |
| `--text-caption` | 12px | Eyebrows, micro labels (`type-eyebrow-label`, `type-label`) |
| `--text-body-sm` | 14px | Card body, metadata, nav |
| `--text-body` | 16px | Body, buttons, footer links |
| `--text-body-lg` | 18px | Section subcopy |
| `--text-heading-sm` | 20px | Card group titles |
| `--text-heading` | 22px | Default H2 |
| `--text-display` | 28px | Stats (`type-stat`) |

### Required component classes

| Pattern | Classes |
| --- | --- |
| Page hero H1 (home, industry, sector, services) | `page-hero__headline` or `home-hero__headline` |
| Hero eyebrow | `home-hero__eyebrow` / `page-hero__eyebrow` / `type-eyebrow-label` |
| Hero supporting copy | `page-hero__subcopy` / `hero-subcopy` |
| Section band | `section-intro__eyebrow`, `section-intro__title`, `section-intro__desc` — eyebrow/primary label `margin-bottom: 0.45rem`; desc `margin-top: 0.45rem` |
| Listing cards | `industry-card__*`, `portfolio-card__*` |
| Footer | `site-footer`, `footer-*` |
| Buttons | `type-btn` + existing padding/radius utilities |
| Cards | `type-card-title`, `type-card-body` |

### Weights

- Body: 400 (`font-book` / default)
- Labels & UI emphasis: 500–600 (`font-medium`, `font-semibold`)
- Max weight **600** (`font-semibold`). Never use 700; `font-bold` maps to 600 in Tailwind config.

### Letter-spacing

- Display/headings: `tracking-display` / `tracking-heading` (negative)
- Body: `tracking-body`
- Eyebrows/badges: `tracking-label` (+0.04em) only

Do not use `tracking-wide`, `tracking-tight`, or arbitrary `tracking-[…]` on body copy.

### Industry / sector heroes

Layout and composition may differ from the homepage. **Typography must not:** same H1 scale as homepage hero (`page-hero__headline`), same subcopy scale (`page-hero__subcopy`), same button text (`type-btn` / 16px semibold).

### Dashboard

Admin UI may keep **Inter** per `resources/design-system/tokens.php` until migrated.