Tracking v mobilním vývoji — podstata a nastavení vzdálenosti mezi znaky

Co je tracking v typografii

Tracking (tracking, prokládání) — je změna vzdálenosti mezi znaky, která se rovnoměrně aplikuje na všechny znaky textového bloku. Na rozdíl od kerningu, kde každý pár znaků dostává individuální korekci na základě kerningové tabulky písma, se tracking nastavuje jedinou číselnou hodnotou pro celý rozsah. Pozitivní tracking zvětšuje interval (prokládání), negativní — snižuje (ztěsňování).

Termín pochází z kovové typografie, kde se meziznakový interval reguloval fyzickou vzdáleností mezi typografickými prvky. V digitální typografii se tracking aplikuje na kerningovou tabulku: nejprve písmo aplikuje vestavěné kerningové páry, poté systém přidá rovnoměrný tracking všem znakům. Výsledný interval = kerning + tracking, což je třeba zohlednit při agresivním ztěsňování textu.

Jednotky měření: tracking lze nastavit v absolutních jednotkách (body, pixely, milimetry) a relativních (em, procento velikosti písma). V mobilním vývoji se tracking obvykle nastavuje v bodech (iOS) nebo sp (Android) jako absolutní hodnoty, na webu — v em jako relativní. Relativní jednotky jsou preferovanější pro přístupnost, protože se škálují při změně velikosti písma uživatelem.

Tracking a kerning: zásadní rozdíly

Záměna mezi trackingem a kerningem — jeden z nejčastějších chyb začínajících designérů a vývojářů. Kerning pracuje na mikroúrovni — koriguje interval mezi konkrétními páry znaků (AV, Te, To) na základě jejich geometrie. Tracking pracuje na makroúrovni — rovnoměrně posouvá všechny znaky fragmentu, aniž by bral v úvahu jejich tvar.

Vizuální efekt: při kerningu se vzdálenosti mezi různými páry znaků liší — mezi A a V je menší než mezi A a I, protože tvary písmen se vzájemně kompenzují. Při trackingu jsou všechny vzdálenosti stejné — mezi A a V, A a I, T a o — všude stejný posun. To činí tracking nástrojem globální regulace a kerning nástrojem jemného dolení.

Kombinované použití: v typografii rozhraní se tracking a kerning používají společně. Písmo obsahuje kerningovou tabulku pro základní optimalizaci a vývojář přidává tracking pro stylizaci nebo přístupnost. Kerningová tabulka se aplikuje první, poté se na ni přidá tracking. Při negativním trackingu (ztěsňování) mohou kerningové páry vytvářet nežádoucí překryvy — zkontrolujte problematické kombinace.

Pozitivní a negativní tracking: kdy použít

Pozitivní tracking (prokládání) zvětšuje vzdálenost mezi znaky. Používá se pro zlepšení čitelnosti malého textu (10–13pt), kde se znaky při standardním intervalu vizuálně slévají. Také se používá v přístupnosti pro uživatele s dyslexií — zvětšený meziznakový interval usnadňuje rozpoznávání písmen. Typické hodnoty: 0.3–1pt pro iOS, 0.02–0.05em pro web.

Negativní tracking (ztěsňování) snižuje vzdálenost mezi znaky. Používá se v nadpisech (od 24pt) a akcentním textu, kde hutný text působí celistvě a moderně. Velká písma dobře snášejí ztěsňování, protože meziznakové vzdálenosti jsou vizuálně velké. Typické hodnoty: od -0.3 do -1pt. Omezení: při trackingu menším než -1pt se znaky mohou překrývat, zejména v párech s vyčnívajícími prvky (fi, fj, TT).

