# Kerning: de ruimte tussen letters corrigeren

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

De meeste tekst heeft nooit een handmatige aanpassing nodig, want goede fonts hebben hun eigen kerning. Grote koppen en woordmerken zijn anders: op dat formaat valt elke vreemde ruimte op. Zo vind en herstel je ze.

## The short version

- Kerning is de aanpassing van de ruimte tussen één specifiek paar letters, zoals A en V of T en o.
- Goed gemaakte fonts bevatten honderden of zelfs duizenden kerningparen, dus gewone lopende tekst heeft zelden handmatige kerning nodig.
- Handmatige kerning telt het meest in grote koppen, logo’s en woordmerken, waar ongelijke ruimtes zichtbaar worden.
- Het doel van kerning is een gelijkmatige visuele ruimte tussen letters, niet een gelijke gemeten afstand.
- In CSS zet `font-kerning: normal` de ingebouwde kerning van een font aan, en browsers passen die meestal standaard toe.

**Kerning** is de aanpassing van de ruimte tussen twee specifieke letters zodat een woord gelijkmatig gespatieerd lijkt. Sommige paren vormen laten een gat als ze naast elkaar staan: de diagonaal van een A naast de diagonaal van een V, de uitstekende arm van een T boven een kleine o. Kerning trekt die paren dichter bij elkaar, of duwt soms een te dicht paar uiteen, tot de ruimtes voor het oog gelijk lijken. Het verschilt van tracking, die de spatiëring van elke letter in een regel in één keer verandert.

## Waarom sommige lettercombinaties kerning nodig hebben

Elke letter in een font zit in een onzichtbaar vakje met aan elke kant een beetje ingebouwde ruimte. Dat werkt voor de meeste combinaties: n naast o, h naast e. Het faalt waar vormen aan één kant open zijn. Diagonalen, uitstekende armen en ronde letters naast rechte zorgen voor plekken wit die op een ontbrekende letter lijken.

| Paar | Waarom er een gat valt | Gebruikelijke oplossing |
| --- | --- | --- |
| AV, VA, AW, WA | Twee diagonalen leunen van elkaar weg | Merkbaar naar elkaar toe trekken |
| To, Ta, Te, Ty | De arm van de T hangt boven lege ruimte | Stop de kleine letter onder de arm |
| LT, LY, LV | De voet van de L laat een gat erboven | Naar elkaar toe trekken, vaak flink |
| Yo, Ya, Wo, Vo | Diagonale hoofdletter boven een ronde kleine letter | Intrekken zoals bij de T-paren |
| P., F., T., Y. | Leesteken staat onder een uitsteeksel | Schuif de punt of komma naar binnen |
| r en n, r en m | Kunnen samensmelten tot één letter als ze te dicht staan | Iets openen als ze elkaar raken |
| f gevolgd door ), ? of ’ | De haak van de f botst | Een beetje uit elkaar duwen |

De paren die de meeste kerningproblemen veroorzaken. Fonts passen veel hiervan al aan; controleer ze toch op het oog op kopformaat.

Het geval r en n is de bron van een oude typografengrap: zet het woord kerning te strak en het leest als keming. Het is een goede herinnering dat kerning in beide richtingen werkt.

## Wanneer je met de hand kernt

Goede fonts worden geleverd met een kerningtabel, een lijst van paren en hoeveel elk moet worden aangepast, dus lopende tekst en de meeste interfacetekst zijn al geregeld. Handmatige kerning loont als tekst groot of blijvend wordt.

