# Letterafstand: wanneer je tekst opent en wanneer je hem aanhaalt

[Canonical HTML page](https://gradiently.design/nl/guide/letter-spacing)

Een paar honderdsten van een em bepalen of een label doordacht of benauwd oogt. Hier lees je waar je ruimte tussen letters toevoegt, waar je die weghaalt en waar je ervan afblijft.

## The short version

- Letterafstand, ook tracking genoemd, is de gelijkmatige ruimte die tussen alle letters in een stuk tekst wordt toegevoegd of weggehaald.
- Kerning is iets anders: het past de ruimte aan tussen specifieke letterparen, zoals A en V, en zit meestal in het lettertype ingebouwd.
- Hoofdletters en kleine labels hebben bijna altijd extra letterafstand nodig, doorgaans rond 0.05em tot 0.12em.
- Grote koppen ogen meestal beter als je ze iets aanhaalt, vaak met 0.01em tot 0.03em, omdat de standaardafstand van het lettertype voor kleinere formaten is getekend.
- Lopende tekst laat je normaal op de standaard letterafstand van het lettertype staan.

**Letterafstand** (tracking) is de gelijkmatige ruimte die tussen alle letters in een woord of regel wordt toegevoegd of weggehaald. De korte regel: geef hoofdletters en kleine labels extra letterafstand, haal grote koppen iets aan en laat lopende tekst op de standaard van het lettertype staan. De meeste problemen met afstand in echte ontwerpen komen voort uit het omgekeerde: hoofdletters die krap blijven, grote koppen die los blijven en alinea’s die worden gespatieerd om een vak te vullen.

Letterafstand is een van drie instellingen die bepalen hoe tekst leest. De andere twee zijn [regelafstand en regellengte](https://gradiently.design/nl/guide/line-height-and-line-length), en alle drie worden geïntroduceerd in [de basis van typografie](https://gradiently.design/nl/guide/typography-basics).

## Tracking of kerning: wat is het verschil

De twee woorden worden door elkaar gebruikt, maar ze doen iets anders. **Tracking** verandert de afstand in een hele selectie gelijkmatig. **Kerning** verandert de ruimte tussen één specifiek letterpaar, omdat sommige vormen bij hun standaardafstand lelijke gaten laten: denk aan *AV*, *To*, *Ty* of *LT*.

| Vraag | Tracking | Kerning |
| --- | --- | --- |
| Wat het verandert | De ruimte tussen alle letters in een selectie | De ruimte tussen één letterpaar |
| Wie het meestal instelt | Jij, per stijl: labels, koppen, bijschriften | De letterontwerper, in de kerningtabellen van het lettertype |
| Wanneer je eraan komt | Elke keer dat je hoofdletters, labels of displayletters zet | Zelden: logo’s, grote koppen, lastige paren |
| In CSS | `letter-spacing` | `font-kerning`, in de meeste browsers standaard aan |

Tracking is een stijlkeuze die je vaak maakt. Kerning is een ambachtelijk detail dat je op grote formaten controleert.

Goede lettertypen worden geleverd met duizenden kerningparen, dus op tekstformaat hoef je zelden met de hand te kernen. Op het formaat van koppen en logo’s worden kleine gaten zichtbaar, en een paar of twee met de hand kernen is de minuut die het kost waard.

## Waarom hoofdletters meer letterafstand nodig hebben

Kleine letters zijn ontworpen om naast andere kleine letters te staan: stokken, staarten en ronde vormen geven een gevarieerde omtrek die het oog als woordbeeld leest. Hoofdletters zijn blokkig en ongeveer even hoog, dus op de standaardafstand dringen ze samen tot een dichte balk. Een beetje extra tracking haalt ze uit elkaar en maakt elke letter makkelijker te herkennen.

Hoeveel hangt af van het formaat. Piepkleine hoofdletters, zoals een label of bovenregel op 11 tot 13 px, kunnen 0.08em tot 0.12em hebben. Hoofdletters op het formaat van een tussenkop hebben minder nodig, rond 0.04em tot 0.06em. Heel grote hoofdletters in een kop hebben misschien niets nodig, of zelfs een fractie minder ruimte.

Een staande aankondigingspost met een kleine gespatieerde bovenregel in hoofdletters boven een grote kop

Een gespatieerde bovenregel in hoofdletters staat boven een kop met normale afstand.

Een staande evenementenposter met een gespatieerd label in hoofdletters en een kop in gewone letters

Kleine hoofdletters met extra letterafstand lezen als een label, niet als schreeuwen.

## Wanneer je de letterafstand krapper maakt

Lettertypen zijn gespatieerd voor een bepaald bereik van formaten, meestal tekstformaten. Opgeblazen tot 60 of 100 px oogt dezelfde afstand luchtig en leest het woord niet meer als één vorm. Grote koppen iets aanhalen, vaak met 0.01em tot 0.03em, trekt ze weer bij elkaar. Lettertypen met een as voor optische grootte of een aparte Display-snede doen dit vaak voor je, en dat is een van de voordelen die aan bod komen in [variabele lettertypen](https://gradiently.design/nl/guide/variable-fonts).

Haal voorzichtig aan. Letters die elkaar raken, of ronde letters die beginnen samen te smelten, zijn een teken dat je te ver bent gegaan, vooral bij vette gewichten. Controleer de paren aan de rand van wat het lettertype goed doet, zoals *rn* (dat als *m* kan lezen) en *cl* (dat als *d* kan lezen).

### Vermijd

- Standaardafstand op piepkleine labels in hoofdletters
- Losse tracking op een kop van 96 px
- Lopende tekst spatiëren om een regel of vak te vullen
- Negatieve tracking op kleine tekst om er meer woorden in te krijgen

### Doe

- 0.05em tot 0.12em op kleine hoofdletters en labels
- Heel grote letters iets aanhalen
- Standaardafstand voor alinea’s
- Kortere tekst of een smaller lettertype als de ruimte op is

## Letterafstand in CSS

Stel `letter-spacing` in met `em`, niet met pixels, zodat de afstand meeschaalt met de lettergrootte. Een waarde die bij een label van 12 px past, klopt dan in verhouding nog steeds als het label naar 14 px groeit. Zie de referentie van MDN voor [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) voor het volledige gedrag.

```css
body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}
```

Positieve tracking voor kleine hoofdletters, een beetje voor knoppen, iets krapper voor displayletters en niets voor lopende tekst.

> **De ruimte aan het eind** Browsers voegen ook na het laatste teken letterafstand toe. Bij een gecentreerd, sterk gespatieerd label duwt dat de tekst iets naar links. Een even grote padding aan de beginkant, zoals in de code hierboven, brengt het weer in balans.

## Letterafstand voor kleine tekst, labels en cijfers

Kleine tekst heeft baat bij een beetje extra ruimte, omdat letters op kleine formaten in elkaar overlopen, vooral lichte letters op een donkere ondergrond. Veel letterfamilies openen hun afstand al op kleine optische groottes. Doet die van jou dat niet, dan kan 0.01em tot 0.03em op bijschriften en kleine lettertjes helpen. Cijfers in tabellen hebben meer aan tabelcijfers (`font-variant-numeric: tabular-nums`) dan aan tracking, omdat ze dan in kolommen onder elkaar staan.

Nog twee gevallen vragen om zorg. Verbonden schriften, zoals het Arabisch, hoor je niet te spatiëren, omdat de afstand de verbindingen tussen letters breekt. En kleine letters spatieer je zelden: gespatieerde kleine letters breken de woordbeelden die ze makkelijk leesbaar maken.

Een vierkante cijferpost met een groot getal en een klein gespatieerd label in hoofdletters erboven

Grote cijfers die iets krap zijn gezet, met een klein gespatieerd label erboven, houden een cijferpost compact en helder.

## Een vertrekpunt voor de letterafstand van elke rol

Gebruik deze als standaard en stel daarna op het oog bij voor je lettertype. Bekijk het resultaat op de echte grootte, op een echt scherm, want afstand die er ingezoomd op een ontwerpcanvas goed uitziet, oogt op 100 procent vaak anders.

| Rol van de tekst | Gangbaar formaat | Letterafstand |
| --- | --- | --- |
| Bovenregel of label, hoofdletters | 11 tot 13 px | 0.08em tot 0.12em |
| Knoptekst | 14 tot 16 px | 0 tot 0.02em |
| Lopende tekst | 16 tot 18 px | Standaard van het lettertype |
| Tussenkop, hoofdletters | 18 tot 24 px | 0.04em tot 0.06em |
| Kop | 32 tot 56 px | 0 tot -0.01em |
| Displaykop | 64 px en groter | -0.01em tot -0.03em |

Beginwaarden voor tekst in Latijns schrift. Bredere lettertypen hebben minder extra ruimte nodig, smalle lettertypen kunnen meer hebben.

Staat je ontwerp op een kleurverloop of foto, dan beïnvloedt de afstand ook de leesbaarheid: dunne, krap gezette letters verdwijnen sneller tegen een druk veld dan open letters. Combineer deze instellingen met het advies in [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) en [lettertypen combineren](https://gradiently.design/nl/guide/font-pairing) voor ontwerpen die je in één oogopslag leest.

## FAQ

### Wat is het verschil tussen letterafstand en kerning?

Letterafstand, of tracking, verandert de ruimte tussen alle letters in een selectie gelijkmatig. Kerning past de ruimte aan tussen één specifiek letterpaar, zoals A en V, en zit grotendeels in het lettertype ingebouwd.

### Hoeveel letterafstand moeten hoofdletters hebben?

Rond 0.05em tot 0.12em voor kleine hoofdletters zoals labels en bovenregels, en minder naarmate het formaat groeit. Heel grote koppen in hoofdletters hebben misschien niets nodig.

### Moet lopende tekst letterafstand hebben?

Meestal niet. Lettertypen zijn door hun ontwerpers gespatieerd voor tekstformaten, dus de standaardafstand is voor alinea’s normaal het best leesbaar.

### Waarom gebruik je em voor letter-spacing in CSS?

Een waarde in em schaalt mee met de lettergrootte, dus de afstand blijft in verhouding als de tekst groter of kleiner wordt. Een waarde in pixels blijft vast en wordt al snel te krap of te los.