Tracking a mobilfejlesztésben — lényege és a karakterközi távolság szabályozása

Mi az a tracking a tipográfiában

Tracking (tracking, ritkítás) — a karakterek közötti távolság módosítása, amely egyenletesen vonatkozik egy szövegblokk összes karakterére. Ellentétben a kerninggel, ahol minden karakterpár egyedi korrekciót kap a betűtípus kerning-táblázata alapján, a tracking egyetlen számértékkel van meghatározva a teljes tartományra. A pozitív tracking növeli a távolságot (ritkítás), a negatív — csökkenti (sűrítés).

A kifejezés a fém tipográfiából származik, ahol a karakterközi távolságot a betűk közötti fizikai távolság szabályozta. A digitális tipográfiában a tracking a kerning-táblázat tetejére épül: először a betűtípus alkalmazza a beépített kerning-párokat, majd a rendszer egyenletes trackingot ad hozzá minden karakterhez. A végső távolság = kerning + tracking, amit agresszív sűrítésnél figyelembe kell venni.

Mértékegységek: a tracking beállítható abszolút egységekben (pont, pixel, milliméter) és relatív egységekben (em, a betűméret százaléka). A mobilfejlesztésben a trackingot általában pontokban (iOS) vagy sp-ben (Android) állítják be abszolút értékként, a weben — em-ben relatív értékként. A relatív egységek előnyösebbek az akadálymentesítés szempontjából, mert méreteződnek, amikor a felhasználó módosítja a betűméretet.

Tracking és kerning: alapvető különbségek

A tracking és a kerning összetévesztése — az egyik leggyakoribb hiba a kezdő tervezők és fejlesztők körében. A kerning mikroszinten működik — bizonyos karakterpárok (AV, Te, To) közötti távolságot korrigálja azok geometriája alapján. A tracking makroszinten működik — egyenletesen mozgatja a részlet összes karakterét, anélkül, hogy figyelembe venné azok alakját.

Vizuális hatás: kerningnél a különböző karakterpárok közötti távolságok eltérőek — A és V között kisebb, mint A és I között, mert a betűformák kompenzálják egymást. Trackingnél minden távolság azonos — A és V, A és I, T és o között — mindenhol ugyanaz az eltolás. Ez a trackingot globális szabályozó eszközzé, a kerninget pedig finomhangoló eszközzé teszi.

Kombinált használat: a felületi tipográfiában a tracking és a kerning együtt kerül alkalmazásra. A betűtípus tartalmaz egy kerning-táblázatot az alapoptimalizáláshoz, a fejlesztő pedig trackingot ad hozzá a stílushoz vagy az akadálymentesítéshez. A kerning-táblázat kerül először alkalmazásra, majd a tracking rétegeződik rá. Negatív trackingnél (sűrítésnél) a kerning-párok nemkívánatos átfedéseket hozhatnak létre — ellenőrizze a problémás kombinációkat.

Pozitív és negatív tracking: mikor alkalmazzuk

Pozitív tracking (ritkítás) növeli a karakterek közötti távolságot. Kis szöveg (10–13pt) olvashatóságának javítására alkalmazzák, ahol a karakterek vizuálisan összeolvadnak a szokásos távolságnál. Az akadálymentesítésben is használják diszlexiás felhasználók számára — a megnövelt karakterközi távolság megkönnyíti a betűk felismerését. Tipikus értékek: 0.3–1pt iOS-hez, 0.02–0.05em a webhez.

Negatív tracking (sűrítés) csökkenti a karakterek közötti távolságot. Címekben (24pt-től) és hangsúlyos szövegben alkalmazzák, ahol a sűrű szedés összefüggőnek és modernnek tűnik. A nagy betűméretek jól tűrik a sűrítést, mert a karakterközi távolságok vizuálisan nagyok. Tipikus értékek: -0.3-tól -1pt-ig. Korlátozás: -1pt-nél kisebb trackingnél a karakterek átfedhetik egymást, különösen a kiugró elemeket tartalmazó pároknál (fi, fj, TT).

