# Typografisch systeem: kies een rol voor elk lettertype

[Canonical HTML page](https://gradiently.design/nl/guide/brand-typography-system)

Lettertypen kiezen is het makkelijke deel. Precies bepalen hoe ze zich gedragen, op welke grootte, in welk gewicht, voor welke taak, laat een merk overal consistent ogen.

## The short version

- Een typografisch systeem is een kleine set benoemde rollen, zoals display, kop, lopende tekst en label, elk met een vast lettertype, gewicht, grootte, regelafstand en hoofdlettergebruik.
- De groottes in een typografisch systeem komen uit één schaal, een basisgrootte vermenigvuldigd met een vaste verhouding, zodat elke stap met de andere samenhangt.
- De meeste merken hebben maar een of twee lettertypen nodig; het systeem creëert variatie met rollen, gewichten en groottes.
- Designtokens slaan elke rol op als benoemde waarde, zodat websites, apps en ontwerpbestanden dezelfde letterkeuzes gebruiken.
- Socialemediaposts, dia’s en websites hebben verschillende groottes nodig voor dezelfde rollen, dus een goed systeem geeft elke rol per kanaal.

Een **typografisch systeem** is de set regels die bepaalt hoe letters zich gedragen binnen een merk: een paar benoemde rollen (display, kop, lopende tekst, label), elk met één lettertype, gewicht, grootte, regelafstand en hoofdlettergebruik, allemaal afgeleid van één schaal en opgeslagen als tokens, zodat elke ontwerper en ontwikkelaar dezelfde waarden gebruikt. Lettertypen geven een merk zijn stem. Het systeem maakt die stem consistent, zodat een kop op een poster, een website en een story er allemaal uitzien alsof ze van dezelfde plek komen. Zo bouw je er een.

## De rollen in een typografisch systeem

Begin bij taken, niet bij lettertypen. Elke tekst die een merk publiceert doet een van een handvol taken, en elke taak wordt een rol. De meeste merken hebben er vijf tot zeven nodig.

| Rol | Taak | Typische instelling |
| --- | --- | --- |
| Display | De grootste woorden: campagneregels, covers, hoofdtitels | Koplettertype, vet, krappe regelafstand, weinig woorden |
| Kop | Sectietitels en postkoppen | Koplettertype, halfvet of vet, zinshoofdletters |
| Subkop | Leidt een sectie in, inleidende tekst | Broodlettertype, medium gewicht, een stap boven lopende tekst |
| Lopende tekst | Leestekst | Broodlettertype, regulier 400, regelafstand rond 1,5 |
| Label en eyebrow | Kleine tekst boven koppen, tags, knoppen | Broodlettertype, halfvet, vaak kapitalen met extra spatiëring |
| Onderschrift | Bronvermeldingen, voetnoten, kleine lettertjes | Broodlettertype, regulier, kleinste stap |
| Numeriek | Prijzen, statistieken, tabellen | Tabelcijfers zodat cijfers onder elkaar uitlijnen |

Zeven rollen dekken bijna elk merk. Kun je niet zeggen welke taak een stijl doet, dan is het geen rol maar een uitzondering.

Een staande post in nieuwsbriefstijl met een kleine eyebrow, een grote kop en een korte ondersteunende regel

Drie rollen op één post: een eyebrowlabel, een kop en een regel lopende tekst. Elk valt direct uit elkaar, zodat het oog weet waar te beginnen.

## Hoeveel lettertypen een typografisch merksysteem nodig heeft

Meestal een of twee. Eén familie in drie gewichten kan een heel systeem dragen. Twee lettertypen, een voor koppen en een voor lopende tekst, voegen karakter toe. Een derde is alleen gerechtvaardigd voor een specifieke taak zoals code of data. De variatie komt uit rollen, groottes en gewichten, niet uit meer lettertypen. [Google Fonts-combinaties](https://gradiently.design/nl/guide/google-fonts-pairings) en [merklettertypen](https://gradiently.design/nl/guide/brand-fonts) helpen je kiezen.

### Vermijd

- Een nieuw lettertype voor elke campagne
- Groottes op het oog gekozen bij elk ontwerp
- Negen gewichten geladen, drie gebruikt
- Verschillende hoofdletterregels in verschillende teams
- Een stijlgids die lettertypen noemt maar geen rollen

### Doe

- Een of twee families voor alles
- Elke grootte uit één schaal
- Alleen de gewichten die de rollen nodig hebben
- Eén vastgelegde hoofdletterregel voor koppen en knoppen
- Rollen met lettertype, gewicht, grootte, regelafstand en hoofdlettergebruik

## Bouw een lettergrootteschaal

Een lettergrootteschaal kiest een basisgrootte en vermenigvuldigt die voor elke stap omhoog met dezelfde verhouding. De stappen hangen samen, dus elke twee groottes in het systeem ogen samen bewust gekozen. Een verhouding van 1,25 past bij interfaces en dichte pagina’s; 1,333 of 1,5 geeft meer drama voor redactioneel en marketingwerk. [Lettergrootteschaal](https://gradiently.design/nl/guide/typographic-scale) legt de verhoudingen dieper uit.

| Stap | Grootte bij 1,25 vanaf 16 px | Rol |
| --- | --- | --- |
| Stap 0 | 16 px | Lopende tekst |
| Stap 1 | 20 px | Subkop, grote lopende tekst |
| Stap 2 | 25 px | Kleine kop |
| Stap 3 | 31 px | Kop |
| Stap 4 | 39 px | Grote kop |
| Stap 5 | 49 px | Display op mobiel |
| Stap 6 | 61 px | Display op desktop |
| Stap min 1 | 13 px | Onderschrift, label |

Een webschaal vanaf een basis van 16 px met een verhouding van 1,25, afgerond op hele pixels. Elke rol neemt één stap en houdt die.

## Sla het systeem op als tokens

Een systeem dat alleen in een pdf leeft, drijft af. Tokens zijn benoemde waarden die zowel code als ontwerpbestanden lezen, zodat het veranderen van één waarde alles bijwerkt. Noem tokens naar rol, nooit naar grootte: `--type-heading` overleeft een herontwerp, `--type-31` niet. [Designtokens](https://gradiently.design/nl/guide/design-tokens) behandelt het bredere idee.

```css
:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }
```

Elke rol is één font-shorthandtoken, zodat gewicht, grootte, regelafstand en familie altijd samen reizen. De waarden komen in rem overeen met de schaal hierboven.

## Eén rol, per kanaal andere groottes

Een kop op een website en een kop op een Instagrampost doen dezelfde taak op heel verschillende groottes, want de een wordt op armlengte op een groot scherm gelezen en de ander krimpt in een telefoonfeed. Houd de rollen identiek en geef elk kanaal zijn eigen groottes.

| Rol | Website | Socialmediapost 1080×1350 | Dia’s 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 tot 61 px | 140 tot 200 px | 120 tot 160 px |
| Kop | 31 px | 90 tot 120 px | 88 tot 112 px |
| Lopende tekst | 16 px | 40 tot 48 px | 48 tot 64 px |
| Label en eyebrow | 13 px | 28 tot 32 px | 36 tot 44 px |

Dezelfde rollen, dezelfde lettertypen, dezelfde gewichten, andere groottes. [Lettergrootte voor Instagramposts](https://gradiently.design/nl/guide/font-size-for-social-media) en [presentatielettertypen](https://gradiently.design/nl/guide/typography-for-presentations) leggen de cijfers voor social en dia’s uit.

## Zo bouw je je typografische systeem

1. **Verzamel wat je al publiceert** Maak screenshots van je website, posts, e-mails en dia’s. Omcirkel elke afzonderlijke tekststijl. De meeste merken vinden er veel meer dan ze bedoeld hadden.
2. **Groepeer stijlen in rollen** Voeg bijna-duplicaten samen. Mik op vijf tot zeven rollen die alles dekken wat je omcirkelde.
3. **Kies lettertypen voor de rollen** Meestal een koplettertype en een broodlettertype. Controleer of de licentie web, apps en eventueel logogebruik dekt.
4. **Stel de schaal en de details in** Kies een basis en verhouding en leg dan per rol gewicht, regelafstand, hoofdlettergebruik en spatiëring vast. Besluit je kophoofdlettergebruik één keer; [zinshoofdletters versus titelhoofdletters](https://gradiently.design/nl/guide/title-case-vs-sentence-case) helpt.
5. **Publiceer het als tokens en een blad van één pagina** Tokens voor code en ontwerpbestanden, een enkel visueel blad in je [merkstijlgids](https://gradiently.design/nl/guide/brand-style-guide) voor alle anderen.

Voor dagelijkse socialemediaposts en presentaties bewaart een Gradiently-merkkit (met Pro) de kop- en broodlettertypen van je systeem, inclusief geüploade lettertypebestanden, naast je logo’s, kleuren en stem. Nieuwe ontwerpen beginnen met die twee lettertypen, en de Designer past de kit toe als hij een ontwerp opmaakt, zodat de verdeling tussen kop en lopende tekst standhoudt zonder dat iemand eraan hoeft te denken.

## FAQ

### Wat is een typografisch systeem?

Een set benoemde letterrollen, zoals display, kop, lopende tekst en label, elk met een vast lettertype, gewicht, grootte, regelafstand en hoofdlettergebruik, meestal opgeslagen als designtokens.

### Hoeveel lettertypen moet een merk gebruiken?

Voor de meeste merken een of twee: een voor koppen en een voor lopende tekst. Een derde is alleen de moeite waard voor een specifieke taak zoals code of data.

### Wat is een lettergrootteschaal?

Een reeks lettergroottes die ontstaat door een basisgrootte te vermenigvuldigen met een vaste verhouding, zoals 1,25, zodat elke grootte in het systeem met de andere samenhangt.

### Hoe moet je typografietokens benoemen?

Naar rol, zoals type-heading of type-body, niet naar grootte. Rolnamen blijven betekenisvol als de groottes veranderen.

### Moeten socialemediaposts dezelfde lettergroottes gebruiken als een website?

Nee. Houd dezelfde rollen en lettertypen aan, maar gebruik veel grotere groottes op posts, omdat ze klein worden bekeken in een telefoonfeed.