Кернинг: что это такое и как настраивается межбуквенный интервал

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

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

// Enable kerning (uses font table)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Apply to 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("Heading with kerning")
            .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 масштабирует символы по ширине, имитируя изменение межсимвольного интервала, но не даёт прямого управления кернинг-парами.

// In XML layout
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programmatically in 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 — в некоторых шрифтах они могут сливаться без лигатуры.

Accessibility-аспект: пользователи с дислексией лучше читают текст с небольшим положительным кернингом (0.3-0.5 pt). iOS и Android поддерживают настройки доступности, которые могут переопределять кернинг приложения. Используйте UIFontDescriptor с Dynamic Type и учитывайте в accessibility-настройках кернинг через UIAccessibility. Важно: не блокируйте системные настройки кернинга — это нарушает WCAG 2.2 Guideline 1.4.12 по адаптации текста.