# Front-page typography

The Undergrove front page uses three families with distinct roles. Fraunces brings an organic, editorial character to the headline. Instrument Sans keeps the invitation easy to read. Martian Mono gives short annotations a precise rhythm.

This system applies to the front page only. Inter remains in the product interface, documents, brand book, and existing channel assets. Use the supplied vector root emblem and outlined wordmark in every setting.

| Role | Family | Front-page usage |
|---|---|---|
| Main headline | Fraunces Variable | “Intelligence” in upright 380; “runs deeper.” in italic 360. Optical sizing is automatic, with `SOFT` 25 and `WONK` 1. |
| Reading and controls | Instrument Sans Variable | Description, navigation, button, preview note, and supporting links. Primarily 400, with 450 on the main action. |
| Short annotations | Martian Mono Variable | Eyebrow, scene status, navigation numbers, and motion label. Use 350 with restrained spacing. |
| Identity | Supplied SVG lettering | Keep the wordmark as vector artwork. Do not substitute a typed font. |

## Included files

All four files are the exact Latin web fonts used by the front page, copied without modification from the installed Fontsource Variable 5.3.0 packages.

| File in `editorial/` | Supported variation | License |
|---|---|---|
| `fraunces-latin-full-normal.woff2` | Upright; weight 100–900, optical size 9–144, softness 0–100, wonk 0–1 | `Fraunces-OFL.txt` |
| `fraunces-latin-full-italic.woff2` | True italic; the same four axes | `Fraunces-OFL.txt` |
| `instrument-sans-latin-wght-normal.woff2` | Upright; weight 400–700 | `Instrument-Sans-OFL.txt` |
| `martian-mono-latin-wght-normal.woff2` | Upright; weight 100–800 | `Martian-Mono-OFL.txt` |

Keep the original license files with redistributed fonts. These are Latin subsets, not complete multilingual releases. Confirm character coverage before adapting the page to another language.

## Usage

Declare Fraunces upright and italic as separate `@font-face` rules under the same family name, with `font-weight: 100 900`. Use `font-style: normal` and `font-style: italic` respectively so the second line uses the real italic file. Declare Instrument Sans at `400 700` and Martian Mono at `100 800`. Use `font-display: swap` for all four files.

```css
.homepage-heading {
  font-family: "Fraunces Variable", Georgia, serif;
  font-weight: 380;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 25, "WONK" 1;
}

.homepage-heading em {
  font-style: italic;
  font-weight: 360;
}

.homepage-body {
  font-family: "Instrument Sans Variable", Arial, sans-serif;
}

.homepage-annotation {
  font-family: "Martian Mono Variable", monospace;
  font-weight: 350;
}
```

Use the serif for the main statement, not long paragraphs or controls. Keep monospaced copy brief. Preserve readable type sizes, visible focus states, and enough contrast against every part of the moving landscape. Check narrow screens and enlarged text before publishing. The responsive front-page stylesheet is the implementation reference for sizing and spacing.