Kerning: cos'è e come regolare la spaziatura tra lettere

Cos'è il kerning in tipografia

Il kerning è il processo di regolazione manuale o automatica della distanza tra coppie specifiche di caratteri per eliminare artefatti ottici. Il problema nasce perché ogni lettera ha una geometria unica: A ha un apice, V ha un'inclinazione destra, T ha una traversa larga. Quando queste lettere sono affiancate, la distanza tra i loro contorni appare irregolare, anche se la larghezza impostata è la stessa.

Le tabelle di kerning dei font contengono coppie di caratteri con valori di regolazione preimpostati. Un buon tipo di carattere può avere da 300 a 2000 coppie di kerning. I caratteri professionali — come SF Pro di Apple o Roboto di Google — includono tabelle di kerning meticolosamente elaborate che coprono tutte le possibili combinazioni di lettere latine e cirilliche. Secondo il Fontshop Guide to Kerning, la qualità delle tabelle di kerning è uno dei principali indicatori di un font professionale.

L'effetto visivo del kerning è particolarmente evidente nei titoli, nei loghi e nei testi di grandi dimensioni (24 pt e oltre). Nei testi piccoli (12–14 pt) la spaziatura tra le lettere è più stretta e il kerning è meno percettibile, sebbene funzioni comunque. I browser web e i sistemi operativi mobili applicano il kerning incorporato per impostazione predefinita, ma lo sviluppatore può disabilitarlo o regolarlo per progetti specifici.

Kerning e Tracking: differenze chiave

Gli sviluppatori principianti spesso confondono kerning e tracking, ma questi sono parametri tipografici fondamentalmente diversi. Il kerning lavora a livello di coppie di caratteri e regola la spaziatura solo tra combinazioni specifiche dove la geometria delle lettere crea squilibrio ottico. Il tracking (letter-spacing) modifica l'intervallo tra tutti i caratteri del frammento selezionato in modo uguale — aumentandolo o diminuendolo uniformemente.

Quando si usa il tracking: per migliorare la leggibilità del testo piccolo (tracking positivo), per creare titoli d'accento (tracking negativo), per stilizzare il testo nel design delle interfacce. Il tracking viene impostato come valore numerico e applicato a ogni carattere, comprese le coppie già sottoposte a kerning — le correzioni di kerning vengono preservate, ma viene aggiunto uno spostamento globale sopra di esse.

Regola importante: con tracking negativo (compressione), controlla le coppie di kerning — potrebbero creare sovrapposizioni indesiderate di lettere. In CSS, la proprietà letter-spacing si applica sopra la tabella di kerning del font e con una forte compressione (letter-spacing: -1px) le correzioni di kerning possono causare la fusione dei caratteri.

Implementazione del kerning su iOS con NSAttributedString

Su iOS, il kerning è gestito tramite l'attributo .kern in NSAttributedString. Il valore dell'attributo è un Float, dove un numero positivo aumenta la spaziatura, un numero negativo la diminuisce e 0 disabilita il kerning. Il valore predefinito è nil, il che significa utilizzare la tabella di kerning del font. L'API principale per lavorare con il kerning è NSMutableAttributedString con l'attributo aggiunto a un intervallo di testo.

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

// Abilita kerning (usa tabella font)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Applica a UILabel
label.attributedText = attributedText

Valore predefinito .kern = nil abilita il kerning dalla tabella del font. Se è necessario disabilitare completamente il kerning, impostare .kern = 0. I valori 0.0 e nil sono stati diversi: nil usa la tabella, 0 azzera forzatamente tutte le coppie di kerning. Secondo l'Apple Text Programming Guide, impostare esplicitamente 0 è utile per il testo monospaziato o nei casi in cui il kerning interferisce — ad esempio, nei pulsanti a larghezza fissa.

SwiftUI fornisce il modificatore .kerning() per Text. A differenza di UIKit, in SwiftUI il kerning viene impostato a livello di view, non su una stringa attribuita. Il modificatore accetta un CGFloat e si applica a tutto il testo all'interno del blocco Text. Per il kerning parziale in SwiftUI, si usa una combinazione dell'operatore + su Text e modificatori individuali.

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

Prestazioni: NSAttributedString con un attributo di kerning ricalcola le posizioni dei caratteri durante il rendering. Per il testo statico ciò avviene una volta. Per il testo dinamico (testo che cambia in UICollectionView) — ogni volta che cambia. L'uso di un ampio intervallo con kerning su stringhe lunghe (oltre 500 caratteri) può ridurre gli FPS durante lo scorrimento.

