Трекінг у мобільній розробці — суть та налаштування міжсимвольної відстані

Що таке трекінг у типографіці

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-налаштування для збільшення міжсимвольного інтервалу, які застосунок повинен поважати.

Правила для розробника: не використовуйте фіксовані widths/heights, які можуть зламатися при збільшенні letter-spacing. Уникайте overflow: hidden на контейнерах з текстом без перевірки accessibility. Тестуйте інтерфейс зі збільшеним до 0.12em letter-spacing на всіх екранах. Якщо дизайн ламається — перегляньте верстку, а не ігноруйте accessibility.

Платформенна підтримка: iOS автоматично збільшує letter-spacing при включенні функції Larger Text у налаштуваннях доступності, якщо використовується UIFont.preferredFont. Android надає аналогічну опцію через FontScale. Розробник не повинен відключати ці налаштування. Тестовий сценарій: увімкніть максимальний розмір тексту в налаштуваннях пристрою та перевірте, що трекінг не ламає layout інтерфейсу.