Что такое кернинг и зачем он нужен
Кернинг — это регулировка пространства между конкретной парой символов. Это не глобальная настройка, а точечная операция, которая решает визуальные проблемы, возникающие при сочетании определённых букв. Классический пример — пара «AV»: без кернинга между ними образуется оптическая «дыра», которая нарушает равномерность текстовой строки.
Исторически кернинг возник в эпоху металлического набора: специалисты буквально подрезали металлические литеры, чтобы соседние символы «заходили» друг под друга. Сегодня шрифтовые файлы содержат тысячи таблиц кернинга — заранее прописанных пар с корректированными значениями.
«Хорошо откернованный заголовок читается не как набор букв, а как единый визуальный объект. Плохой кернинг разрушает это единство мгновенно.»
— Елена Дорошенко, главный редактор MireviaТрекинг: глобальное управление ритмом
Трекинг (letter-spacing в CSS) применяется равномерно ко всем символам в выделенном диапазоне. Это инструмент контроля плотности текстового блока, а не исправления отдельных пар. Трекинг влияет на «дыхание» строки, на её тон и на ассоциации, которые она вызывает.
Положительный трекинг делает текст более разряженным, воздушным, официальным — именно поэтому заголовки CAPS почти всегда набираются с небольшим положительным трекингом: от +50 до +100 единиц в программах вёрстки или от 0.05em до 0.12em в CSS. Отрицательный трекинг создаёт плотность, напряжение, современную эстетику — его используют в крупных дисплейных шрифтах на больших кеглях.
Ключевые различия: таблица сравнения
| Параметр | Кернинг | Трекинг |
|---|---|---|
| Область применения | Конкретная пара символов | Весь текстовый диапазон |
| Цель | Исправление оптических аномалий | Изменение общей плотности текста |
| CSS-свойство | font-kerning; автоматически в OpenType | letter-spacing |
| Когда применять | Крупные заголовки, логотипы, дисплейный набор | Капсельные подписи, мелкий шрифт, интерфейсные метки |
| Типичные значения | —100 до +100 в InDesign/Figma | 0.04em – 0.12em (позитив); –0.02em – –0.04em (негатив) |
Кернинг в UI: когда он критически важен
В интерфейсном дизайне кернинг особенно важен в трёх контекстах. Первый — логотипы и брендинг внутри продукта: даже небольшое несовершенство в наборе слова «ATLAS» или «FORM» бросается в глаза профессионалам и подрывает доверие к бренду. Второй — крупные заголовки лендингов и экранов онбординга: на кегле от 48px и выше автоматический кернинг браузеров часто оказывается недостаточным. Третий — цифры в финансовых и статистических интерфейсах, где плохой кернинг может визуально искажать числовые значения.
В Figma кернинг регулируется через панель Text инспектора: параметр «Letter spacing» отвечает за трекинг, а для пар — через «Kerning» в детальных настройках. В браузере включите font-kerning: normal и используйте text-rendering: optimizeLegibility для автоматической пары кернинга OpenType.
Практические правила для UI-дизайнеров
- Никогда не применяйте отрицательный трекинг к основному тексту: это ухудшает читаемость.
- Для всех CAPS-меток и навигационных ярлыков устанавливайте трекинг от 0.06em до 0.1em.
- Для дисплейных заголовков на кегле 48px+ используйте отрицательный трекинг: –0.02em — –0.04em.
- Проверяйте автоматический кернинг в парах с буквами T, V, W, A, Y — они наиболее проблематичны.
- Сравнивайте результат на физических экранах: Retina и стандартный монитор дают разный оптический результат.
- В системах дизайна фиксируйте токены для трекинга:
--tracking-tight: -0.02em,--tracking-wide: 0.08em.
Инструменты и проверка
Для ручной проверки кернинга профессионалы используют классический приём: переверните набранное слово вверх ногами. Так вы «выключаете» смысловое восприятие и видите только распределение пространства. Неравномерные промежутки будут заметны сразу.
В браузере используйте devtools: инспектируйте computed letter-spacing и проверяйте, не перекрывает ли CSS-трекинг встроенный OpenType-кернинг. Fonttools (Python) позволяет экспортировать таблицу кернинга шрифта в читаемый формат и анализировать все пары.