Kerning: co to jest i jak konfigurować odstęp między literami

Co to jest kerning w typografii

Kerning — to proces ręcznej lub automatycznej korekty odległości między konkretnymi parami znaków w celu wyeliminowania optycznych artefaktów. Problem wynika z tego, że każda litera ma unikalną geometrię: A ma wierzchołek, V — prawe nachylenie, T — szeroką poprzeczkę. Gdy takie litery stoją obok siebie, odległość między ich konturami wydaje się nierównomierna, mimo że odstęp międzyznakowy (set width) jest taki sam.

Tabele kerningowe czcionki zawierają pary znaków z predefiniowanymi wartościami korekty. W dobrej czcionce może być od 300 do 2000 par kerningowych. Profesjonalne fonty — takie jak SF Pro od Apple czy Roboto od Google — zawierają starannie opracowane tabele kerningowe obejmujące wszystkie możliwe kombinacje liter alfabetu łacińskiego i cyrylicy. Według Fontshop Guide to Kerning, jakość tabel kerningowych to jeden z głównych wyznaczników profesjonalnej czcionki.

Efekt wizualny kerningu jest szczególnie widoczny w nagłówkach, logotypach i tekście o dużych rozmiarach (od 24 pt). W małym tekście (12-14 pt) odległości między literami są niewielkie, a kerning jest mniej zauważalny, choć nadal działa. Przeglądarki internetowe i mobilne systemy operacyjne domyślnie stosują wbudowany kerning, ale programista może go wyłączyć lub dostosować do konkretnego projektu.

Kerning a tracking: kluczowe różnice

Początkujący programiści często mylą kerning i tracking, ale są to zasadniczo różne parametry typografii. Kerning działa na poziomie par znaków i koryguje odległość tylko między konkretnymi kombinacjami, gdzie geometria liter tworzy optyczny dysbalans. Tracking (letter-spacing) zmienia odstęp między wszystkimi znakami zaznaczonego fragmentu jednakowo — zwiększając lub zmniejszając go równomiernie.

Kiedy stosuje się tracking: w celu poprawy czytelności małego tekstu (tracking dodatni), do tworzenia akcentowanych nagłówków (tracking ujemny), do stylizacji tekstu w projektowaniu interfejsów. Tracking określa się wartością liczbową i stosuje do każdego znaku, w tym już skernowanych par — korekty kerningowe są zachowane, ale na nie nakłada się ogólne przesunięcie.

Ważna zasada: przy ujemnym trackingu (ściskaniu) zwracaj uwagę na pary kerningowe — mogą tworzyć niepożądane nakładanie się liter. W CSS właściwość letter-spacing jest stosowana na tabelę kerningową czcionki, a przy silnym ściskaniu (letter-spacing: -1px) korekty kerningowe mogą prowadzić do zlewania się znaków.

Implementacja kerningu w iOS przez NSAttributedString

Na iOS kerning jest zarządzany przez atrybut .kern w NSAttributedString. Wartość atrybutu to Float, gdzie liczba dodatnia zwiększa odstęp, ujemna zmniejsza, a 0 wyłącza kerning. Wartość domyślna to nil, co oznacza użycie tabeli kerningowej czcionki. Główne API do pracy z kerningiem to NSMutableAttributedString z dodaniem atrybutu do zakresu tekstu.

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

// Włącz kerning (używa tabeli czcionki)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Zastosuj do UILabel
label.attributedText = attributedText

Wartość domyślna .kern = nil włącza kerning z tabeli czcionki. Jeśli chcesz całkowicie wyłączyć kerning — ustaw .kern = 0. Wartość 0.0 i nil to różne stany: nil używa tabeli, 0 wymusza zerowanie wszystkich par kerningowych. Według Apple Text Programming Guide, jawne określenie 0 jest przydatne dla tekstu o stałej szerokości lub w przypadkach, gdy kerning przeszkadza — na przykład w przyciskach o stałej szerokości.

SwiftUI udostępnia modyfikator .kerning() dla Text. W przeciwieństwie do UIKit, w SwiftUI kerning jest ustawiany na poziomie widoku, a nie atrybuowanej strings. Modyfikator przyjmuje CGFloat i jest stosowany do całego tekstu wewnątrz bloku Text. Do częściowego kerningu w SwiftUI używa się kombinacji operatora + dla Text i oddzielnych modyfikatorów.

struct KerningView: View {
    var body: some View {
        Text("Nagłówek z kerningiem")
            .kerning(1.0)
            .font(.title)
    }
}

Wydajność: NSAttributedString z atrybutem kerningu przelicza pozycje znaków podczas renderowania. W przypadku tekstu statycznego odbywa się to raz. W przypadku dynamicznego (zmieniający się tekst w UICollectionView) — za każdym razem przy zmianie. Użycie dużego zakresu z kerningiem w długich stringach (ponad 500 znaków) może obniżyć FPS podczas przewijania.

