Кернінг: що це таке та як налаштовується міжбуквений інтервал

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

Кернінг — це процес ручного або автоматичного коригування відстані між конкретними парами символів для усунення оптичних артефактів. Проблема виникає через те, що кожна літера має унікальну геометрію: у A вершина, у V — правий нахил, у T — широка перекладина. Коли такі літери стоять поруч, відстань між їхніми контурами здається нерівномірною, хоча міжсимвольний інтервал (set width) однаковий.

Кернінг-таблиці шрифту містять пари символів із попередньо встановленими значеннями коригування. У хорошому шрифті може бути від 300 до 2000 кернінг-пар. Професійні гарнітури — наприклад, SF Pro від Apple або Roboto від Google — містять ретельно опрацьовані кернінг-таблиці, що охоплюють усі можливі поєднання літер латиниці та кирилиці. Згідно з Fontshop Guide to Kerning, якість кернінг-таблиць — одна з головних ознак професійного шрифту.

Візуальний ефект кернінгу особливо помітний у заголовках, логотипах і тексті великих кеглів (від 24 pt). У дрібному тексті (12–14 pt) міжбуквені відстані малі, і кернінг менш помітний, хоча продовжує працювати. Веб-браузери та мобільні ОС застосовують вбудований кернінг за замовчуванням, але розробник може вимкнути його або скоригувати під конкретний дизайн.

Кернінг і трекінг: ключові відмінності

Початківці-розробники часто плутають кернінг і трекінг, але це принципово різні параметри типографіки. Кернінг працює на рівні пар символів і коригує відстань лише між конкретними поєднаннями, де геометрія літер створює оптичний дисбаланс. Трекінг (letter-spacing) змінює інтервал між усіма символами виділеного фрагмента однаково — збільшуючи або зменшуючи його рівномірно.

