Kerning: ce este și cum se configurează intervalul dintre litere

Ce este kerningul în tipografie

Kerningul — este procesul de ajustare manuală sau automată a distanței dintre perechi specifice de caractere pentru eliminarea artefactelor optice. Problema apare din cauza faptului că fiecare literă are o geometrie unică: A are vârf, V — înclinare dreaptă, T — bară transversală largă. Când astfel de litere stau una lângă alta, distanța dintre contururile lor pare neuniformă, deși intervalul dintre caractere (set width) este același.

Tabelele de kerning ale fontului conțin perechi de caractere cu valori de ajustare predefinite. Într-un font bun pot fi de la 300 până la 2000 de perechi de kerning. Fonturile profesionale — precum SF Pro de la Apple sau Roboto de la Google — includ tabele de kerning atent elaborate care acoperă toate combinațiile posibile de litere latine și chirilice. Conform Fontshop Guide to Kerning, calitatea tabelelor de kerning este unul dintre principalele semne ale unui font profesional.

Efectul vizual al kerningului este deosebit de vizibil în titluri, logo-uri și text de dimensiuni mari (de la 24 pt). În textul mic (12-14 pt) distanțele dintre litere sunt mici, iar kerningul este mai puțin vizibil, deși continuă să funcționeze. Browserele web și sistemele de operare mobile aplică implicit kerningul încorporat, dar dezvoltatorul îl poate dezactiva sau ajusta pentru un design specific.

Kerning și tracking: diferențe cheie

Dezvoltatorii începători confundă adesea kerningul și trackingul, dar aceștia sunt parametri fundamental diferiți ai tipografiei. Kerningul funcționează la nivelul perechilor de caractere și ajustează distanța doar între combinații specifice unde geometria literelor creează un dezechilibru optic. Trackingul (letter-spacing) modifică intervalul dintre toate caracterele fragmentului selectat în mod egal — mărindu-l sau micșorându-l uniform.

Când se aplică trackingul: pentru îmbunătățirea lizibilității textului mic (tracking pozitiv), pentru crearea titlurilor accentuate (tracking negativ), pentru stilizarea textului în designul interfețelor. Trackingul se stabilește printr-o valoare numerică și se aplică fiecărui caracter, inclusiv perechilor deja kerningate — ajustările de kerning se păstrează, dar peste ele se adaugă o deplasare generală.

Regulă importantă: la tracking negativ (comprimare) urmăriți perechile de kerning — ele pot crea suprapuneri nedorite ale literelor. În CSS proprietatea letter-spacing se aplică peste tabela de kerning a fontului, iar la comprimare puternică (letter-spacing: -1px) ajustările de kerning pot duce la fuziunea caracterelor.

Implementarea kerningului în iOS prin NSAttributedString

Pe iOS kerningul este gestionat prin atributul .kern în NSAttributedString. Valoarea atributului este Float, unde un număr pozitiv mărește intervalul, negativ îl micșorează, iar 0 dezactivează kerningul. Valoarea implicită este nil, ceea ce înseamnă utilizarea tabelei de kerning a fontului. API-ul principal pentru lucrul cu kerningul este NSMutableAttributedString cu adăugarea atributului la un interval de text.

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

// Activează kerningul (folosește tabela fontului)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Aplică la UILabel
label.attributedText = attributedText

Valoarea implicită .kern = nil activează kerningul din tabela fontului. Dacă trebuie să dezactivați complet kerningul — setați .kern = 0. Valorile 0.0 și nil sunt stări diferite: nil utilizează tabela, 0 forțează zero pentru toate perechile de kerning. Conform Apple Text Programming Guide, specificarea explicită a lui 0 este utilă pentru text monospace sau cazuri în care kerningul deranjează — de exemplu, în butoane cu lățime fixă.

SwiftUI oferă modificatorul .kerning() pentru Text. Spre deosebire de UIKit, în SwiftUI kerningul se stabilește la nivel de vizualizare, nu de șir atribuit. Modificatorul acceptă CGFloat și se aplică întregului text din interiorul blocului Text. Pentru kerning parțial în SwiftUI se utilizează combinația operatorului + pentru Text și a modificatorilor separați.

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

Performanță: NSAttributedString cu atributul de kerning recalculează pozițiile caracterelor la randare. Pentru text static aceasta se întâmplă o singură dată. Pentru text dinamic (text în schimbare în UICollectionView) — de fiecare dată la modificare. Utilizarea unui interval mare cu kerning în șiruri lungi (peste 500 de caractere) poate reduce FPS-ul la derulare.

