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

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.

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 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 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 legt uit waarom.

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

   Stel de regelafstand in

   Bepaal hoe dicht de regels stapelen. Koppen krapper, alinea’s ruimer.

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

Tracking, kerning en regelafstand in 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;
}

Houd deze waarden op één plek, zodat elke pagina dezelfde spatiëring voor dezelfde rol gebruikt. Dat is de kern van een typografiesysteem. 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.