HOOFDSTUK 03 · TYPOGRAFIE
Typografie¶
Drie open lettertypen, alle drie SIL OFL 1.1. Inter Tight voor koppen, Inter voor alle lopende tekst en knoppen, JetBrains Mono voor de kleine labels in hoofdletters (eyebrows, chips, de URL-balk van het browserframe). Zo staat het live; Inter en Inter Tight zijn ook in de Odoo-website-instellingen gekozen.
Lettertypen¶
Inter Tight · Koppen, displaytekst, prijzen · gewichten 100–900
Reach higher.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 € & ? !
Inter · Bodytekst, knoppen, navigatie · gewichten 100–900
Reach higher.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 € & ? !
JetBrains Mono · Eyebrows, labels, chips, URL-balk · gewichten 100–800
ATLAS AGENCY · TILBURG
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 € & ? !
Schaal¶
De schaal is vloeiend: koppen groeien mee met de schermbreedte tussen een minimum en een maximum (CSS clamp). Hieronder op de maximale maat.
Display (hero)
Inter Tight 700 · 80 px / 1,02 · -0.04emMerk en website voor Brabantse ondernemers.
Inter Tight 700 · 80 px / 1,02 · -0.04emMerk en website voor Brabantse ondernemers.
H2 (sectiekop)
Inter Tight 700 · 48 px / 1,08 · -0.035emVaste prijzen. Je weet waar je aan toe bent.
Inter Tight 700 · 48 px / 1,08 · -0.035emVaste prijzen. Je weet waar je aan toe bent.
H3 (kaartkop)
Inter Tight 650 · 20 px / 1,25 · -0.015emEen deadline is een afspraak
Inter Tight 650 · 20 px / 1,25 · -0.015emEen deadline is een afspraak
Lead
Inter 400 · 18,4 px / 1,6 · 0Je weet vooraf wat het kost en wanneer het klaar is.
Inter 400 · 18,4 px / 1,6 · 0Je weet vooraf wat het kost en wanneer het klaar is.
Body
Inter 400 · 16 px / 1,5 · 0Je praat met de persoon die het maakt. Geen tussenpersonen.
Inter 400 · 16 px / 1,5 · 0Je praat met de persoon die het maakt. Geen tussenpersonen.
Eyebrow
JetBrains Mono 500 · 12 px / 1,4 · 0.1emAtlas Agency · Tilburg
JetBrains Mono 500 · 12 px / 1,4 · 0.1emAtlas Agency · Tilburg
| Stijl | Lettertype | Gewicht | Maat (CSS) | Regelhoogte | Spatiëring |
|---|---|---|---|---|---|
| Display (hero) | Inter Tight | 700 | clamp(2.4rem, calc(1.2rem + 4.6vw), 5rem) |
1.02 | -0.04em |
| H2 (sectiekop) | Inter Tight | 700 | clamp(1.85rem, calc(1.1rem + 2.2vw), 3rem) |
1.08 | -0.035em |
| H3 (kaartkop) | Inter Tight | 650 | 1.25rem |
1.25 | -0.015em |
| Lead | Inter | 400 | 1.15rem |
1.6 | 0 |
| Body | Inter | 400 | 1rem |
1.5 | 0 |
| Eyebrow | JetBrains Mono | 500 | 0.75rem |
1.4 | 0.1em |
Regels¶
- Koppen zijn strak: Inter Tight Bold met negatieve spatiëring (-0,035 tot -0,04 em) en een regelhoogte rond 1,05. Laat de browser de regels verdelen (
text-wrap: balance). - De accentregel: in een grote kop mag één regel het blauwe verloop krijgen, zoals "Vaste prijs, vaste deadline." in de hero. Eén per kop, alleen in display- en H2-koppen.
- Eyebrow boven elke sectiekop: JetBrains Mono, 12 px, hoofdletters, 0,1 em spatiëring, in linkblauw op licht en Agency-blauw op inkt. Op de homepage met een pulserende blauwe stip ervoor.
- Lead onder de kop: Inter 18,4 px in 68% inkt, maximaal zo'n 54 tekens per regel.
- Geen cursief, geen onderstreping behalve bij links in lopende tekst.
- Hoofdletters alleen in eyebrows, chips en het logo. Nooit in koppen of knoppen.
In code¶
h1, h2, h3 { font-family: var(--ag-font-display); font-weight: 700; letter-spacing: -0.035em; }
body { font-family: var(--ag-font-body); }
.eyebrow { font-family: var(--ag-font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
Office en Google Docs: installeer Inter en Inter Tight (gratis, zie Downloads). Ontbreken ze, gebruik dan Arial; nooit een ander sierlijk lettertype.