- **Koppen boven zo’n 60 px op een scherm**, waar een ruimte van 2 px een zichtbaar gat wordt.
- **Logo’s en woordmerken**, die duizenden keren op elk formaat worden gezien. [Woordmerk ontwerpen](https://gradiently.design/nl/guide/wordmark-design) gaat verder.
- **Alle hoofdletters**, waar diagonalen zoals A, V, W en Y vaker op één lijn komen.
- **Posterregels en thumbnails**, waar drie of vier woorden het hele ontwerp dragen.
- **Gratis of display-fonts met een dunne kerningtabel**, die gangbare paren onaangepast kunnen laten.

Een staande poster met het ene woord WAVE groot gezet in hoofdletters met gelijkmatige letterspatiëring

Een woord dat bijna helemaal uit diagonalen bestaat, het moeilijkste geval voor spatiëring. Controleer of W, A en V gelijkmatig in elkaar passen voordat je exporteert.

Een staande eventpost met de kop Tot vanavond in The Yard groot gezet over een verloop

To, Th en Ya komen alle drie voor in één korte kop. Op dit formaat is elk paar een blik waard voor het exporteren.

## Een kop of woordmerk op het oog kernen

Het doel is een gelijkmatig *oppervlak* tussen letters, niet een gelijke gemeten afstand. Twee rechte stokken, zoals H en I, hebben de meeste ruimte ertussen nodig. Een rechte naast een ronde, zoals H en O, iets minder. Twee ronde, zoals O en C, het minst. Diagonalen en uitsteeksels hebben de meeste correctie nodig.

1. **Stel eerst de tracking in** Bepaal de algehele spatiëring van de regel voordat je aan paren komt. Een regel kernen en daarna de tracking veranderen maakt de helft van je werk ongedaan.
2. **Werk per drie** Kijk naar drie letters tegelijk en pas de middelste aan zodat de twee ruimtes aan weerszijden gelijk zijn. Schuif dan één letter op.
3. **Zet het ondersteboven** Draai het woord om of bekijk het gespiegeld. Zodra je het niet meer kunt lezen, zie je vormen en ruimtes in plaats van letters.
4. **Vervaag of knijp je ogen dicht** Een lichte blur verandert de ruimtes in grijze vlekken. Elke vlek die merkbaar lichter of donkerder is dan zijn buren is een paar om te herstellen.
5. **Controleer klein en groot** Bekijk het woord op het formaat waarop het wordt gebruikt en op het kleinste formaat waarop het verschijnt. Een woordmerk dat alleen op posterformaat is gekernd, kan op favicon-formaat dichtklonteren.
6. **Laat het liggen en kijk opnieuw** Kom terug na een pauze. Kernen op het oog schuift op als je te lang staart, en met frisse ogen zie je het paar dat je te ver samenkneep.

De meeste ontwerptools laten je kernen door de cursor tussen twee letters te zetten en met een sneltoets bij te sturen. In Adobe-apps is de eenheid een duizendste em, dus een waarde van min 40 trekt het paar 4% van de lettergrootte dichter bij elkaar, welke grootte dat ook is.

## Metrische of optische kerning

Veel opmaaktools bieden twee automatische modi. **Metrische** kerning gebruikt de paren die de letterontwerper in het font heeft ingebouwd. **Optische** kerning negeert die en berekent de spatiëring uit de contouren van elke letter. Metrisch is de betere standaard voor een goed gemaakt font, omdat een mens die keuzes maakte. Optisch kan een font met een slechte of ontbrekende kerningtabel redden, en helpt als je twee fonts in één woord mengt.

### Vermijd

- Lopende tekst letter voor letter kernen
- Ruimtes met een liniaal meten
- Kernen voordat je de tracking instelt
- Aanspannen tot de letters elkaar raken
- Op de spatiëring van een gratis font vertrouwen zonder te controleren

### Doe

- Lopende tekst overlaten aan de eigen kerning van het font
- Op het oog beoordelen, drie letters tegelijk
- Tracking instellen en dan losse paren corrigeren
- Een haarlijn ruimte houden, vooral bij r en n
- AV, To, LT en Yo in elke kop controleren

## Kerning in CSS

Browsers passen de kerning van een font voor de meeste tekst automatisch toe, maar je kunt het expliciet maken. De eigenschap [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) zet de ingebouwde paren aan of uit. CSS heeft geen eigenschap om één specifiek paar aan te passen, dus voor één kop of logo is de gebruikelijke route een letter in een span te zetten en die met een negatieve marge of letterspatiëring bij te sturen.

```css
/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}
```

Gebruik em-eenheden voor handmatige correcties zodat de aanpassing met de tekst meeschaalt. Kern alleen koppen met de hand, nooit lopende tekst.

Wil je de spatiëring van een hele regel veranderen in plaats van één paar, dan is dat tracking, ingesteld met `letter-spacing`. [Tracking en kerning](https://gradiently.design/nl/guide/tracking-vs-kerning) legt uit hoe die twee samenwerken met regelafstand, en [letterspatiëring](https://gradiently.design/nl/guide/letter-spacing) geeft beginwaarden voor hoofdletters, labels en koppen.

Voor meer over grote letters die bewust ogen, zie [display-fonts](https://gradiently.design/nl/guide/display-fonts) en [typografiebasis](https://gradiently.design/nl/guide/typography-basics). Op een verloop of getextureerde achtergrond is spatiëring maar de helft van leesbaarheid: een goed gekernd woord kan nog steeds uiteenvallen waar de kleur erachter verandert. Een Gradiently-Mark verplaatst zijn rustigste gebied achter je woorden en kiest per regel lichte of donkere inkt, zodat een zorgvuldig gespatieerde kop gelijkmatig leest van de eerste tot de laatste letter.

## FAQ

### Wat is kerning in typografie?

Kerning is de aanpassing van de ruimte tussen twee specifieke letters, zoals A en V, zodat een woord gelijkmatig gespatieerd lijkt.

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

Kerning verandert de ruimte tussen één paar letters. Tracking verandert de ruimte tussen alle letters in een regel of blok in één keer.

### Moet ik lopende tekst kernen?

Zelden. Goede fonts bevatten hun eigen kerningparen, die lopende tekst goed afhandelen. Bewaar handmatige kerning voor koppen, logo’s en grote displaytekst.

### Moet ik metrische of optische kerning gebruiken?

Gebruik metrisch voor een goed gemaakt font, omdat de letterontwerper de paren heeft ingesteld. Probeer optisch als de ingebouwde kerning van een font slecht is of je fonts mengt.

### Hoe kern ik tekst in CSS?

`font-kerning: normal` zet de ingebouwde paren van het font aan. Om één paar aan te passen zet je een letter in een span en stuur je die bij met een kleine negatieve marge in em-eenheden.