Tracking în dezvoltarea mobilă — esența și ajustarea distanței dintre caractere

Ce este tracking-ul în tipografie

Tracking (tracking, spațiere) — este modificarea distanței dintre caractere aplicată uniform tuturor caracterelor unui bloc de text. Spre deosebire de kerning, unde fiecare pereche de caractere primește o corecție individuală pe baza tabelului de kerning al fontului, tracking-ul este definit de o singură valoare numerică pentru întregul interval. Tracking-ul pozitiv mărește intervalul (spațiere), cel negativ — îl reduce (compactare).

Termenul provine din tipografia metalică, unde intervalul dintre caractere era reglat prin distanța fizică dintre litere. În tipografia digitală, tracking-ul se aplică peste tabelul de kerning: mai întâi fontul aplică perechile de kerning încorporate, apoi sistemul adaugă tracking uniform tuturor caracterelor. Intervalul rezultat = kerning + tracking, ceea ce trebuie luat în considerare la compactarea agresivă a textului.

Unități de măsură: tracking-ul poate fi setat în unități absolute (puncte, pixeli, milimetri) și relative (em, procent din dimensiunea fontului). în dezvoltarea mobilă, tracking-ul se setează de obicei în puncte (iOS) sau sp (Android) ca valori absolute, iar în web — în em ca valori relative. Unitățile relative sunt preferate pentru accessibility, deoarece se scalează la modificarea dimensiunii fontului de către utilizator.

Tracking și kerning: diferențe fundamentale

Confuzia dintre tracking și kerning — una dintre cele mai frecvente greșeli ale designerilor și dezvoltatorilor începători. Kerning-ul lucrează la micronivel — corectează intervalul dintre perechi specifice de caractere (AV, Te, To) pe baza geometriei lor. Tracking-ul lucrează la macronivel — deplasează uniform toate caracterele fragmentului, fără a ține cont de forma lor.

Efect vizual: la kerning, distanțele dintre diferite perechi de caractere diferă — între A și V este mai mică decât între A și I, deoarece formele literelor se compensează reciproc. La tracking, toate distanțele sunt identice — între A și V, A și I, T și o — peste tot aceeași deplasare. Aceasta face din tracking un instrument de reglare globală, iar din kerning — un instrument de reglaj fin.

Utilizare combinată: în tipografia de interfețe, tracking-ul și kerning-ul se aplică împreună. Fontul conține un tabel de kerning pentru optimizarea de bază, iar dezvoltatorul adaugă tracking pentru stilizare sau accessibility. Tabelul de kerning se aplică mai întâi, apoi peste el se adaugă tracking-ul. La tracking negativ (compactare), perechile de kerning pot crea suprapuneri nedorite — verificați combinațiile problematice.

Tracking pozitiv și negativ: când să aplici

Tracking-ul pozitiv (spațierea) mărește distanța dintre caractere. Se aplică pentru îmbunătățirea lizibilității textului mic (10–13pt), unde caracterele se îmbină vizual la intervalul standard. De asemenea, este folosit în accessibility pentru utilizatorii cu dislexie — intervalul mărit dintre caractere facilitează recunoașterea literelor. Valori tipice: 0.3–1pt pentru iOS, 0.02–0.05em pentru web.

Tracking-ul negativ (compactarea) reduce distanța dintre caractere. Se aplică în titluri (de la 24pt) și text accentuat, unde textul dens arată coeziv și modern. Corpurile mari de literă tolerează bine compactarea, deoarece distanțele dintre caractere sunt vizual mari. Valori tipice: de la -0.3 la -1pt. Limitare: la tracking mai mic de -1pt, caracterele se pot suprapune, în special în perechi cu elemente proeminente (fi, fj, TT).

