Letterafstand: wanneer je tekst opent en wanneer je hem aanhaalt

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, en alle drie worden geïntroduceerd in de basis van typografie.

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.

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.

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.

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).

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 voor het volledige gedrag.

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;
}

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 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.

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 en lettertypen combineren voor ontwerpen die je in één oogopslag leest.