Configurazione del kerning su Android con letterSpacing

Su Android, il kerning è gestito tramite la proprietà letterSpacing in TextView e layout XML. L'attributo è di tipo Float e funge da moltiplicatore della dimensione em del font. Il valore 0 corrisponde al kerning predefinito, i valori positivi aumentano la spaziatura, quelli negativi la diminuiscono. letterSpacing è disponibile a partire da API Level 21 (Android 5.0 Lollipop).

Implementazione tramite SpannableString consente di applicare il kerning a una parte di una stringa invece che all'intero testo. La classe ScaleXSpan o un ReplacementSpan personalizzato viene utilizzato per un controllo preciso. Secondo l'Android Developer Guide, ScaleXSpan scala i caratteri orizzontalmente, simulando cambiamenti nella spaziatura tra caratteri, ma non fornisce un controllo diretto sulle coppie di kerning.

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

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

Limitazione: Android non supporta le tabelle di kerning direttamente — letterSpacing funziona come tracking per tutti i caratteri. Per il kerning a coppie su Android, vengono utilizzati font con tabelle di kerning incorporate (OpenType GPOS feature kern). Il supporto dipende dalla versione del sistema operativo e dal motore di rendering: su Android 10+ viene utilizzato Minikin con supporto completo delle funzionalità OpenType, sulle versioni precedenti HarfBuzz con limitazioni. Raccomandazione: testare la visualizzazione del kerning su dispositivi con Android inferiore a 8.0.

Kerning nello sviluppo web con CSS

Sul web, il kerning è controllato tramite la proprietà CSS font-kerning, che attiva o disattiva le tabelle di kerning incorporate del font. Valori: auto (il browser decide), normal (kerning attivato), none (kerning disattivato). La proprietà è supportata da tutti i browser moderni dal 2016. Secondo MDN Web Docs, font-kerning si applica solo ai font OpenType con una tabella di kerning.

La proprietà CSS letter-spacing è l'analogo del tracking, ma viene utilizzata anche per effetti simili al kerning. A differenza di font-kerning, letter-spacing modifica l'intervallo tra tutti i caratteri uniformemente, senza considerare le coppie di kerning. Quando vengono utilizzate entrambe le proprietà, font-kerning viene applicata per prima, poi letter-spacing aggiunge uno spostamento uniforme sopra.

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

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

Utilità TypeScript per calcolare il letter-spacing ottimale considerando il kerning può analizzare la tabella di kerning del font tramite Canvas API. Ma in pratica, gli sviluppatori web si affidano a font-kerning: normal che nella maggior parte dei casi dà risultati ottimali. La regolazione aggiuntiva di letter-spacing è necessaria solo per accenti di design — ad esempio, nelle landing page con tipografia grande.

Raccomandazioni pratiche per configurare il kerning

Il kerning è uno strumento di regolazione fine e la sua applicazione errata peggiora la leggibilità. Prima regola: non modificare il kerning per il testo del corpo. Le tabelle di kerning dei font professionali contengono già valori ottimali per dimensioni 12–16pt. Interferire con il kerning del testo del corpo porta a irregolarità e rumore visivo.

Seconda regola: per i titoli da 24pt in su, utilizzare kerning positivo (0.5–1.5 pt a seconda del tipo di carattere). Il testo grande richiede più spaziatura tra le lettere per la leggibilità. I font con x-height bassa (ad esempio Didot) richiedono più kerning rispetto ai font con x-height alta (ad esempio Helvetica). Dati di riferimento: nell'app iOS Apple Music, i titoli utilizzano kerning di 0.8 pt.

Terza regola: testare sempre il kerning su stringhe reali, non su Lorem Ipsum. Diverse combinazioni di caratteri producono diversi effetti visivi. Prestare particolare attenzione alle coppie con vocali e consonanti con elementi sporgenti: AV, Te, To, Wa, LT. Con kerning negativo, controllare le coppie fi, fl, fj — in alcuni font possono fondersi senza legatura.

Aspetto di accessibilità: gli utenti con dislessia leggono meglio il testo con un leggero kerning positivo (0.3–0.5 pt). iOS e Android supportano impostazioni di accessibilità che possono sovrascrivere il kerning dell'app. Utilizzare UIFontDescriptor con Dynamic Type e considerare il kerning nelle impostazioni di accessibilità tramite UIAccessibility. Importante: non bloccare le impostazioni di kerning del sistema — questo viola la WCAG 2.2 Linea guida 1.4.12 sull'adattamento del testo.