Regulă empirică: pentru fiecare corp de literă există un interval de tracking permis. Cu cât fontul este mai mare, cu atât este nevoie de mai puțin tracking pentru o lizibilitate optimă. Formulă: tracking optim ≈ font-weight * 0.01 – font-size * 0.001. Pentru font bold (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84, ceea ce cu ajustare pentru garnitură dă aproximativ 0.5pt de tracking pozitiv.

Tracking pentru diferite tipuri de text

Body text (14–18pt): tracking-ul nu este necesar sau minim pozitiv 0.1–0.3pt. Fonturile profesionale conțin deja intervale optime pentru textul principal. Orice intervenție în tracking-ul body text trebuie justificată prin cerințe de design sau accessibility. Titluri (20–36pt): tracking negativ admis de la -0.3 la -0.8pt în funcție de garnitură și greutate. Majuscule (ALL CAPS): se recomandă tracking pozitiv 0.5–2pt, deoarece literele mari în majuscule se îmbină vizual fără interval suplimentar.

Specificul garniturilor: fonturile cu geometrie grotesc (Helvetica, Inter, SF Pro) tolerează mai bine tracking-ul negativ decât garniturile antice cu serife (Times, Georgia, PT Serif). La fonturile antice, serifele creează o legătură vizuală suplimentară între litere, iar compactarea face textul ilizibil. Pentru garniturile antice, se recomandă doar tracking pozitiv.

Implementarea tracking-ului pe iOS și Android

Pe iOS, tracking-ul este realizat prin același atribut .kern din NSAttributedString ca și kerning-ul, dar cu o diferență: pentru tracking se specifică o valoare numerică diferită de nil. nil — kerning implicit (din tabelul fontului), 0 — dezactivarea kerning-ului, orice altă valoare — tracking peste tabelul de kerning. Aceasta înseamnă că la setarea .kern = 2, toate caracterele primesc +2pt interval între caractere peste perechile de kerning încorporate.

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

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

// UILabel cu tracking
label.attributedText = attributedString

SwiftUI folosește modificatorul .tracking() pentru Text, care acceptă CGFloat. Spre deosebire de UIKit, tracking-ul în SwiftUI se aplică la întregul text din interiorul modificatorului și nu poate fi parțial fără împărțirea în mai multe blocuri Text. SwiftUI gestionează automat combinația dintre kerning și tracking, aplicând tracking-ul peste tabelul de kerning al fontului.

Android folosește proprietatea letterSpacing în TextView, care este setată în em (multiplicator relativ la dimensiunea fontului). Valoarea 0 — tracking implicit, 0.05 — creștere cu 5% din em, -0.02 — reducere. În Android, letterSpacing funcționează ca tracking (uniform pentru toate caracterele), iar tabelul de kerning al fontului se aplică automat la nivelul motorului de randare Minikin.

// În layout XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programatic în Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose în Android folosește parametrul letterSpacing în TextStyle, setat în sp. De exemplu, TextStyle(letterSpacing = 0.5.sp) oferă tracking de 0.5 sp. Spre deosebire de abordarea XML, Compose permite combinarea letterSpacing cu alți parametri tipografici într-un singur obiect TextStyle, ceea ce simplifică crearea sistemelor de design.

Configurarea letter-spacing în dezvoltarea web

în web, tracking-ul este realizat prin proprietatea CSS letter-spacing, care acceptă orice unități de lungime sau cuvântul-cheie normal. Valoarea normal corespunde lui 0 (fără interval suplimentar între caractere). Proprietatea se moștenește, suportă valori negative și poate fi animată. Conform Specificației CSS, letter-spacing se aplică după tabelul de kerning al fontului.

/* 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 înem se scalează la modificarea font-size și este preferat pentru accessibility. px nu se scalează și poate duce la neconcordanțe la mărirea textului de către browser (Zoom). Recomandare: folosiți întotdeauna em pentru letter-spacing. Excepție — cazurile când tracking-ul trebuie să rămână fix indiferent de corp, de exemplu, în logo-uri.

Animația letter-spacing: proprietatea suportă CSS transitions și animations, permițând crearea de efecte fluide de apariție a textului. Animația de la letter-spacing: -0.05em la letter-spacing: 0.01em la încărcarea unui titlu — o tehnică populară în interfețele moderne. Performanță: animația letter-spacing cauzează reflow (recalcularea layout-ului), deoarece modifică lățimea textului. Folosiți transform și opacity pentru animații de înaltă performanță acolo unde este posibil.

Accessibility și tracking în interfețele mobile

Tracking-ul influențează direct lizibilitatea textului pentru utilizatorii cu deficiențe de vedere și dislexie. WCAG 2.2 Guideline 1.4.12 (Text Spacing) cere ca textul să nu-și piardă conținutul la creșterea intervalelor dintre caractere, dintre rânduri și dintre paragrafe până la anumite valori. letter-spacing trebuie să suporte creșterea până la 0.12em fără tăierea conținutului și suprapunerea elementelor.

Dislexia: cercetările British Dyslexia Association arată că creșterea letter-spacing până la 0.12em îmbunătățește viteza de citire la utilizatorii cu dislexie cu 10–15%. Cu toate acestea, este individual — unii utilizatori preferă intervalul standard. iOS și Android oferă setări sistemice de accessibility pentru creșterea intervalului dintre caractere, pe care aplicația trebuie să le respecte.

Reguli pentru dezvoltator: nu folosiți lățimi/înălțimi fixe care s-ar putea rupe la creșterea letter-spacing. Evitați overflow: hidden pe containerele cu text fără verificarea accessibility. Testați interfața cu letter-spacing mărit până la 0.12em pe toate ecranele. Dacă designul se strică — reconsiderați layout-ul, nu ignorați accessibility.

Suport platformă: iOS mărește automat letter-spacing la activarea funcției Text Mai Mare în setările de accesibilitate, dacă se folosește UIFont.preferredFont. Android oferă o opțiune similară prin FontScale. Dezvoltatorul nu trebuie să dezactiveze aceste setări. Scenariu de test: activați dimensiunea maximă a textului în setările dispozitivului și verificați că tracking-ul nu strică layout-ul interfeței.