Kerning: co to je a jak se nastavuje mezera mezi písmeny

Co je kerning v typografii

Kerning — je proces ruční nebo automatické úpravy vzdálenosti mezi konkrétními páry znaků pro odstranění optických artefaktů. Problém vzniká proto, že každé písmeno má jedinečnou geometrii: A má vrchol, V — pravý sklon, T — širokou příčku. Když taková písmena stojí vedle sebe, vzdálenost mezi jejich obrysy vypadá nerovnoměrně, i když je meziznaková mezera (set width) stejná.

Kerningové tabulky písma obsahují páry znaků s přednastavenými hodnotami úprav. V dobrém písmu může být 300 až 2000 kerningových párů. Profesionální písma — například SF Pro od Apple nebo Roboto od Google — obsahují pečlivě zpracované kerningové tabulky pokrývající všechny možné kombinace písmen latinky a cyrilice. Podle Fontshop Guide to Kerning je kvalita kerningových tabulek jedním z hlavních znaků profesionálního písma.

Vizuální efekt kerningu je zvláště patrný v nadpisech, logotypech a textu velkých velikostí (od 24 pt). V malém textu (12-14 pt) jsou vzdálenosti mezi písmeny malé a kerning je méně patrný, i když nadále funguje. Webové prohlížeče a mobilní operační systémy standardně používají vestavěný kerning, ale vývojář jej může vypnout nebo přizpůsobit konkrétnímu designu.

Kerning a tracking: klíčové rozdíly

Začínající vývojáři si často pletou kerning a tracking, ale jedná se o zásadně odlišné parametry typografie. Kerning pracuje na úrovni párů znaků a upravuje vzdálenost pouze mezi konkrétními kombinacemi, kde geometrie písmen vytváří optickou nerovnováhu. Tracking (letter-spacing) mění mezeru mezi všemi znaky vybraného fragmentu stejně — rovnoměrně ji zvyšuje nebo snižuje.

Kdy se tracking používá: pro zlepšení čitelnosti malého textu (kladný tracking), pro vytvoření akcentních nadpisů (záporný tracking), pro stylizaci textu v designu rozhraní. Tracking se zadává číselnou hodnotou a aplikuje se na každý znak, včetně již kerningovaných párů — kerningové korekce zůstávají zachovány, ale je k nim přidán obecný posun.

Důležité pravidlo: při záporném trackingu (stlačování) sledujte kerningové páry — mohou vytvářet nežádoucí překrývání písmen. V CSS se vlastnost letter-spacing aplikuje přes kerningovou tabulku písma a při silném stlačení (letter-spacing: -1px) mohou kerningové korekce vést ke splývání znaků.

Implementace kerningu na iOS přes NSAttributedString

Na iOS se kerning řídí přes atribut .kern v NSAttributedString. Hodnota atributu je Float, kde kladné číslo zvyšuje mezeru, záporné snižuje a 0 kerning vypíná. Výchozí hodnota je nil, což znamená použití kerningové tabulky písma. Hlavní API pro práci s kerningem je NSMutableAttributedString s přidáním atributu k rozsahu textu.

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

// Povolit kerning (používá tabulku písma)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Aplikovat na UILabel
label.attributedText = attributedText

Výchozí hodnota .kern = nil zapíná kerning z tabulky písma. Pokud potřebujete kerning zcela vypnout — nastavte .kern = 0. Hodnoty 0.0 a nil jsou různé stavy: nil používá tabulku, 0 vynucuje vynulování všech kerningových párů. Podle Apple Text Programming Guide je explicitní nastavení 0 užitečné pro monospace text nebo případy, kdy kerning překáží — například v tlačítkách s pevnou šířkou.

SwiftUI poskytuje modifikátor .kerning() pro Text. Na rozdíl od UIKit se v SwiftUI kerning nastavuje na úrovni zobrazení, nikoli atributovaného řetězce. Modifikátor přijímá CGFloat a aplikuje se na celý text uvnitř bloku Text. Pro částečný kerning ve SwiftUI se používá kombinace operátoru + pro Text a samostatných modifikátorů.

struct KerningView: View {
    var body: some View {
        Text("Nadpis s kerningem")
            .kerning(1.0)
            .font(.title)
    }
}

Výkon: NSAttributedString s kerningovým atributem přepočítává pozice znaků při vykreslování. U statického textu se to děje jednou. U dynamického textu (měnící se text v UICollectionView) — pokaždé při změně. Použití velkého rozsahu s kerningem v dlouhých řetězcích (více než 500 znaků) může snížit FPS při rolování.

