cesnimda
44 lines
3.0 KiB
Markdown
44 lines
3.0 KiB
Markdown
# 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.
|