# TYPOGRAPHY_GUIDE.md

## 1. Type roles (three voices, strict casting)

| Role | Direction | Character | Used for |
|---|---|---|---|
| **Display / headings** | Modern grotesque with slight technical edge — *Space Grotesk-class* (alternatives in that register: General Sans, Hanken Grotesk) | Confident, engineered, not cold | H1–H3, nav, buttons, stat numbers |
| **Body** | Highly-legible humanist/neo-grotesque — *Inter-class* (alternatives: Source Sans 3, Figtree) | Invisible, effortless at 16–18px | Paragraphs, lists, form fields |
| **Mono (identity voice)** | *JetBrains Mono-class* (alternatives: IBM Plex Mono, Commit Mono) | The "console seasoning" | Section labels, chips, captions, metadata, diagram labels, footer |

Exact typeface licensing/loading = Phase 2. Design intent: **two families max loaded + mono**, variable weights preferred, `ø æ å` coverage mandatory in all three (Norwegian body text is first-class, not fallback).

## 2. Scale (1.25 major-third, 16px base)

| Token | Size / line-height | Weight | Tracking | Use |
|---|---|---|---|---|
| `display` | 61/1.05 (desktop) · 40/1.1 (mobile) | 600 | −0.02em | Hero name only |
| `h1` | 49/1.1 · 34/1.15 | 600 | −0.015em | Page titles |
| `h2` | 39/1.15 · 28/1.2 | 600 | −0.01em | Section titles |
| `h3` | 31/1.2 · 24/1.25 | 550 | 0 | Card titles, case-study subsections |
| `h4` | 20/1.35 | 550 | 0 | Minor headings |
| `body-lg` | 18/1.6 | 400 | 0 | Hero summary, TL;DR, lead paragraphs |
| `body` | 16/1.65 | 400 | 0 | Default prose |
| `small` | 14/1.5 | 400 | 0 | Secondary info, form hints |
| `mono-label` | 12/1.4 | 500 | +0.08em, UPPERCASE | Section labels (`01 — PROSJEKTER`), chips |
| `mono-meta` | 13/1.5 | 400 | 0 | Captions, dates, file sizes |

**Rule: uppercase + letter-spacing lives only in `mono-label`.** (The old site letter-spaced everything; the CV letter-spaces headings into A T S soup. Reserve the effect and it becomes identity instead of noise.)

## 3. Rhythm & measure

- Prose measure 60–72ch; hero summary ≤ 55ch.
- Space *before* a heading ≈ 2× space after (sections cohere downward).
- Baseline rhythm on the 8pt grid — line-heights above are chosen to land on it at 16px base.
- Norwegian headline audit: NO strings run ~10–15% longer and compounds don't hyphenate freely (`systemadministrasjon`); every headline layout must be tested with the NO string at the mobile breakpoint. Wrapping rule: allow hyphenation in body NO text, never in headings — reword instead.

## 4. Typographic details (the seniority tells)

- Real dashes (– —), curly quotes per language convention (EN “ ” · NO « »), non-breaking spaces before units and inside `8+ yrs`.
- Numbers in stats use tabular lining figures (mono or `tnum`).
- Links in prose: accent-coloured underline (2px offset), full colour+underline — never colour-only (a11y).
- Code/tech names inline (C#, .NET) stay in body face — mono inline is reserved for actual paths/commands in case studies.
- Focus states use a 2px accent outline + 2px offset, same in both themes.