Tracking nello sviluppo mobile — essenza e configurazione della distanza tra caratteri

Cos’è il tracking in tipografia

Tracking è la regolazione della distanza tra caratteri, applicata uniformemente a tutti i caratteri di un blocco di testo. A differenza del kerning, dove ogni coppia di caratteri riceve una regolazione individuale basata sulla tabella di kerning del font, il tracking viene impostato come un singolo valore numerico per l’intero intervallo. Il tracking positivo aumenta l’intervallo (spaziatura espansa), il tracking negativo lo riduce (spaziatura condensata).

Il termine proviene dalla tipografia metallica, dove la spaziatura tra caratteri veniva regolata dalla distanza fisica tra i tipi. Nella tipografia digitale, il tracking viene applicato sopra la tabella di kerning: prima il font applica le sue coppie di kerning incorporate, poi il sistema aggiunge un tracking uniforme a tutti i caratteri. L’intervallo risultante = kerning + tracking, cosa importante da considerare quando si condensa aggressivamente il testo.

Unità di misura: il tracking può essere specificato in unità assolute (punti, pixel, millimetri) e relative (em, percentuale della dimensione del font). Nello sviluppo mobile, il tracking viene tipicamente specificato in punti (iOS) o sp (Android) come valori assoluti, sul web in em come valori relativi. Le unità relative sono preferibili per l’accessibilità perché si scalano quando l’utente modifica la dimensione del font.

Tracking e kerning: differenze fondamentali

La confusione tra tracking e kerning è uno degli errori più comuni tra designer e sviluppatori principianti. Il kerning funziona a livello micro — regola l’intervallo tra coppie di caratteri specifiche (AV, Te, To) in base alla loro geometria. Il tracking funziona a livello macro — sposta uniformemente tutti i caratteri di un frammento senza considerare la loro forma.

Effetto visivo: con il kerning, le distanze tra diverse coppie di caratteri variano — tra A e V è minore che tra A e I, perché le forme delle lettere si compensano a vicenda. Con il tracking, tutte le distanze sono uguali — tra A e V, A e I, T e o — lo stesso spostamento ovunque. Questo rende il tracking uno strumento di regolazione globale e il kerning uno strumento di regolazione fine.

Uso combinato: nella tipografia delle interfacce, tracking e kerning vengono usati insieme. Il font include una tabella di kerning per l’ottimizzazione di base, e lo sviluppatore aggiunge il tracking per lo styling o l’accessibilità. La tabella di kerning viene applicata per prima, poi il tracking viene aggiunto sopra. Con il tracking negativo (condensazione), le coppie di kerning possono creare sovrapposizioni indesiderate — verificate le combinazioni problematiche.

Tracking positivo e negativo: quando usarli

Tracking positivo aumenta la distanza tra i caratteri. Viene usato per migliorare la leggibilità del testo piccolo (10–13pt), dove i caratteri si fondono visivamente con la spaziatura standard. Viene anche usato nell’accessibilità per utenti con dislessia — l’aumento della spaziatura tra caratteri facilita il riconoscimento delle lettere. Valori tipici: 0.3–1pt per iOS, 0.02–0.05em per il web.

Tracking negativo riduce la distanza tra i caratteri. Viene usato nei titoli (da 24pt) e nel testo d’accento, dove il testo denso appare coeso e moderno. Le dimensioni grandi sopportano bene la condensazione perché le distanze tra caratteri sono visivamente grandi. Valori tipici: da -0.3 a -1pt. Limitazione: con tracking inferiore a -1pt, i caratteri possono sovrapporsi, specialmente nelle coppie con elementi sporgenti (fi, fj, TT).

Regola empirica: per ogni dimensione di font esiste un intervallo di tracking accettabile. Più grande è il font, minore è il tracking necessario per una leggibilità ottimale. Formula: tracking ottimale ≈ font-weight × 0.01 − font-size × 0.001. Per un font grassetto (weight 700) di 16pt: 700 × 0.01 − 16 × 0.001 = 6,84, che aggiustato per il tipo di carattere dà circa 0.5pt di tracking positivo.

Tracking per diversi tipi di testo

Testo corpo (14–18pt): tracking non necessario o minimo positivo 0.1–0.3pt. I font professionali contengono già una spaziatura ottimale per il testo corpo. Qualsiasi intervento nel tracking del testo corpo deve essere giustificato da esigenze di design o accessibilità. Titoli (20–36pt): tracking negativo da -0.3 a -0.8pt è accettabile a seconda del tipo di carattere e del peso. Maiuscole (ALL CAPS): si raccomanda un tracking positivo di 0.5–2pt, poiché le lettere maiuscole in caps si fondono visivamente senza spaziatura aggiuntiva.

Specificità dei caratteri: i font con geometria grottesca (Helvetica, Inter, SF Pro) sopportano meglio il tracking negativo rispetto ai caratteri con grazie (Times, Georgia, PT Serif). Nei font con grazie, le grazie creano connessioni visive aggiuntive tra le lettere e la condensazione rende il testo illeggibile. Per i caratteri con grazie, si raccomanda solo il tracking positivo.

