Tracking in mobiele ontwikkeling — essentie en aanpassing van de afstand tussen tekens

Wat is tracking in typografie

Tracking (tracking, spatiëring) — is het aanpassen van de afstand tussen tekens, gelijkmatig toegepast op alle tekens van een tekstblok. In tegenstelling tot kerning, waarbij elk tekenpaar een individuele correctie krijgt op basis van de kerningtabel van het lettertype, wordt tracking ingesteld met een enkele numerieke waarde voor het hele bereik. Positieve tracking vergroot de tussenruimte (spatiëring), negatieve — verkleint deze (verdichting).

De term komt uit de metalen typografie, waar de interletterafstand werd geregeld door de fysieke afstand tussen de letters. In digitale typografie wordt tracking bovenop de kerningtabel toegepast: eerst past het lettertype de ingebouwde kerningparen toe, vervolgens voegt het systeem gelijkmatige tracking toe aan alle tekens. De uiteindelijke afstand = kerning + tracking, wat belangrijk is om te overwegen bij agressieve verdichting.

Meeteenheden: tracking kan worden ingesteld in absolute eenheden (punten, pixels, millimeters) en relatieve eenheden (em, procent van de lettergrootte). In mobiele ontwikkeling wordt tracking meestal ingesteld in punten (iOS) of sp (Android) als absolute waarden, in het web — in em als relatieve waarden. Relatieve eenheden hebben de voorkeur voor accessibility, omdat ze meeschalen wanneer de gebruiker de lettergrootte wijzigt.

Tracking en kerning: fundamentele verschillen

Verwarring tussen tracking en kerning — een van de meest voorkomende fouten van beginnende ontwerpers en ontwikkelaars. Kerning werkt op microniveau — corrigeert de tussenruimte tussen specifieke tekenparen (AV, Te, To) op basis van hun geometrie. Tracking werkt op macroniveau — verplaatst alle tekens van een fragment gelijkmatig, zonder rekening te houden met hun vorm.

Visueel effect: bij kerning verschillen de afstanden tussen verschillende tekenparen — tussen A en V is kleiner dan tussen A en I, omdat de lettervormen elkaar compenseren. Bij tracking zijn alle afstanden gelijk — tussen A en V, A en I, T en o — overal dezelfde verschuiving. Dit maakt tracking tot een instrument voor globale regeling en kerning tot een instrument voor fijnafstemming.

Gecombineerd gebruik: in interfacetypografie worden tracking en kerning samen toegepast. Het lettertype bevat een kerningtabel voor basisoptimalisatie, en de ontwikkelaar voegt tracking toe voor styling of accessibility. De kerningtabel wordt eerst toegepast, vervolgens wordt daar tracking bovenop toegevoegd. Bij negatieve tracking (verdichting) kunnen kerningparen ongewenste overlappingen veroorzaken — controleer problematische combinaties.

Positieve en negatieve tracking: wanneer toepassen

Positieve tracking (spatiëring) vergroot de afstand tussen tekens. Wordt toegepast om de leesbaarheid van kleine tekst (10–13pt) te verbeteren, waar tekens visueel samenvloeien bij de standaardafstand. Ook gebruikt in accessibility voor gebruikers met dyslexie — een vergrote interletterafstand vergemakkelijkt het herkennen van letters. Typische waarden: 0.3–1pt voor iOS, 0.02–0.05em voor het web.

Negatieve tracking (verdichting) verkleint de afstand tussen tekens. Wordt toegepast in koppen (vanaf 24pt) en accenttekst, waar een dichte zetting er samenhangend en modern uitziet. Grote corpsen verdragen verdichting goed, omdat de interletterafstanden visueel groot zijn. Typische waarden: van -0.3 tot -1pt. Beperking: bij tracking kleiner dan -1pt kunnen tekens elkaar overlappen, vooral bij paren met uitstekende elementen (fi, fj, TT).