Empirické pravidlo: pro každou velikost písma existuje rozsah povoleného trackingu. Čím větší písmo, tím méně trackingu je třeba pro optimální čitelnost. Vzorec: optimální tracking ≈ font-weight * 0.01 – font-size * 0.001. Pro tučné písmo (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84, což s korekcí na řez písma dává přibližně 0.5pt pozitivního trackingu.

Tracking pro různé typy textu

Hlavní text (14–18pt): tracking není nutný nebo minimální pozitivní 0.1–0.3pt. Profesionální písma již obsahují optimální intervaly pro hlavní text. Jakýkoli zásah do trackingu hlavního textu musí být odůvodněn požadavky designu nebo přístupnosti. Nadpisy (20–36pt): povolený negativní tracking od -0.3 do -0.8pt v závislosti na řezu písma a tučnosti. Verzálky (ALL CAPS): doporučený pozitivní tracking 0.5–2pt, protože velká písmena ve verzálkách vizuálně splývají bez dodatečného intervalu.

Specifika řezů písma: písma s groteskní geometrií (Helvetica, Inter, SF Pro) snášejí negativní tracking lépe než antikvové řezy s patkami (Times, Georgia, PT Serif). U antikvových písem patky vytvářejí dodatečné vizuální spojení mezi písmeny a ztěsňování činí text nečitelným. Pro antikvové řezy se doporučuje pouze pozitivní tracking.

Implementace trackingu na iOS a Androidu

Na iOS se tracking realizuje stejným atributem .kern v NSAttributedString jako kerning, ale s jedním rozdílem: pro tracking se uvádí číselná hodnota odlišná od nil. nil — výchozí kerning (z tabulky písma), 0 — vypnutí kerningu, jakékoli jiné číslo — tracking na kerningovou tabulku. To znamená, že při nastavení .kern = 2 všechny znaky dostanou +2pt meziznakového intervalu na vestavěné kerningové páry.

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

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

// UILabel s trackingem
label.attributedText = attributedString

SwiftUI používá modifikátor .tracking() pro Text, který přijímá CGFloat. Na rozdíl od UIKit se tracking ve SwiftUI aplikuje na celý text uvnitř modifikátoru a nemůže být částečný bez rozdělení na více Text bloků. SwiftUI automaticky zpracovává kombinaci kerningu a trackingu s aplikováním trackingu na kerningovou tabulku písma.

Android používá vlastnost letterSpacing v TextView, která se nastavuje v em (násobitel relativně k velikosti písma). Hodnota 0 — výchozí tracking, 0.05 — zvýšení o 5% em, -0.02 — snížení. V Androidu letterSpacing funguje jako tracking (rovnoměrně pro všechny znaky) a kerningová tabulka písma se automaticky aplikuje na úrovni vykreslovacího jádra Minikin.

// V XML rozložení
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programaticky v Kotlinu
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose v Androidu používá parametr letterSpacing v TextStyle, nastavený v sp. Například TextStyle(letterSpacing = 0.5.sp) poskytuje tracking 0.5 sp. Na rozdíl od XML přístupu Compose umožňuje kombinovat letterSpacing s jinými typografickými parametry v jediném objektu TextStyle, což zjednodušuje tvorbu design systémů.

Nastavení letter-spacing ve vývoji webu

Na webu se tracking realizuje pomocí CSS vlastnosti letter-spacing, která přijímá libovolné jednotky délky nebo klíčové slovo normal. Hodnota normal odpovídá 0 (bez dodatečného meziznakového intervalu). Vlastnost se dědí, podporuje záporné hodnoty a lze ji animovat. Podle CSS specifikace se letter-spacing aplikuje po kerningové tabulce písma.

/* 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 v em se škáluje při změně font-size a je preferovanější pro přístupnost. px se neškáluje a může vést k nesouladu při zvětšení textu prohlížečem (Zoom). Doporučení: vždy používejte em pro letter-spacing. Výjimka — případy, kdy tracking musí zůstat fixní bez ohledu na velikost písma, například v logotypech.

Animace letter-spacing: vlastnost podporuje CSS transitions a animations, což umožňuje vytvářet plynulé efekty objevování textu. Animace z letter-spacing: -0.05em na letter-spacing: 0.01em při načítání nadpisu — oblíbená technika v moderních rozhraních. Výkon: animace letter-spacing způsobuje reflow (přepočet layoutu), protože mění šířku textového bloku. Pro vysoce výkonné animace používejte transform a opacity tam, kde je to možné.

Přístupnost a tracking v mobilních rozhraních

Tracking přímo ovlivňuje čitelnost textu pro uživatele s omezením zraku a dyslexií. WCAG 2.2 Guideline 1.4.12 (Text Spacing) vyžaduje, aby text neztrácel obsah při zvětšení meziznakových, řádkových a odstavcových intervalů na určité hodnoty. letter-spacing musí vydržet zvětšení až do 0.12em bez ořezání obsahu a překrývání prvků.

Dyslexie: výzkum British Dyslexia Association ukazuje, že zvětšení letter-spacing na 0.12em zlepšuje rychlost čtení u uživatelů s dyslexií o 10–15%. To je však individuální — někteří uživatelé preferují standardní interval. iOS a Android poskytují systémové nastavení přístupnosti pro zvětšení meziznakového intervalu, které by aplikace měla respektovat.

Pravidla pro vývojáře: nepoužívejte fixní šířky/výšky, které by se mohly zlomit při zvětšení letter-spacing. Vyhněte se overflow: hidden na kontejnerech s textem bez kontroly přístupnosti. Testujte rozhraní se zvětšeným letter-spacing až do 0.12em na všech obrazovkách. Pokud se design zlomí — přehodnoťte layout, neignorujte přístupnost.

Podpora platformy: iOS automaticky zvětšuje letter-spacing při zapnutí funkce Větší text v nastavení přístupnosti, pokud se používá UIFont.preferredFont. Android poskytuje podobnou možnost přes FontScale. Vývojář by neměl tato nastavení vypínat. Testovací scénář: zapněte maximální velikost textu v nastavení zařízení a zkontrolujte, že tracking neničí layout rozhraní.