# Tracking, kerning en regelafstand: het spatiërings-trio

[Canonical HTML page](https://gradiently.design/nl/guide/tracking-vs-kerning)

Drie woorden voor drie verschillende ruimtes. Haal ze door elkaar en je repareert de verkeerde. Dit is wat elk bepaalt, welke je eerst pakt en de waarden die als beginpunt werken.

## The short version

- Tracking verandert in één keer de ruimte tussen alle letters van een regel of tekstblok.
- Kerning verandert de ruimte tussen één specifieke lettercombinatie, zoals A en V.
- Regelafstand, interlinie of leading, is de verticale afstand tussen tekstregels, in CSS en de meeste apps line-height genoemd.
- Stel regelafstand en tracking eerst in voor een hele stijl en kern pas daarna losse paren, alleen in grote letters.
- Grote koppen willen meestal iets krappere tracking en regelafstand, terwijl hoofdletters en kleine tekst meer tracking willen.

Bij **tracking vs kerning** zit het verschil in het bereik. Tracking past de ruimte tussen alle letters van een selectie aan, zodat een hele kop gelijkmatig opent of aantrekt. Kerning past de ruimte tussen één specifiek paar aan, zoals de A en V in WAVE, om een gat te herstellen dat het lettertype liet liggen. Regelafstand, de derde van het trio, heeft niets te maken met letters naast elkaar: het is de verticale ruimte van de ene tekstregel tot de volgende.

| Term | Wat het verandert | Bereik | Heet in CSS |
| --- | --- | --- | --- |
| Tracking | Ruimte tussen alle letters | Een woord, regel of alinea | `letter-spacing` |
| Kerning | Ruimte tussen één paar letters | Twee tekens | `font-kerning` (alleen aan of uit) |
| Regelafstand | Ruimte tussen regels | Een alinea of tekstvak | `line-height` |

Het spatiërings-trio in één oogopslag. Twee werken horizontaal, één verticaal, en slechts één werkt op één paar.

## Wat is tracking in typografie

Tracking is een gelijkmatige verandering. Selecteer een regel, voeg tracking toe en elk gat groeit evenveel. Het is het gereedschap om de *textuur* van tekst te veranderen: luchtig en formeel, of dicht en pittig. In ontwerpapps wordt het gemeten in duizendsten van een em (Adobe) of als percentage van de lettergrootte (Figma), en in CSS als `letter-spacing`, het best geschreven in em zodat het met de letter meeschaalt.

Drie situaties vragen erom. Grote koppen zien er bij standaardspatiëring meestal los uit, dus een beetje negatieve tracking trekt ze samen. Hoofdletters ogen krap, omdat hoofdletters zijn ontworpen om naast kleine letters te staan, dus ze hebben positieve tracking nodig. En heel kleine tekst, zoals labels en juridische regels, leest beter met iets meer lucht. [Letterspatiëring](https://gradiently.design/nl/guide/letter-spacing) behandelt elk geval uitgebreid.

## Wat is kerning

Kerning is een lokale reparatie. Sommige lettercombinaties laten een zichtbaar gat of een botsing zien, zelfs in een goed gespatieerd lettertype: AV, To, LT, Yo, P gevolgd door een punt. Lettertypes bevatten een tabel van deze paren en passen ze automatisch aan, dus voor lopende tekst kun je kerning met rust laten. In koppen, logo’s en woordmerken moet je soms nog een paar of twee met de hand aanpassen. [Kerning](https://gradiently.design/nl/guide/kerning) heeft de volledige lijst lastige paren en een methode om ze op het oog te herstellen.

## Wat is regelafstand in typografie

Leading, de Engelse term voor regelafstand, is genoemd naar de loden strips die drukkers tussen regels metalen letters legden. Tegenwoordig is het line-height: de afstand van de ene basislijn tot de volgende. Te weinig en stokken botsen op staarten; te veel en de regels drijven uiteen tot losse gedachten. Als vuistregel geldt: hoe langer de regel en hoe kleiner de tekst, hoe meer regelafstand. [Regelhoogte en regellengte](https://gradiently.design/nl/guide/line-height-and-line-length) legt uit waarom.

Een staande post met een gespatieerde eyebrow in hoofdletters, NIEUW SEIZOEN, boven een krap gezette kop, De lentecollectie is binnen

Waar elke instelling hoort: ruime tracking op de eyebrow in hoofdletters, krappe tracking en regelafstand op de kop, normale spatiëring op de detailregel.

Een staande redactionele post met een klein gespatieerd label, NUMMER 04, en een titel, Notities uit de studio

Een redactionele opmaak. De kleine letters, het label en de ondertitel, lezen rustiger met ruime regelafstand en iets open tracking.

## Wat eerst aanpassen: tracking, kerning of regelafstand

Werk van de grootste beslissing naar de kleinste. Regelafstand en tracking bepalen de stijl; kerning ruimt op wat overblijft. Verander je ze in de verkeerde volgorde, dan maak je je eigen werk ongedaan.

1. **Kies grootte en gewicht** Spatiëring hangt van beide af. Stel ze eerst in, want een zwaarder gewicht of grotere maat vraagt andere waarden.
2. **Stel de regelafstand in** Bepaal hoe dicht de regels stapelen. Koppen krapper, alinea’s ruimer.
3. **Stel tracking in voor de stijl** Pas één trackingwaarde toe op de hele kopstijl, labelstijl of lopende tekststijl. Houd hem consistent in het ontwerp.
4. **Kern de paren die nog gapen** Alleen in grote of blijvende letters. Zoek AV, To, LT en vergelijkbare paren en pas ze één voor één aan.
5. **Controleer op echt formaat** Bekijk het resultaat op het formaat waarop mensen het zien. Spatiëring die ingezoomd goed lijkt, kan op een telefoon los ogen.

## Beginwaarden voor tracking en regelafstand

Dit zijn verstandige standaardwaarden, geen wetten. Lettertypes verschillen, en een smal displaylettertype gedraagt zich totaal anders dan een brede geometrische schreefloze. Gebruik ze om te beginnen en vertrouw dan je oog.

| Tekstrol | Tracking (CSS) | Tracking (Adobe-eenheden) | Regelafstand |
| --- | --- | --- | --- |
| Lopende tekst, 14 tot 20 px | 0 | 0 | 1,4 tot 1,6 |
| Kop, 48 px en groter | -0,01em tot -0,03em | -10 tot -30 | 1,0 tot 1,15 |
| Enorme displayletters, 120 px en groter | -0,02em tot -0,04em | -20 tot -40 | 0,9 tot 1,05 |
| Labels in hoofdletters | 0,06em tot 0,12em | 60 tot 120 | 1,2 tot 1,3 |
| Kleine tekst onder 13 px | 0,01em tot 0,02em | 10 tot 20 | 1,4 tot 1,5 |

Tracking in CSS-em en in Adobe’s duizendsten van een em zeggen hetzelfde: 0,05em is gelijk aan 50 eenheden. Regelafstand wordt getoond als veelvoud van de lettergrootte.

### Veelgemaakte fouten

- Elk paar kernen terwijl de tracking niet klopt
- Lopende tekst krapper tracken om meer woorden kwijt te kunnen
- Standaard regelafstand op een kop van drie regels
- Hoofdletters zonder tracking
- Andere tracking op elke kop in een set

### Beter

- Herstel eerst de tracking, kern dan wat overblijft
- Pas de tekst zelf aan
- Trek de regelafstand van koppen terug tot ongeveer 1,1
- Open hoofdletters met 0,06em of meer
- Eén waarde per stijl, vastgelegd in je merkregels

## Tracking, kerning en regelafstand in CSS

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Schrijf `line-height` zonder eenheid, zodat het met de lettergrootte meeschaalt, en `letter-spacing` om dezelfde reden in em.

Houd deze waarden op één plek, zodat elke pagina dezelfde spatiëring voor dezelfde rol gebruikt. Dat is de kern van een [typografiesysteem](https://gradiently.design/nl/guide/brand-typography-system). Als je sociale posts ontwerpt in plaats van webpagina’s, geldt hetzelfde idee: bepaal de spatiëring één keer, leg hem vast in je merkregels en hergebruik hem. In Gradiently bevat de merkkit je kop- en tekstlettertypes en past de Designer ze toe bij nieuwe formaten, zodat de letters consistent blijven van een vierkante post tot een story.

## FAQ

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

Tracking verandert de ruimte tussen alle letters in een selectie. Kerning verandert de ruimte tussen één specifiek paar letters.

### Is leading hetzelfde als line-height?

In de praktijk wel. Leading is de traditionele term uit de druktechniek en line-height is wat CSS en de meeste ontwerpapps de afstand tussen regels noemen.

### Moet ik eerst tracking of kerning aanpassen?

Eerst tracking. Die bepaalt de algemene spatiëring; kerning herstelt daarna de paar paren die nog ongelijk ogen, en alleen in grote letters.

### Hoe heet tracking in CSS?

`letter-spacing`. Schrijf het in em, zoals `0.05em`, zodat het proportioneel blijft als de lettergrootte verandert.

### Welke regelafstand moet lopende tekst hebben?

Rond 1,4 tot 1,6 keer de lettergrootte voor lopende tekst, en rond 1,0 tot 1,15 voor grote koppen.