Vuistregel: voor elk corps bestaat er een toegestaan trackingbereik. Hoe groter het lettertype, hoe minder tracking nodig is voor optimale leesbaarheid. Formule: optimale tracking ≈ font-weight * 0.01 – font-size * 0.001. Voor vet lettertype (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84, wat met correctie voor het lettertype ongeveer 0.5pt positieve tracking oplevert.

Tracking voor verschillende tekstsoorten

Body text (14–18pt): tracking is niet nodig of minimaal positief 0.1–0.3pt. Professionele lettertypen bevatten al optimale tussenruimtes voor hoofdtekst. Elke ingreep in de tracking van body text moet worden gerechtvaardigd door ontwerp- of accessibility-eisen. Koppen (20–36pt): negatieve tracking van -0.3 tot -0.8pt toegestaan, afhankelijk van het lettertype en gewicht. Hoofdletters (ALL CAPS): positieve tracking van 0.5–2pt wordt aanbevolen, omdat hoofdletters in kapitalen visueel samenvloeien zonder extra tussenruimte.

Specificiteit van lettertypen: letters met een groteske geometrie (Helvetica, Inter, SF Pro) verdragen negatieve tracking beter dan antiqua-lettertypen met schreven (Times, Georgia, PT Serif). Bij antiqua-lettertypen creëren schreven een extra visuele verbinding tussen letters en maakt verdichting de tekst onleesbaar. Voor antiqua-lettertypen wordt alleen positieve tracking aanbevolen.

Implementatie van tracking op iOS en Android

Op iOS wordt tracking gerealiseerd via hetzelfde .kern-attribuut in NSAttributedString als kerning, maar met een verschil: voor tracking wordt een numerieke waarde opgegeven die verschilt van nil. nil — standaard kerning (uit de lettertypetabel), 0 — kerning uitschakelen, elk ander getal — tracking bovenop de kerningtabel. Dit betekent dat bij het instellen van .kern = 2, alle tekens +2pt interletterafstand krijgen bovenop de ingebouwde kerningparen.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Positieve tracking +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel met tracking
label.attributedText = attributedString

SwiftUI gebruikt de modificator .tracking() voor Text, die CGFloat accepteert. In tegenstelling tot UIKit, wordt tracking in SwiftUI toegepast op de gehele tekst binnen de modificator en kan niet gedeeltelijk zijn zonder opsplitsing in meerdere Text-blokken. SwiftUI verwerkt automatisch de combinatie van kerning en tracking door tracking bovenop de kerningtabel van het lettertype toe te passen.

Android gebruikt de eigenschap letterSpacing in TextView, die wordt ingesteld in em (vermenigvuldiger ten opzichte van de lettergrootte). Waarde 0 — standaard tracking, 0.05 — verhoging met 5% van em, -0.02 — verlaging. In Android werkt letterSpacing als tracking (uniform voor alle tekens), en de kerningtabel van het lettertype wordt automatisch toegepast op het niveau van de Minikin-renderengine.

// In XML-lay-out
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programmatisch in Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose in Android gebruikt de parameter letterSpacing in TextStyle, ingesteld in sp. Bijvoorbeeld, TextStyle(letterSpacing = 0.5.sp) geeft tracking van 0.5 sp. In tegenstelling tot de XML-benadering, stelt Compose in staat om letterSpacing te combineren met andere typografische parameters in een enkel TextStyle-object, wat het maken van designsystemen vereenvoudigt.

Letter-spacing instellen in webontwikkeling

In het web wordt tracking gerealiseerd via de CSS-eigenschap letter-spacing, die elke lengte-eenheid of het sleutelwoord normal accepteert. De waarde normal komt overeen met 0 (zonder extra interletterafstand). De eigenschap wordt overgeërfd, ondersteunt negatieve waarden en kan worden geanimeerd. Volgens de CSS-specificatie wordt letter-spacing na de kerningtabel van het lettertype toegepast.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px: letter-spacing in em schaalt mee bij wijziging van font-size en heeft de voorkeur voor accessibility. px schaalt niet mee en kan tot inconsistenties leiden bij het vergroten van tekst door de browser (Zoom). Aanbeveling: gebruik altijd em voor letter-spacing. Uitzondering — gevallen waarbij tracking vast moet blijven ongeacht het corps, bijvoorbeeld in logo’s.

Animatie van letter-spacing: de eigenschap ondersteunt CSS-transitions en -animations, waarmee vloeiende tekstverschijningseffecten kunnen worden gemaakt. Animaties van letter-spacing: -0.05em naar letter-spacing: 0.01em bij het laden van een kop — een populaire techniek in moderne interfaces. Prestaties: animatie van letter-spacing veroorzaakt reflow (herberekening van de layout), omdat de breedte van het tekstblok verandert. Gebruik transform en opacity voor hoogwaardige animaties waar mogelijk.

Accessibility en tracking in mobiele interfaces

Tracking heeft directe invloed op de leesbaarheid van tekst voor gebruikers met visuele beperkingen en dyslexie. WCAG 2.2 Guideline 1.4.12 (Text Spacing) vereist dat tekst geen inhoud verliest bij het vergroten van interletter-, regel- en alinea-afstanden tot bepaalde waarden. letter-spacing moet een vergroting tot 0.12em kunnen weerstaan zonder inhoudsverlies en overlapping van elementen.

Dyslexie: onderzoek van de British Dyslexia Association toont aan dat het vergroten van letter-spacing tot 0.12em de leessnelheid bij gebruikers met dyslexie met 10–15% verbetert. Dit is echter individueel — sommige gebruikers geven de voorkeur aan de standaardafstand. iOS en Android bieden systeeminstellingen voor accessibility om de interletterafstand te vergroten, die de app moet respecteren.

Regels voor de ontwikkelaar: gebruik geen vaste breedtes/hoogtes die kunnen breken bij het vergroten van letter-spacing. Vermijd overflow: hidden op containers met tekst zonder accessibility-controle. Test de interface met letter-spacing vergroot tot 0.12em op alle schermen. Als het ontwerp breekt — heroverweeg de lay-out, negeer accessibility niet.

Platformondersteuning: iOS vergroot automatisch letter-spacing wanneer de functie Grotere Tekst is ingeschakeld in de toegankelijkheidsinstellingen, als UIFont.preferredFont wordt gebruikt. Android biedt een vergelijkbare optie via FontScale. De ontwikkelaar mag deze instellingen niet uitschakelen. Testscenario: schakel de maximale tekstgrootte in de apparaatinstellingen in en controleer of tracking de lay-out van de interface niet breekt.