Исторический контекст: от металлической литеры к OpenType
Кернинг существует столько, сколько существует наборная типографика. В эпоху ручного металлического набора типограф буквально подрезал угол металлической литеры, чтобы соседний символ «зашёл» под её форму. Особенно актуально это было для сочетаний «f» с последующей «i» (лигатура fi), «AV», «To», «VA» — пар, в которых стандартный просвет между литерами создавал оптическую «дыру».
С переходом на фотонабор (1960–70-е) и затем цифровой набор кернинг стал частью шрифтового файла. Форматы TrueType и Type 1 хранили таблицы кернинга как часть метрики шрифта. Формат OpenType (совместная разработка Adobe и Microsoft, 1990-е) расширил возможности до тысяч пар и добавил поддержку контекстного кернинга: значения, зависящие не только от двух символов, но и от окружающего контекста.
Три типа кернинга в современной типографике
Метрический кернинг (Metrics / Built-in). Использует таблицы кернинга, встроенные в шрифтовой файл разработчиком. Это базовый уровень: хорошо разработанный шрифт содержит тысячи прописанных пар. В Adobe-приложениях — режим «Metrics» в панели Character. В CSS — font-kerning: normal (включён по умолчанию в современных браузерах).
Оптический кернинг (Optical). Алгоритм анализирует формы соседних символов и рассчитывает просвет на основе геометрии, а не предустановленных таблиц. Полезен для шрифтов с бедными или устаревшими таблицами кернинга. В InDesign и Illustrator — режим «Optical» в панели Character. В браузерах аналог не существует — оптический кернинг применяется только в профессиональных редакторах.
Ручной (Manual) кернинг. Дизайнер вручную регулирует просвет между конкретными парами символов. Необходим для логотипов, крупных заголовков, упаковки — везде, где текст набран крупным кеглем и кернинговые артефакты видны невооружённым глазом. В Figma — курсор между буквами + Alt/Option + стрелки. В InDesign — курсор между буквами + Alt/Opt + стрелки. В Illustrator — тот же принцип.
«Кернинг заметен не тогда, когда сделан хорошо. Он заметен только тогда, когда сделан плохо.»
— Артём Кириленко, аналитик MireviaКернинг vs. трекинг: критическая разница
Эти два термина часто путают даже опытные дизайнеры. Кернинг — это локальная операция между конкретной парой символов. Трекинг (tracking, letter-spacing) — это глобальная операция, равномерно изменяющая просвет между всеми символами в выделенном диапазоне.
Важный нюанс: трекинг не заменяет кернинг. Если в слове плохо откернована пара «AV» — увеличение трекинга сделает все остальные просветы больше, но оптическая «дыра» между A и V всё равно останется. Правильная последовательность: сначала примените трекинг (как дизайн-решение), затем — кернинг конкретных проблемных пар (как коррекция).
Наиболее проблемные пары символов
| Пара | Проблема | Решение |
|---|---|---|
| AV, VA | Широкие диагональные формы создают оптическую яму | Отрицательный кернинг −50 до −80 единиц |
| To, Ta, Te | Выступ засечки T «нависает» над округлой или прямой формой | Отрицательный кернинг −40 до −60 единиц |
| WA, Wa | Аналогично AV, но с буквой W | Отрицательный кернинг −40 до −60 единиц |
| Yo, Ya | Y и последующий округлый или диагональный символ | Отрицательный кернинг −30 до −50 единиц |
| f) | Выступающий кончик f касается или перекрывается со скобкой | Положительный кернинг +20 до +40 единиц |
| r, r. | Засечка r «вылезает» над запятой/точкой | Положительный кернинг +15 до +25 единиц |
| LT, LV, LW | Плечо T/V/W нависает над горизонталью L | Отрицательный кернинг −30 до −60 единиц |
Кернинг в CSS: что доступно и что нет
В браузерах кернинг управляется несколькими CSS-свойствами. font-kerning: normal | none | auto — включает/выключает встроенные OpenType-таблицы кернинга. По умолчанию auto, что в большинстве браузеров равно normal. Явно задавайте font-kerning: normal на заголовочных элементах для гарантированного включения.
font-feature-settings: "kern" 1 — более низкоуровневое управление OpenType-фичами. Использовать, если font-kerning не работает. text-rendering: optimizeLegibility — включает кернинг и лигатуры в WebKit-браузерах, но с осторожностью: может значительно замедлить рендеринг на длинных текстах.
Ручной кернинг в HTML/CSS: единственный способ — обернуть проблемную пару в <span> с letter-spacing: -0.04em. Это неудобно, но иногда необходимо для критически важных заголовков лендингов.
Кернинг для кириллицы: специфика
Кириллические шрифты имеют свои специфические проблемные пары. Буква «Г» с последующим «А» или «О» — классическая кириллическая «дыра». Буква «Т» в сочетании с «о», «а», «е» создаёт оптически увеличенный просвет из-за горизонтального плеча. Буква «Ф» — широкий символ, создающий нежелательное уплотнение при соседстве с узкими буквами.
Качество кернинговых таблиц для кириллицы значительно варьируется: шрифты, разработанные западными фаундри без участия русскоязычных специалистов, часто имеют слабую или отсутствующую кириллическую кернинг-таблицу. Перед использованием шрифта в кириллическом заголовочном наборе всегда проверяйте качество кернинга на типичных словах.
Профессиональный рабочий процесс: чеклист
- Для всего основного текста (body) — доверяйте встроенному кернингу шрифта (
font-kerning: normal). - Для заголовков от 32px и выше — проверяйте каждую проблемную пару вручную.
- Для логотипов и фирменных надписей — проводите полный ручной кернинг без исключений.
- Проверяйте кернинг при разных weight: Bold часто требует иного кернинга, чем Regular.
- Сохраняйте кернинг-таблицы как именованные стили в InDesign или компоненты в Figma.
- В дизайн-системе документируйте исключения: какие конкретные строки требовали ручного кернинга и почему.
- При export в SVG проверяйте, что кернинг сохраняется (Convert to Outlines для критичных случаев).