# 06 · Typography

Two typefaces. One voice.

## Display · Neue Haas Grotesk Display Pro

Used for: H1, H2, H3, large display numbers, anything in the headline scale.

| Weight | Value | Sample size | Use |
|---|---|---|---|
| Thin | 100 | — | Decorative, large sizes only |
| ExtraThin | 200 | — | Decorative |
| Light | 300 | 11–13 px | Subtle metadata, secondary labels |
| Roman | 400 | 14–17 px | Captions, supporting copy |
| Medium | 500 | 16–24 px | Headlines, body labels, refined display |
| Bold | 700 | 26–52 px | H2, emphasis, strong display |
| Black | 900 | 64–88 px | H1 hero, brand-signature moments |

The TTF files are in `assets/fonts/`. Sixteen weights total (regular + italic for each).

### @font-face block

Copy this into your global CSS:

```css
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
```

Add additional weights (Thin 100, XThin 200, Italic variants) as needed.

## Body · Manrope

Used for: body copy, supporting text, captions, labels, UI text.

| Weight | Value | Use |
|---|---|---|
| Regular | 400 | Body copy |
| Medium | 500 | Emphasis within body |
| Semibold | 600 | Strong inline, button labels |
| Bold | 700 | Important inline highlights |

Load via Google Fonts (no licensing concerns):

```html
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
```

Or as CSS import:

```css
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
```

## Hierarchy

| Role | Font | Weight | Size | Letter-spacing | Line-height |
|---|---|---|---|---|---|
| H1 hero | Neue Haas Display | Medium 500 | 64–88 px | -0.02em (-2.8 to -3 px) | 0.92 |
| H2 section | Neue Haas Display | Medium 500 | 32–52 px | -0.015em | 1.0 |
| H3 card | Neue Haas Display | Medium 500 | 22–28 px | -0.5 px | 1.1 |
| Stats / numbers | Neue Haas Display | Black 900 | 32–80 px | -0.02em | 0.95 |
| Body lead | Manrope | Regular 400 | 17–20 px | 0 | 1.55 |
| Body | Manrope | Regular 400 | 14–17 px | 0 | 1.55 |
| Caption | Manrope | Medium 500 | 11–13 px | 0.5 px | 1.45 |
| Eyebrow / Label | Neue Haas Display | Bold 700 | 10–12 px | 2–3 px (uppercase) | 1.3 |
| Code / Mono | system-mono | Regular 400 | 11–13 px | 0 | 1.5 |

## Title weight + gradient discipline

- Titles use Neue Haas Display **Medium (500)**, not Black or Bold. The brand voice is calm and precise, the type should not shout.
- Black 900 stays reserved for statistics, large numbers, and demonstration samples (the typography page itself).
- Gradient text is reserved for **key payoffs only**: "Built to hire with you." and "We match. You hire."
- Section subtitles use solid white or a single module color, **never gradient**.
- Use gradient **maximum once per page**.
- Eyebrows in small caps follow their own rule (Bold 700, uppercase, tracked).

## Pairing rules

- **Display** sets the tone — confident, precise, slightly tight
- **Body** carries the work — readable, friendly, comfortable
- Never mix them in the same line (no Manrope inline within a Neue Haas headline, and vice versa)
- All-caps usage: only for small labels (10–12 px) with increased letter-spacing (≥ 2 px)

## CSS variables

```css
:root {
  --font-display: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}
```

## Type voice

Precise, sober, engineer-meets-writer. Set tight in display sizes (negative letter-spacing). Comfortable in body. Avoid all-caps unless intentional in small labels.