Kerning: wat is het en hoe stel je de ruimte tussen letters in

Wat is kerning in typografie

Kerning — is het proces van handmatige of automatische aanpassing van de afstand tussen specifieke tekenparen om optische artefacten te elimineren. Het probleem ontstaat doordat elke letter een unieke geometrie heeft: A heeft een punt, V — een rechter helling, T — een brede dwarsbalk. Wanneer zulke letters naast elkaar staan, lijkt de afstand tussen hun contouren ongelijkmatig, hoewel de tussenruimte (set width) hetzelfde is.

Kerningtabellen van een lettertype bevatten tekenparen met vooraf ingestelde aanpassingswaarden. Een goed lettertype kan 300 tot 2000 kerningparen hebben. Professionele lettertypen — zoals SF Pro van Apple of Roboto van Google — bevatten zorgvuldig ontwikkelde kerningtabellen die alle mogelijke combinaties van Latijnse en Cyrillische letters dekken. Volgens de Fontshop Guide to Kerning is de kwaliteit van kerningtabellen een van de belangrijkste kenmerken van een professioneel lettertype.

Visueel effect van kerning is vooral merkbaar in koppen, logo's en tekst van grote formaten (vanaf 24 pt). In kleine tekst (12-14 pt) zijn de ruimtes tussen letters klein en is kerning minder zichtbaar, hoewel het blijft werken. Webbrowsers en mobiele besturingssystemen passen standaard ingebouwde kerning toe, maar de ontwikkelaar kan deze uitschakelen of aanpassen aan een specifiek ontwerp.

Kerning en tracking: belangrijkste verschillen

Beginnende ontwikkelaars verwarren kerning en tracking vaak, maar dit zijn fundamenteel verschillende typografische parameters. Kerning werkt op het niveau van tekenparen en past de ruimte alleen aan tussen specifieke combinaties waar de geometrie van letters een optische disbalans creëert. Tracking (letter-spacing) verandert de ruimte tussen alle tekens van het geselecteerde fragment gelijkmatig — door deze uniform te vergroten of te verkleinen.

Wanneer wordt tracking toegepast: voor het verbeteren van de leesbaarheid van kleine tekst (positieve tracking), voor het creëren van accentkoppen (negatieve tracking), voor het stylen van tekst in interface-ontwerp. Tracking wordt ingesteld met een numerieke waarde en toegepast op elk teken, inclusief reeds gekernde paren — kerningcorrecties blijven behouden, maar er wordt een algemene verschuiving aan toegevoegd.

Belangrijke regel: bij negatieve tracking (verdichting) let op kerningparen — ze kunnen ongewenste overlappingen van letters veroorzaken. In CSS wordt de eigenschap letter-spacing toegepast over de kerningtabel van het lettertype heen, en bij sterke verdichting (letter-spacing: -1px) kunnen kerningcorrecties leiden tot samensmelting van tekens.

Implementatie van kerning in iOS via NSAttributedString

Op iOS wordt kerning beheerd via het kenmerk .kern in NSAttributedString. De waarde van het kenmerk is Float, waarbij een positief getal de ruimte vergroot, negatief verkleint en 0 kerning uitschakelt. De standaardwaarde is nil, wat betekent dat de kerningtabel van het lettertype wordt gebruikt. De belangrijkste API voor het werken met kerning is NSMutableAttributedString met het toevoegen van het kenmerk aan een tekstbereik.

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// Kerning inschakelen (gebruikt lettertypetabel)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Toepassen op UILabel
label.attributedText = attributedText

Standaardwaarde .kern = nil schakelt kerning uit de lettertypetabel in. Als je kerning volledig wilt uitschakelen — stel dan .kern = 0 in. De waarden 0.0 en nil zijn verschillende toestanden: nil gebruikt de tabel, 0 forceert het nulstellen van alle kerningparen. Volgens Apple Text Programming Guide is het expliciet instellen van 0 nuttig voor monospace-tekst of gevallen waarin kerning stoort — bijvoorbeeld in knoppen met vaste breedte.

SwiftUI biedt de modifier .kerning() voor Text. In tegenstelling tot UIKit wordt in SwiftUI kerning ingesteld op het niveau van de weergave, niet van een geattribueerde string. De modifier accepteert CGFloat en wordt toegepast op alle tekst binnen het Text-blok. Voor gedeeltelijke kerning in SwiftUI wordt een combinatie van de + operator voor Text en afzonderlijke modifiers gebruikt.