Konfiguracja kerningu na Androidzie przez letterSpacing

Na Androidzie kerning jest zarządzany przez właściwość letterSpacing w TextView i układzie XML. Atrybut ma typ Float i działa jako mnożnik rozmiaru czcionki w em. Wartość 0 odpowiada domyślnemu kerningowi, dodatnia — zwiększa odstęp, ujemna — zmniejsza. letterSpacing jest dostępny od API Level 21 (Android 5.0 Lollipop).

Implementacja przez SpannableString pozwala zastosować kerning do części stringa, a nie do całego tekstu. Używana jest klasa ScaleXSpan lub niestandardowy ReplacementSpan dla precyzyjnej kontroli. Według Android Developer Guide, ScaleXSpan skaluje znaki na szerokość, symulując zmianę odstępu międzyznakowego, ale nie daje bezpośredniej kontroli nad parami kerningowymi.

// W układzie XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programowo w Kotlinie
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Ograniczenie: Android nie obsługuje bezpośrednio tabel kerningowych — letterSpacing działa jak tracking dla wszystkich znaków. Do kerningu par na Androidzie używa się czcionek z wbudowanymi tabelami kerningowymi (OpenType GPOS feature kern). Obsługa zależy od wersji systemu operacyjnego i silnika renderującego: na Androidzie 10+ używany jest Minikin z pełną obsługą funkcji OpenType, na wcześniejszych — HarfBuzz z ograniczeniami. Zalecenie: sprawdzaj wyświetlanie kerningu na urządzeniach z Androidem poniżej 8.0.

Kerning w tworzeniu stron internetowych przez CSS

W sieci kerning jest zarządzany przez właściwość CSS font-kerning, która włącza lub wyłącza wbudowane tabele kerningowe czcionki. Wartości: auto (przeglądarka decyduje), normal (kerning włączony), none (kerning wyłączony). Właściwość jest obsługiwana przez wszystkie nowoczesne przeglądarki od 2016 roku. Według MDN Web Docs, font-kerning ma zastosowanie tylko do czcionek OpenType z tabelą kerningową.

Właściwość CSS letter-spacing — to odpowiednik trackingu, ale jest używana również do efektów podobnych do kerningu. W przeciwieństwie do font-kerning, letter-spacing zmienia odstęp między wszystkimi znakami równomiernie, bez uwzględniania par kerningowych. Przy użyciu obu właściwości font-kerning jest stosowany jako pierwszy, następnie letter-spacing dodaje równomierne przesunięcie na wierzch.

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

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

Narzędzie TypeScript do obliczania optymalnego letter-spacing z uwzględnieniem kerningu może analizować tabelę kerningową czcionki przez Canvas API. Jednak w praktyce programiści webowi polegają na font-kerning: normal w większości przypadków daje optymalny wynik. Dodatkowa konfiguracja letter-spacing jest wymagana tylko dla akcentów projektowych — na przykład na landing page'ach z dużą typografią.

Praktyczne zalecenia dotyczące konfiguracji kerningu

Kerning to narzędzie precyzyjnej regulacji, a jego nieprawidłowe zastosowanie pogarsza czytelność. Pierwsza zasada: nie zmieniaj kerningu dla tekstu głównego (body text). Tabele kerningowe profesjonalnych czcionek już zawierają optymalne wartości dla rozmiarów 12-16pt. Ingierencja w kerning tekstu głównego prowadzi do nierównomierności i szumu wizualnego.

Druga zasada: dla nagłówków od 24pt używaj dodatniego kerningu (0.5-1.5 pt w zależności od fontu). Duży tekst wymaga większej przestrzeni między literami dla czytelności. Czcionki o niskiej wysokości x-height (np. Didot) wymagają większego kerningu niż czcionki o wysokiej x-height (np. Helvetica). Dane testowe: w aplikacji iOS Apple Music nagłówki używają kerningu 0.8 pt.

Trzecia zasada: zawsze sprawdzaj kerning na rzeczywistych stringach, a nie na testowym Lorem Ipsum. Różne kombinacje znaków dają różny efekt wizualny. Zwróć szczególną uwagę na pary z samogłoskami i spółgłoskami z wystającymi elementami: AV, Te, To, Wa, LT. Przy ujemnym kerningu obserwuj pary fi, fl, fj — w niektórych czcionkach mogą się zlewać bez ligatury.

Aspekt dostępności: użytkownicy z dysleksją lepiej czytają tekst z niewielkim dodatnim kerningiem (0.3-0.5 pt). iOS i Android obsługują ustawienia dostępności, które mogą nadpisywać kerning aplikacji. Używaj UIFontDescriptor z Dynamic Type i uwzględniaj w ustawieniach dostępności kerning przez UIAccessibility. Ważne: nie blokuj systemowych ustawień kerningu — to narusza WCAG 2.2 Guideline 1.4.12 dotyczącą adaptacji tekstu.