Nastavení kerningu na Androidu přes letterSpacing

Na Androidu se kerning řídí přes vlastnost letterSpacing v TextView a XML rozvržení. Atribut je typu Float a funguje jako násobitel velikosti písma v em. Hodnota 0 odpovídá výchozímu kerningu, kladná — zvyšuje mezeru, záporná — snižuje. letterSpacing je k dispozici od API Level 21 (Android 5.0 Lollipop).

Implementace přes SpannableString umožňuje aplikovat kerning na část řetězce, nikoli na celý text. Pro přesnou kontrolu se používá třída ScaleXSpan nebo vlastní ReplacementSpan. Podle Android Developer Guide ScaleXSpan škáluje znaky na šířku, simuluje změnu meziznakové mezery, ale neposkytuje přímou kontrolu nad kerningovými páry.

// V XML rozvržení
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programově v Kotlinu
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Omezení: Android přímo nepodporuje kerningové tabulky — letterSpacing funguje jako tracking pro všechny znaky. Pro párový kerning na Androidu se používají písma s vestavěnými kerningovými tabulkami (OpenType GPOS feature kern). Podpora závisí na verzi operačního systému a vykreslovacím enginu: na Android 10+ se používá Minikin s plnou podporou OpenType funkcí, na starších verzích — HarfBuzz s omezeními. Doporučení: zkontrolujte zobrazení kerningu na zařízeních s Androidem nižším než 8.0.

Kerning ve webovém vývoji přes CSS

Na webu se kerning řídí přes CSS vlastnost font-kerning, která zapíná nebo vypíná vestavěné kerningové tabulky písma. Hodnoty: auto (prohlížeč rozhodne), normal (kerning zapnut), none (kerning vypnut). Vlastnost je podporována všemi moderními prohlížeči od roku 2016. Podle MDN Web Docs se font-kerning vztahuje pouze na písma OpenType s kerningovou tabulkou.

CSS vlastnost letter-spacing — je obdoba trackingu, ale používá se také pro efekty podobné kerningu. Na rozdíl od font-kerning, letter-spacing mění mezeru mezi všemi znaky rovnoměrně, bez ohledu na kerningové páry. Při použití obou vlastností se font-kerning aplikuje jako první, poté letter-spacing přidá rovnoměrný posun navrch.

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

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

TypeScript nástroj pro výpočet optimálního letter-spacing s ohledem na kerning může analyzovat kerningovou tabulku písma přes Canvas API. V praxi se však weboví vývojáři spoléhají na font-kerning: normal — ve většině případů poskytuje optimální výsledek. Další nastavení letter-spacing je vyžadováno pouze pro designové akcenty — například na vstupních stránkách s velkou typografií.

Praktická doporučení pro nastavení kerningu

Kerning je nástroj jemného doladění a jeho nesprávné použití zhoršuje čitelnost. První pravidlo: neměňte kerning pro hlavní text (body text). Kerningové tabulky profesionálních písem již obsahují optimální hodnoty pro velikosti 12-16pt. Zásah do kerningu hlavního textu vede k nerovnoměrnosti a vizuálnímu šumu.

Druhé pravidlo: pro nadpisy od 24pt používejte kladný kerning (0.5-1.5 pt v závislosti na písmu). Velký text vyžaduje pro čitelnost více místa mezi písmeny. Písma s nízkou x-height (např. Didot) vyžadují více kerningu než písma s vysokou x-height (např. Helvetica). Testovací data: v iOS aplikaci Apple Music používají nadpisy kerning 0.8 pt.

Třetí pravidlo: vždy kontrolujte kerning na skutečných řetězcích, ne na testovacím Lorem Ipsum. Různé kombinace znaků dávají různý vizuální efekt. Zvláštní pozornost věnujte párům se samohláskami a souhláskami s vyčnívajícími prvky: AV, Te, To, Wa, LT. Při záporném kerningu sledujte páry fi, fl, fj — v některých písmech se mohou slévat bez ligatury.

Aspekt přístupnosti: uživatelé s dyslexií lépe čtou text s mírně kladným kerningem (0.3-0.5 pt). iOS a Android podporují nastavení přístupnosti, která mohou přepsat kerning aplikace. Používejte UIFontDescriptor s Dynamic Type a zohledněte kerning v nastavení přístupnosti přes UIAccessibility. Důležité: neblokujte systémová nastavení kerningu — to porušuje WCAG 2.2 Guideline 1.4.12 o přizpůsobení textu.