Трекинг у мобилном развоју — суштина и подешавање међузнаковног растојања

Шта је трекинг у типографији

Tracking (трекинг, проредивање) — је промена међузнаковног растојања која се равномерно примењује на све знакове текстовног блока. За разлику од кернинга, где сваки пар знакова добија индивидуалну корекцију на основу табеле кернинга фонта, трекинг се задаје јединственом бројчаном вредношћу за цели опсег. Позитиван трекинг повећава интервал (проредивање), негативан — смањује (збијање).

Термин потиче из металне типографије, где је међузнаковни интервал регулисан физичком удаљеношћу између слова. У дигиталној типографији, трекинг се примењује поврх табеле кернинга: најпре фонт примењује уграђене кернинг парове, затим систем додаје равномеран трекинг свим знаковима. Коначни интервал = кернинг + трекинг, што је важно узети у обзир код агресивног збијања текста.

Јединице мере: трекинг се може задавати у апсолутним јединицама (пункти, пиксели, милиметри) и у релативним (em, проценат величине фонта). У мобилном развоју, трекинг се обично задаје у пунктима (iOS) или sp (Android) као апсолутне вредности, а у вебу — у em као релативне. Релативне јединице су пожељније за accessibility, јер се скалирају при промени величине фонта од стране корисника.

Трекинг и кернинг: принципелне разлике

Збуна између трекинга и кернинга — једна од најчешћих грешака почетничких дизајнера и програмера. Кернинг ради на микронивоу — коригује интервал између одређених парова знакова (AV, Te, To) на основу њихове геометрије. Трекинг ради на макронивоу — равномерно помера све знакове фрагмента, не узимајући у обзир њихов облик.

Визуелни ефекат: код кернинга раздаљине између различитих парова знакова се разликују — између A и V је мање него између A и I, јер се облици слова међусобно компензују. Код трекинга све удаљености су исте — између A и V, A и I, T и o — свуда исти помак. То чини трекинг алатом глобалног подешавања, а кернинг — алатом финог подешавања.

Комбиновано коришћење: у интерфејсној типографији, трекинг и кернинг се примењују заједно. Фонт садржи табелу кернинга за базну оптимизацију, а програмер додаје трекинг за стилизацију или accessibility. Табела кернинга се примењује прва, затим се поврх ње додаје трекинг. При негативном трекингу (збијању), кернинг парови могу створити непожељне преклапања — проверите проблематичне комбинације.

Позитиван и негативан трекинг: када примењивати

Позитиван трекинг (проредивање) повећава растојање између знакова. Примењује се за побољшање читљивости ситног текста (10–13pt), где се знакови визуелно стапају при стандардном интервалу. Такође се користи у accessibility за кориснике са дислексијом — повећан међузнаковни интервал олакшава препознавање слова. Типичне вредности: 0.3–1pt за iOS, 0.02–0.05em за веб.

Негативан трекинг (збијање) смањује растојање између знакова. Примењује се у насловима (од 24pt) и акцентном тексту, где густ склоп изгледа целовито и савремено. Велике величине фонта добро подносе збијање, јер су међузнаковна растојања визуелно велика. Типичне вредности: од -0.3 до -1pt. Ограничење: при трекингу мањем од -1pt, знакови се могу преклапати, посебно у паровима са истакнутим елементима (fi, fj, TT).

