cesnimda
3.0 KiB
3.0 KiB
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.