Кернинг: что это и как правильно использовать в дизайне
окт, 12 2025
В любой работе с текстом - от рекламного баннера до сайта - вёрстка букв влияет на читаемость и восприятие. Кернинг именно тот инструмент, который решает, насколько «дружелюбно» выгляdet каждая пара символов.
Что такое кернинг?
Когда мы говорим о кернинге это процесс ручного или автоматического изменения расстояния между отдельными парами глифов в шрифте, речь идёт о тонкой настройке межбуквенного интервала, учитывающей форму символов. В отличие от трекинга равномерного изменения расстояния между всеми символами строки, кернинг работает только там, где соединения выглядят неровно.
Как работает кернинг?
Каждый глиф имеет свои метрики - боковые отступы (side bearings). При наборе текста система складывает эти отступы, получая базовое расстояние. Если комбинация «AV», «To», «Wa» создаёт визуальный разрыв, кернинг уменьшает отступы одной или обеих сторон, чтобы «сократить» пустоту.
Большие шрифты часто поставляются с готовыми кернинг‑парами, описанными в таблице OpenType формат файла шрифта, поддерживающий сложные типографские функции. При работе с менее популярными гарнитурами дизайнер может добавить свои пары вручную.
Кернинг в графических приложениях
- Adobe Photoshop ретушёрское приложение, часто использующееся для создания баннеров: в панели «Character» есть поле «Kerning», куда вводят значение в единицах EM.
- Adobe Illustrator векторный редактор, где кернинг регулируется в том же окне «Character». Инструмент «Optical Kerning» автоматически подбирает оптимальные расстояния.
- Adobe InDesign профессиональная верстка книг и журналов, предоставляет гибкие правила кернинга. Здесь можно задать диапазоны «Automatic Kerning», а также вручную добавить пары в таблицу «Kerning Settings».
Важно помнить, что каждый из этих продуктов использует собственный набор единиц - обычно 1EM = ширина буквы «M» в данном шрифте. При переносе работы из одного приложения в другое стоит проверить визуально, а не полагаться только на числовые значения.
Кернинг в веб‑дизайне
В браузерах кернинг контролируется через CSS‑свойство font-kerning. По умолчанию большинство современных браузеров включают автоматический кернинг (font-kerning: normal;), но разработчик может отключить его (font-kerning: none;) для экономии рендеринга.
Для более точного управления часто используют letter-spacing - это аналог трекинга равномерного изменения интервала между всеми символами. Если нужен лишь локальный кернинг, лучше применить span с отдельным классом и задать margin-left отрицательное значение именно для нужной пары.
Не забывайте о совместимости: старые версии Internet Explorer игнорируют font-kerning. Поэтому в проектах, где важна кросс‑браузерная точность, рекомендуется протестировать визуально на разных устройствах.
Кернинг vs Трекинг vs Лигатуры
| Инструмент | Что меняет | Где применяется | Типичный пример |
|---|---|---|---|
| Кернинг | Расстояние между отдельными парами глифов | Заголовки, логотипы, крупный текст | «AV», «To», «Wa» |
| Трекинг | Однородное изменение интервала по всей строке | Текстовые блоки, подписи, кнопки | Увеличение читаемости на небольших экранах |
| Лигатуры | Замена парных глифов одной фигурой | Элитные шрифты, печатные издания | «fi», «fl», «ffl» |
Понимание различий помогает быстро решать, какой инструмент задействовать в конкретной задаче.
Практические советы и типичные ошибки
- Проверяйте кернинг при разных размерах текста. То, что выглядит хорошо в 48pt, может стать «пломбирным» в 12pt.
- Не переусердствуйте: слишком тесный кернинг ухудшает читаемость, особенно для небольших шрифтов.
- Используйте оптический кернинг в программах, если шрифт не содержит готовых пар. Он часто даёт достойный результат без ручной правки.
- Обращайте внимание на язык: в кириллице некоторые буквы (например, «О» и «Г») требуют особого подхода к кернингу.
- При работе с веб‑шрифтами проверяйте, включён ли в файл OpenType‑кернинг. Некоторые сервисы (Google Fonts) могут подавлять его для экономии веса.
Часто задаваемые вопросы
Зачем нужен кернинг, если уже есть трекинг?
Трекинг меняет интервал одинаково во всей строке, а кернинг корректирует только проблемные пары, делая текст более гармоничным.
Можно ли полностью отключить кернинг в браузере?
Да, задав font-kerning: none;. Однако это может ухудшить внешний вид заглавных букв и логотипов.
Как добавить пользовательские пары кернинга в шрифт?
Для этого используют редакторы шрифтов, такие как FontLab профессиональная программа для создания и редактирования OpenType‑шрифтов или Glyphs приложение для macOS, упрощающее работу с кернинг‑таблицами. Внутри открывают таблицу“Kern” и задают значения в единицах EM.
Какие шрифты лучше всего подходят для ручного кернинга?
Это шрифты с широким набором глифов и открытыми OpenType‑таблицами, например Roboto современный сан‑сериф от Google, Playfair Display элегантный сериф с хорошей поддержкой лигатур и классические гарнитуры вроде Times New Roman традиционный шрифт, часто используется в печати.
Влияет ли кернинг на SEO?
Прямо на позиции в поиске не влияет, но улучшенный внешний вид текста повышает пользовательский опыт, а это может отразиться на поведенческих факторах.
Итого, грамотный кернинг - это не просто эстетика, а инструмент, который делает ваш текст читаемым и профессиональным. Применяйте его осознанно, тестируйте на разных устройствах и не забывайте о связях с трекингом и лигатурами.