struct KerningView: View {
    var body: some View {
        Text("Kop met kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Prestaties: NSAttributedString met het kerningkenmerk herberekent tekenposities tijdens het renderen. Voor statische tekst gebeurt dit eenmalig. Voor dynamische tekst (veranderende tekst in UICollectionView) — elke keer bij wijziging. Het gebruik van een groot bereik met kerning in lange strings (meer dan 500 tekens) kan de FPS verlagen tijdens het scrollen.

Kerning instellen op Android via letterSpacing

Op Android wordt kerning beheerd via de eigenschap letterSpacing in TextView en XML-layout. Het kenmerk is van het type Float en werkt als een vermenigvuldiger van de lettergrootte in em. De waarde 0 komt overeen met standaard kerning, positief — vergroot de ruimte, negatief — verkleint. letterSpacing is beschikbaar vanaf API Level 21 (Android 5.0 Lollipop).

Implementatie via SpannableString maakt het mogelijk om kerning toe te passen op een deel van de string, niet op de hele tekst. De klasse ScaleXSpan of een aangepaste ReplacementSpan wordt gebruikt voor nauwkeurige controle. Volgens de Android Developer Guide schaalt ScaleXSpan tekens in de breedte, waarmee het veranderen van de tussenruimte wordt gesimuleerd, maar geeft geen directe controle over kerningparen.

// In XML-layout
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programmatisch in Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Beperking: Android ondersteunt kerningtabellen niet direct — letterSpacing werkt als tracking voor alle tekens. Voor paarsgewijze kerning op Android worden lettertypen met ingebouwde kerningtabellen (OpenType GPOS feature kern) gebruikt. Ondersteuning hangt af van de OS-versie en de render-engine: op Android 10+ wordt Minikin gebruikt met volledige ondersteuning voor OpenType-functies, op oudere versies — HarfBuzz met beperkingen. Aanbeveling: controleer de weergave van kerning op apparaten met Android lager dan 8.0.

Kerning in webontwikkeling via CSS

In het web wordt kerning beheerd via de CSS-eigenschap font-kerning, die ingebouwde kerningtabellen van het lettertype in- of uitschakelt. Waarden: auto (browser beslist), normal (kerning ingeschakeld), none (kerning uitgeschakeld). De eigenschap wordt sinds 2016 ondersteund door alle moderne browsers. Volgens MDN Web Docs is font-kerning alleen van toepassing op OpenType-lettertypen met een kerningtabel.

CSS-eigenschap letter-spacing — is het equivalent van tracking, maar wordt ook gebruikt voor kerning-achtige effecten. In tegenstelling tot font-kerning, verandert letter-spacing de ruimte tussen alle tekens uniform, zonder rekening te houden met kerningparen. Bij gebruik van beide eigenschappen wordt font-kerning eerst toegepast, waarna letter-spacing een uniforme verschuiving toevoegt.

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

TypeScript-hulpprogramma voor het berekenen van optimale letter-spacing rekening houdend met kerning kan de kerningtabel van het lettertype analyseren via Canvas API. Maar in de praktijk vertrouwen webontwikkelaars op font-kerning: normal — in de meeste gevallen geeft dit een optimaal resultaat. Aanvullende aanpassing van letter-spacing is alleen nodig voor ontwerpaccenten — bijvoorbeeld op landingspagina's met grote typografie.

Praktische aanbevelingen voor het instellen van kerning

Kerning is een instrument voor fijnafstelling en onjuist gebruik ervan verslechtert de leesbaarheid. Eerste regel: verander kerning niet voor hoofdtekst (body text). De kerningtabellen van professionele lettertypen bevatten al optimale waarden voor formaten van 12-16pt. Ingrijpen in de kerning van hoofdtekst leidt tot ongelijkmatigheid en visuele ruis.

Tweede regel: voor koppen vanaf 24pt gebruik je positieve kerning (0.5-1.5 pt afhankelijk van het lettertype). Grote tekst vereist meer ruimte tussen letters voor leesbaarheid. Lettertypen met een lage x-height (bijv. Didot) hebben meer kerning nodig dan lettertypen met een hoge x-height (bijv. Helvetica). Testgegevens: in de iOS-app Apple Music gebruiken koppen kerning van 0.8 pt.

Derde regel: controleer kerning altijd op echte strings, niet op test Lorem Ipsum. Verschillende tekencombinaties geven verschillende visuele effecten. Besteed speciale aandacht aan paren met klinkers en medeklinkers met uitstekende elementen: AV, Te, To, Wa, LT. Bij negatieve kerning let op paren fi, fl, fj — in sommige lettertypen kunnen ze samensmelten zonder ligatuur.

Toegankelijkheidsaspect: gebruikers met dyslexie lezen tekst met een kleine positieve kerning (0.3-0.5 pt) beter. iOS en Android ondersteunen toegankelijkheidsinstellingen die de kerning van de app kunnen overschrijven. Gebruik UIFontDescriptor met Dynamic Type en houd rekening met kerning in toegankelijkheidsinstellingen via UIAccessibility. Belangrijk: blokkeer de systeeminstellingen voor kerning niet — dit schendt WCAG 2.2 Guideline 1.4.12 over tekstaankondigingen.