Implementazione del tracking su iOS e Android

Su iOS, il tracking viene implementato attraverso lo stesso attributo .kern in NSAttributedString del kerning, con una differenza: per il tracking viene specificato un valore numerico diverso da nil. nil significa kerning predefinito (dalla tabella del font), 0 disabilita il kerning, qualsiasi altro numero significa tracking sopra la tabella di kerning. Ciò significa che quando .kern = 2 viene impostato, tutti i caratteri ricevono +2pt di spaziatura tra caratteri sopra le coppie di kerning incorporate.

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

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

// UILabel con tracking
label.attributedText = attributedString

SwiftUI usa il modificatore .tracking() su Text, che accetta CGFloat. A differenza di UIKit, il tracking di SwiftUI si applica a tutto il testo all’interno del modificatore e non può essere parziale senza suddividerlo in più blocchi Text. SwiftUI gestisce automaticamente la combinazione di kerning e tracking, applicando il tracking sopra la tabella di kerning del font.

Android usa la proprietà letterSpacing in TextView, specificata in em (moltiplicatore relativo alla dimensione del font). Un valore di 0 significa tracking predefinito, 0.05 significa un aumento del 5% di em, -0.02 significa una diminuzione. In Android, letterSpacing funziona come tracking (uniforme per tutti i caratteri), mentre la tabella di kerning del font viene applicata automaticamente a livello del motore di rendering Minikin.

// Nel 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" />

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

Compose in Android usa il parametro letterSpacing in TextStyle, specificato in sp. Ad esempio, TextStyle(letterSpacing = 0.5.sp) dà un tracking di 0.5 sp. A differenza dell’approccio XML, Compose permette di combinare letterSpacing con altri parametri tipografici in un singolo oggetto TextStyle, semplificando la creazione di sistemi di design.

Configurazione di letter-spacing nello sviluppo web

Sul web, il tracking viene implementato attraverso la proprietà CSS letter-spacing, che accetta qualsiasi unità di lunghezza o la parola chiave normal. Il valore normal corrisponde a 0 (nessuna spaziatura aggiuntiva tra caratteri). La proprietà viene ereditata, supporta valori negativi e può essere animata. Secondo la Specifica CSS, letter-spacing viene applicato dopo la tabella di kerning del font.

/* 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 si scala quando il font-size cambia ed è preferibile per l’accessibilità. px non si scala e può causare incoerenze quando il browser ingrandisce il testo. Raccomandazione: utilizzate sempre em per letter-spacing. L’eccezione sono i casi in cui il tracking deve rimanere fisso indipendentemente dalla dimensione, come nei loghi.

Animazione di letter-spacing: la proprietà supporta transizioni e animazioni CSS, consentendo effetti fluidi di rivelazione del testo. Animare da letter-spacing: -0.05em a letter-spacing: 0.01em durante il caricamento di un titolo è una tecnica popolare nelle interfacce moderne. Prestazioni: animare letter-spacing causa reflow (ricalcolo del layout) perché cambia la larghezza del testo. Utilizzate transform e opacity per animazioni ad alte prestazioni quando possibile.

Accessibilità e tracking nelle interfacce mobili

Il tracking influisce direttamente sulla leggibilità del testo per utenti con disabilità visive e dislessia. La linea guida WCAG 2.2 1.4.12 (Spaziatura del testo) richiede che il testo non perda contenuto quando la spaziatura tra caratteri, righe e paragrafi viene aumentata a determinati valori. letter-spacing deve sopportare un aumento a 0.12em senza taglio del contenuto o sovrapposizione di elementi.

Dislessia: ricerche della British Dyslexia Association mostrano che aumentare letter-spacing a 0.12em migliora la velocità di lettura negli utenti con dislessia del 10–15%. Tuttavia, questo è individuale — alcuni utenti preferiscono la spaziatura standard. iOS e Android forniscono impostazioni di accessibilità di sistema per aumentare la spaziatura tra caratteri che l’applicazione deve rispettare.

Regole per lo sviluppatore: non utilizzate larghezze/altezze fisse che potrebbero rompersi quando letter-spacing aumenta. Evitate overflow: hidden sui contenitori di testo senza verifica dell’accessibilità. Testate l’interfaccia con letter-spacing aumentato a 0.12em su tutti gli schermi. Se il design si rompe, rivedete il layout piuttosto che ignorare l’accessibilità.

Supporto di piattaforma: iOS aumenta automaticamente letter-spacing quando la funzione Testo più grande viene attivata nelle impostazioni di accessibilità, se viene utilizzato UIFont.preferredFont. Android offre un’opzione simile tramite FontScale. Lo sviluppatore non deve disabilitare queste impostazioni. Scenario di test: attivate la dimensione massima del testo nelle impostazioni del dispositivo e verificate che il tracking non rompa il layout dell’interfaccia.