Empirikus szabály: minden betűmérethez létezik egy megengedett tracking tartomány. Minél nagyobb a betűtípus, annál kevesebb tracking szükséges az optimális olvashatósághoz. Képlet: optimális tracking ≈ font-weight * 0.01 – font-size * 0.001. Félkövér betűtípushoz (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84, ami a betűkép szerinti korrekcióval körülbelül 0.5pt pozitív trackingot ad.

Tracking különböző szövegtípusokhoz

Body text (14–18pt): tracking nem szükséges vagy minimális pozitív 0.1–0.3pt. A professzionális betűtípusok már tartalmazzák az optimális távolságokat a fő szöveghez. A body text trackingjébe való bármilyen beavatkozást tervezési vagy akadálymentesítési követelményekkel kell indokolni. Címek (20–36pt): megengedett negatív tracking -0.3-tól -0.8pt-ig a betűképtől és vastagságtól függően. Nagybetűk (ALL CAPS): pozitív tracking 0.5–2pt ajánlott, mert a nagybetűk verzálban vizuálisan összeolvadnak további távolság nélkül.

Betűképek sajátosságai: a groteszk geometriájú betűtípusok (Helvetica, Inter, SF Pro) jobban tűrik a negatív trackingot, mint az antikva talpas betűtípusok (Times, Georgia, PT Serif). Az antikva betűtípusoknál a talpak további vizuális kapcsolatot hoznak létre a betűk között, és a sűrítés olvashatatlanná teszi a szöveget. Antikva betűképekhez csak pozitív tracking ajánlott.

Tracking megvalósítása iOS-en és Androidon

iOS-en a tracking ugyanazon a .kern attribútumon keresztül valósul meg az NSAttributedString-ben mint a kerning, de egy különbséggel: a trackinghoz a nil-től eltérő számérték kerül megadásra. nil — alapértelmezett kerning (a betűtípus táblázatából), 0 — kerning kikapcsolása, bármely más szám — tracking a kerning-táblázat tetején. Ez azt jelenti, hogy a .kern = 2 beállításakor minden karakter +2pt karakterközi távolságot kap a beépített kerning-párok tetejére.

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

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

// UILabel trackinggel
label.attributedText = attributedString

SwiftUI a .tracking() módosítót használja a Text-hez, amely CGFloat-et fogad el. Az UIKit-től eltérően a SwiftUI tracking a módosítón belül a teljes szövegre vonatkozik, és nem lehet részleges több Text blokkra bontás nélkül. A SwiftUI automatikusan kezeli a kerning és a tracking kombinációját, a trackingot a betűtípus kerning-táblázatának tetejére alkalmazva.

Android a letterSpacing tulajdonságot használja a TextView-ben, amely em-ben (a betűmérethez viszonyított szorzó) van beállítva. A 0 érték — alapértelmezett tracking, 0.05 — 5%-os növelés az em-hez képest, -0.02 — csökkentés. Androidon a letterSpacing trackingként működik (egyenletesen minden karakterre), a betűtípus kerning-táblázata pedig automatikusan a Minikin renderelő motor szintjén kerül alkalmazásra.

// XML elrendezésben
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programozottan Kotlinban
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose Androidon a letterSpacing paramétert használja a TextStyle-ben, sp-ben beállítva. Például a TextStyle(letterSpacing = 0.5.sp) 0.5 sp trackingot ad. Az XML megközelítéstől eltérően a Compose lehetővé teszi a letterSpacing és más tipográfiai paraméterek egyetlen TextStyle objektumban történő kombinálását, ami leegyszerűsíti a dizájnrendszerek létrehozását.

Letter-spacing beállítása webes fejlesztésben

A weben a tracking a CSS letter-spacing tulajdonságon keresztül valósul meg, amely bármilyen hosszmértékegységet vagy a normal kulcsszót fogadja el. A normal érték 0-nak felel meg (további karakterközi távolság nélkül). A tulajdonság öröklődik, támogatja a negatív értékeket és animálható. A CSS specifikáció szerint a letter-spacing a betűtípus kerning-táblázata után kerül alkalmazásra.

/* 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: az em-ben megadott letter-spacing a font-size változásakor méreteződik, és előnyösebb az akadálymentesítés szempontjából. A px nem méreteződik, és eltérésekhez vezethet a szöveg böngésző általi nagyításakor (Zoom). Javaslat: mindig em-et használjon a letter-spacinghez. Kivétel — amikor a trackingnak a betűmérettől függetlenül rögzítettnek kell maradnia, például logókban.

Letter-spacing animáció: a tulajdonság támogatja a CSS transitions és animations funkciókat, lehetővé téve a szöveg megjelenésének zökkenőmentes effektusait. A letter-spacing: -0.05em-től letter-spacing: 0.01em-ig tartó animáció a cím betöltésekor — népszerű technika a modern felületeken. Teljesítmény: a letter-spacing animációja reflow-t (layout újraszámítást) okoz, mert a szövegblokk szélessége változik. Használjon transform és opacity tulajdonságokat a nagy teljesítményű animációkhoz, ahol lehetséges.

Akadálymentesítés és tracking mobil felületeken

A tracking közvetlenül befolyásolja a szöveg olvashatóságát a gyenge látású és diszlexiás felhasználók számára. A WCAG 2.2 Guideline 1.4.12 (Text Spacing) előírja, hogy a szöveg ne veszítse el tartalmát a karakterközi, sorközi és bekezdésközi távolságok bizonyos értékekre történő növelésekor. A letter-spacing-nek el kell viselnie a 0.12em-ig történő növelést a tartalom levágása és az elemek átfedése nélkül.

Diszlexia: a British Dyslexia Association kutatásai azt mutatják, hogy a letter-spacing 0.12em-re történő növelése 10–15%-kal javítja az olvasási sebességet diszlexiás felhasználóknál. Ez azonban egyénénként változik — néhány felhasználó a szokásos távolságot részesíti előnyben. Az iOS és az Android rendszerszintű akadálymentesítési beállításokat kínál a karakterközi távolság növeléséhez, amelyeket az alkalmazásnak tiszteletben kell tartania.

Szabályok a fejlesztő számára: ne használjon fix szélességeket/magasságokat, amelyek eltörhetnek a letter-spacing növelésekor. Kerülje az overflow: hidden tulajdonságot szöveges konténereken akadálymentesítési ellenőrzés nélkül. Tesztelje a felületet 0.12em-re növelt letter-spacinggel minden képernyőn. Ha a dizájn eltörik — gondolja újra a layoutot, ne hagyja figyelmen kívül az akadálymentesítést.

Platform támogatás: az iOS automatikusan növeli a letter-spacinget, amikor a Nagyobb Szöveg funkció be van kapcsolva a kisegítő lehetőségek beállításaiban, ha UIFont.preferredFont van használatban. Az Android hasonló lehetőséget kínál a FontScale segítségével. A fejlesztő nem tilthatja le ezeket a beállításokat. Teszt forgatókönyv: kapcsolja be a maximális szövegméretet a készülék beállításaiban, és ellenőrizze, hogy a tracking nem töri meg a felület layoutját.