Configurarea kerningului pe Android prin letterSpacing

Pe Android kerningul este gestionat prin proprietatea letterSpacing în TextView și în layout-ul XML. Atributul are tipul Float și funcționează ca un multiplicator al dimensiunii fontului în em. Valoarea 0 corespunde kerningului implicit, pozitivă — mărește intervalul, negativă — micșorează. letterSpacing este disponibil începând cu API Level 21 (Android 5.0 Lollipop).

Implementarea prin SpannableString permite aplicarea kerningului la o parte a șirului, nu la întregul text. Se utilizează clasa ScaleXSpan sau un ReplacementSpan personalizat pentru control precis. Conform Android Developer Guide, ScaleXSpan scalează caracterele în lățime, simulând modificarea intervalului dintre caractere, dar nu oferă control direct asupra perechilor de kerning.

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

// Programatic în Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Limitare: Android nu suportă tabelele de kerning direct — letterSpacing funcționează ca tracking pentru toate caracterele. Pentru kerning pe perechi pe Android se utilizează fonturi cu tabele de kerning încorporate (OpenType GPOS feature kern). Suportul depinde de versiunea sistemului de operare și de motorul de randare: pe Android 10+ se utilizează Minikin cu suport complet pentru funcțiile OpenType, pe versiunile mai vechi — HarfBuzz cu limitări. Recomandare: verificați afișarea kerningului pe dispozitive cu Android sub 8.0.

Kerningul în dezvoltarea web prin CSS

În web kerningul este gestionat prin proprietatea CSS font-kerning, care activează sau dezactivează tabelele de kerning încorporate ale fontului. Valori: auto (browserul decide), normal (kerning activat), none (kerning dezactivat). Proprietatea este suportată de toate browserele moderne începând cu 2016. Conform MDN Web Docs, font-kerning se aplică doar fonturilor OpenType cu tabelă de kerning.

Proprietatea CSS letter-spacing — este analogul trackingului, dar este folosită și pentru efecte asemănătoare kerningului. Spre deosebire de font-kerning, letter-spacing modifică intervalul dintre toate caracterele uniform, fără a ține cont de perechile de kerning. La utilizarea ambelor proprietăți, font-kerning se aplică primul, apoi letter-spacing adaugă o deplasare uniformă peste.

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

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

Utilitarul TypeScript pentru calcularea letter-spacing-ului optim ținând cont de kerning poate analiza tabela de kerning a fontului prin Canvas API. Dar în practică, dezvoltatorii web se bazează pe font-kerning: normal în majoritatea cazurilor oferă un rezultat optim. Configurarea suplimentară a letter-spacing-ului este necesară doar pentru accente de design — de exemplu, pe pagini de destinație cu tipografie mare.

Recomandări practice pentru configurarea kerningului

Kerningul este un instrument de reglare fină, iar aplicarea sa incorectă degradează lizibilitatea. Prima regulă: nu modificați kerningul pentru textul principal (body text). Tabelele de kerning ale fonturilor profesionale conțin deja valori optime pentru dimensiunile 12-16pt. Intervenția în kerningul textului principal duce la neuniformitate și zgomot vizual.

A doua regulă: pentru titluri de la 24pt utilizați kerning pozitiv (0.5-1.5 pt în funcție de font). Textul mare necesită mai mult spațiu între litere pentru lizibilitate. Fonturile cu x-height scăzută (de exemplu, Didot) necesită mai mult kerning decât fonturile cu x-height ridicată (de exemplu, Helvetica). Date de test: în aplicația iOS Apple Music, titlurile folosesc kerning de 0.8 pt.

A treia regulă: verificați întotdeauna kerningul pe șiruri reale, nu pe Lorem Ipsum de test. Diferite combinații de caractere dau efecte vizuale diferite. Acordați o atenție deosebită perechilor cu vocale și consoane cu elemente proeminente: AV, Te, To, Wa, LT. La kerning negativ urmăriți perechile fi, fl, fj — în unele fonturi se pot fuziona fără ligatură.

Aspect de accesibilitate: utilizatorii cu dislexie citesc mai bine textul cu un mic kerning pozitiv (0.3-0.5 pt). iOS și Android suportă setări de accesibilitate care pot suprascrie kerningul aplicației. Utilizați UIFontDescriptor cu Dynamic Type și țineți cont de kerning în setările de accesibilitate prin UIAccessibility. Important: nu blocați setările sistemice de kerning — aceasta încalcă WCAG 2.2 Guideline 1.4.12 privind adaptarea textului.