Коли застосовується трекінг: для покращення читабельності дрібного тексту (додатний трекінг), для створення акцентних заголовків (від'ємний трекінг), для стилізації тексту в дизайні інтерфейсів. Трекінг задається числовим значенням і застосовується до кожного символу, включаючи вже відкернені пари — кернінг-корекції зберігаються, але поверх них додається загальний зсув.

Важливе правило: при від'ємному трекінгу (стисненні) слідкуйте за кернінг-парами — вони можуть створювати небажані накладання літер. У CSS властивість letter-spacing застосовується поверх кернінг-таблиці шрифту, і при сильному стисненні (letter-spacing: -1px) кернінг-корекції можуть призвести до злиття символів.

Реалізація кернінгу в iOS через NSAttributedString

На iOS кернінг керується через атрибут .kern у NSAttributedString. Значення атрибута — Float, де додатне число збільшує інтервал, від'ємне зменшує, а 0 вимикає кернінг. Значення за замовчуванням — nil, що означає використання кернінг-таблиці шрифту. Основний API для роботи з кернінгом — NSMutableAttributedString із додаванням атрибута до діапазону тексту.

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

// Увімкнути кернінг (використовує таблицю шрифту)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Застосувати до UILabel
label.attributedText = attributedText

Значення за замовчуванням .kern = nil вмикає кернінг із шрифтової таблиці. Якщо потрібно вимкнути кернінг повністю — встановіть .kern = 0. Значення 0.0 та nil — різні стани: nil використовує таблицю, 0 примусово обнулює всі кернінг-пари. Згідно з Apple Text Programming Guide, явне зазначення 0 корисне для моноширинного тексту або випадків, коли кернінг заважає — наприклад, у кнопках із фіксованою шириною.

SwiftUI надає модифікатор .kerning() для Text. На відміну від UIKit, у SwiftUI кернінг задається на рівні в'ю, а не атрибутованого рядка. Модифікатор приймає CGFloat і застосовується до всього тексту всередині Text-блоку. Для часткового кернінгу в SwiftUI використовується комбінація + оператора для Text та окремих модифікаторів.

struct KerningView: View {
    var body: some View {
        Text("Заголовок з кернінгом")
            .kerning(1.0)
            .font(.title)
    }
}

Продуктивність: NSAttributedString із кернінг-атрибутом перераховує позиції символів під час відображення. Для статичного тексту це відбувається один раз. Для динамічного (текст, що змінюється в UICollectionView) — щоразу при зміні. Використання великого діапазону з кернінгом у довгих рядках (понад 500 символів) може знизити FPS під час скролінгу.

Налаштування кернінгу на Android через letterSpacing

На Android кернінг керується через властивість letterSpacing у TextView та xml-розмітці. Атрибут має тип Float і працює як множник em-розміру шрифту. Значення 0 відповідає кернінгу за замовчуванням, додатне — збільшує інтервал, від'ємне — зменшує. letterSpacing доступний починаючи з API Level 21 (Android 5.0 Lollipop).

Реалізація через SpannableString дозволяє застосувати кернінг до частини рядка, а не до всього тексту. Використовується клас ScaleXSpan або кастомний ReplacementSpan для точного контролю. Згідно з Android Developer Guide, ScaleXSpan масштабує символи по ширині, імітуючи зміну міжсимвольного інтервалу, але не дає прямого керування кернінг-парами.

// У XML-розмітці
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Програмно в Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Обмеження: Android не підтримує кернінг-таблиці безпосередньо — letterSpacing працює як трекінг для всіх символів. Для парного кернінгу на Android використовуються шрифти з вбудованими кернінг-таблицями (OpenType GPOS feature kern). Підтримка залежить від версії ОС та рендер-двигуна: на Android 10+ використовується Minikin з повною підтримкою OpenType-фіч, на більш ранніх — HarfBuzz з обмеженнями. Рекомендація: перевіряйте відображення кернінгу на пристроях з Android нижче 8.0.

Кернінг у веб-розробці через CSS

У вебі кернінг керується через CSS-властивість font-kerning, яка вмикає або вимикає вбудовані кернінг-таблиці шрифту. Значення: auto (браузер вирішує), normal (кернінг увімкнено), none (кернінг вимкнено). Властивість підтримується всіма сучасними браузерами з 2016 року. Згідно з MDN Web Docs, font-kerning застосовний лише до OpenType-шрифтів із кернінг-таблицею.

CSS-властивість letter-spacing — аналог трекінгу, але її застосовують і для кернінг-подібних ефектів. На відміну від font-kerning, letter-spacing змінює інтервал між усіма символами рівномірно, без урахування кернінг-пар. При використанні обох властивостей font-kerning застосовується першою, потім letter-spacing додає рівномірний зсув поверх.

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

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

TypeScript-утиліта для розрахунку оптимального letter-spacing з урахуванням кернінгу може аналізувати кернінг-таблицю шрифту через Canvas API. Але на практиці веб-розробники покладаються на font-kerning: normal у більшості випадків дає оптимальний результат. Додаткове налаштування letter-spacing потрібне лише для дизайнерських акцентів — наприклад, у лендінгах з великою типографікою.

Практичні рекомендації щодо налаштування кернінгу

Кернінг — інструмент тонкого налаштування, і його неправильне застосування погіршує читабельність. Перше правило: не змінюйте кернінг для основного тексту (body text). Кернінг-таблиці професійних шрифтів уже містять оптимальні значення для кеглів 12–16pt. Втручання в кернінг основного тексту призводить до нерівномірності та візуального шуму.

Друге правило: для заголовків від 24pt використовуйте додатний кернінг (0.5–1.5 pt залежно від гарнітури). Великий текст потребує більшого міжбуквеного простору для читабельності. Шрифти з низькою висотою x-height (наприклад, Didot) потребують більшого кернінгу, ніж шрифти з високою x-height (наприклад, Helvetica). Тестові дані: у iOS-застосунку Apple Music заголовки використовують кернінг 0.8 pt.

Третє правило: завжди перевіряйте кернінг на реальних рядках, а не на тестовому Lorem Ipsum. Різні поєднання символів дають різний візуальний ефект. Особливу увагу приділіть парам із голосними та приголосними з виступаючими елементами: AV, Te, To, Wa, LT. При від'ємному кернінгу слідкуйте за парами fi, fl, fj — у деяких шрифтах вони можуть зливатися без лігатури.

Аспект доступності: користувачі з дислексією краще читають текст із невеликим додатним кернінгом (0.3–0.5 pt). iOS та Android підтримують налаштування доступності, які можуть перевизначати кернінг застосунку. Використовуйте UIFontDescriptor з Dynamic Type та враховуйте кернінг у налаштуваннях доступності через UIAccessibility. Важливо: не блокуйте системні налаштування кернінгу — це порушує WCAG 2.2 Guideline 1.4.12 щодо адаптації тексту.