Кернинг: какво е това и как се настройва междубуквеното разстояние

Какво е кернинг в типографията

Кернинг — е процес на ръчно или автоматично коригиране на разстоянието между конкретни двойки символи за премахване на оптични артефакти. Проблемът възниква, защото всяка буква има уникална геометрия: 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 за адаптация на текст.