Емпиријско правило: за сваку величину фонта постоји опсег дозвољеног трекинга. Што је фонт већи, мање је потребан трекинг за оптималну читљивост. Формула: оптималан трекинг ≈ font-weight * 0.01 – font-size * 0.001. За подебљан фонт (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84, што са прилагођавањем за гарнитуру даје око 0.5pt позитивног трекинга.

Трекинг за различите типове текста

Body text (14–18pt): трекинг није потребан или је минималан позитиван 0.1–0.3pt. Професионални фонтови већ садрже оптималне интервале за основни текст. Свака интервенција у трекинг body text-а мора бити оправдана дизајном или accessibility захтевима. Наслови (20–36pt): дозвољен негативан трекинг од -0.3 до -0.8pt у зависности од гарнитуре и тежине. Велика слова (ALL CAPS): препоручује се позитиван трекинг 0.5–2pt, јер се велика слова у верзалу визуелно стапају без додатног интервала.

Специфика гарнитура: фонтови са гротескном геометријом (Helvetica, Inter, SF Pro) боље подносе негативан трекинг него антиквене гарнитуре са серифима (Times, Georgia, PT Serif). Код антиквених фонтова, серифи стварају додатну визуелну везу између слова, и збијање чини текст нечитљивим. За антиквене гарнитуре препоручује се само позитиван трекинг.

Реализација трекинга на iOS и Android

На iOS, трекинг се реализује кроз исти атрибут .kern у NSAttributedString као и кернинг, али са једном разликом: за трекинг се наводи бројчана вредност различита од nil. nil — подразумевани кернинг (из табеле фонта), 0 — искључивање кернинга, било који други број — трекинг поврх табеле кернинга. То значи да при постављању .kern = 2, сви знакови добијају +2pt међузнаковног интервала поврх уграђених кернинг парова.

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

// Позитивни трекинг +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel са трекингом
label.attributedText = attributedString

SwiftUI користи модификатор .tracking() за Text, који прихвата CGFloat. За разлику од UIKit-а, трекинг у SwiftUI се примењује на цео текст унутар модификатора и не може бити делимични без подјеле на више Text блокова. SwiftUI аутоматски обрађује комбинацију кернинга и трекинга, примењујући трекинг поврх табеле кернинга фонта.

Android користи својство letterSpacing у TextView, које се поставља у em (множитељ у односу на величину фонта). Вредност 0 — подразумевани трекинг, 0.05 — повећање од 5% em, -0.02 — смањење. У Android-у, letterSpacing ради као трекинг (равномерно за све знакове), а табела кернинга фонта се примењује аутоматски на нивоу рендер мотора Minikin.

// У XML распореду
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Програмски у Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose у Android-у користи параметар letterSpacing у TextStyle, који се поставља у sp. На примјер, TextStyle(letterSpacing = 0.5.sp) даје трекинг од 0.5 sp. За разлику од XML приступа, Compose омогућава комбиновање letterSpacing са другим типографским параметрима у јединственом TextStyle објекту, што поједностављује креирање дизајн система.

Подешавање letter-spacing у веб развоју

У вебу, трекинг се реализује кроз CSS својство letter-spacing, које прихвата све јединице дужине или кључну реч normal. Вредност normal одговара 0 (без додатног међузнаковног интервала). Својство се наследује, подржава негативне вредности и може да се анимира. Према CSS Specification, letter-spacing се примењује након табеле кернинга фонта.

/* 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 у em се скалира при промени font-size и је пожељан за accessibility. px се не скалира и може довести до непоклапања при повећању текста преко браузера (Zoom). Препорука: увијек користите em за letter-spacing. Изузетак — случајеви када трекинг мора да остане фиксиран независно од величине фонта, на примјер, у логотипима.

Анимација letter-spacing: својство подржава CSS transitions и animations, што омогућава стварање глатких ефеката појаве текста. Анимација од letter-spacing: -0.05em до letter-spacing: 0.01em при учитавању наслова — популарна техника у савременим интерфејсима. Перформансе: анимација letter-spacing изазива reflow (прерачунавање layout-а), јер се мења ширина текста. Користите transform и opacity за високоперформантне анимације где је то могуће.

Accessibility и трекинг у мобилним интерфејсима

Трекинг директно утиче на читљивост текста за кориснике са ограничењим вида и дислексијом. WCAG 2.2 Guideline 1.4.12 (Text Spacing) захтева да се текст не губи када се повећају међузнаковни, међуредни и међупасусни интервали до одређених вредности. letter-spacing мора да издржи повећање до 0.12em без сечења садржаја и преклапања елемената.

Дислексија: истраживања British Dyslexia Association показују да повећање letter-spacing до 0.12em побољшава брзину читања код корисника са дислексијом за 10–15%. Међутим, то је индивидуално — неки корисници преферирају стандардни интервал. iOS и Android пружају системска accessibility подешавања за повећање међузнаковног интервала, која апликација мора да поштује.

Правила за програмера: не користите фиксне ширине/висине које би се могле покварити при повећању letter-spacing. Избегавајте overflow: hidden на контејнерима са текстом без провере accessibility. Тестирајте интерфејс са повећаним letter-spacing до 0.12em на свим екранима. Ако се дизајн поквари — преиспитајте layout, а не игноришите accessibility.

Платформска подршка: iOS аутоматски повећава letter-spacing када је укључена функција Већи текст у подешавањима приступачности, ако се користи UIFont.preferredFont. Android пружа сличну опцију кроз FontScale. Програмер не треба да онемогући ова подешавања. Тест сценарио: укључите максималну величину текста у подешавањима уређаја и проверите да трекинг не квари layout интерфејса.