Кернинг (Kerning): что это такое и как настраивать расстояние между буквами

Что такое кернинг простыми словами

У каждой буквы в шрифте есть невидимые поля слева и справа. Они рассчитаны так, чтобы большинство сочетаний смотрелись хорошо. Но буквы со скошенной или выступающей формой (A, V, T, Г, У) в паре оставляют лишний просвет.

Кернинг уменьшает или увеличивает расстояние именно в таких парах. В итоге промежутки между буквами выглядят одинаковыми, даже если в пикселях они разные. Главное здесь — не цифры, а оптическое восприятие.

Слово пришло из английского: kern — выступающая часть металлической литеры в наборном шрифте. Благодаря ей соседние буквы можно было поставить ближе друг к другу.

Зачем нужен кернинг в интерфейсах

Кернинг делает текст аккуратным. Пользователь редко замечает хороший кернинг, но плохой видит сразу.

• Читаемость. Ровные промежутки помогают глазу быстрее складывать буквы в слова.
• Цельность слова. Без кернинга слово может визуально «распасться»: WAVE читается как W A VE.
• Восприятие бренда. В логотипах и крупных заголовках неровные промежутки выглядят непрофессионально.
• Визуальная иерархия. Аккуратный заголовок воспринимается как единый блок и лучше держит внимание.

Кернинг, трекинг и интерлиньяж: в чём разница

Эти три понятия часто путают. Коротко: кернинг — про пару букв, трекинг — про всю строку, интерлиньяж — про расстояние между строками.

Виды кернинга

Метрический кернинг

Автор шрифта заранее прописывает поправки для сложных пар букв. Программы и браузеры применяют их автоматически. У качественных шрифтов таких пар могут быть тысячи.

Оптический кернинг

Программа сама анализирует форму букв и выравнивает промежутки. Такой режим есть, например, в Adobe Illustrator и InDesign. Он полезен, когда в шрифте мало встроенных пар или вы смешиваете разные шрифты в одном слове.

Ручной кернинг

Дизайнер сам двигает буквы, ориентируясь на глаз. Так делают с логотипами, заголовками на первом экране и надписями на баннерах.

Кернинговые пары

Кернинговая пара — это сочетание двух символов, для которого задана особая поправка. Чаще всего проблемы возникают в таких сочетаниях:

• Латиница: AV, AW, AT, To, Te, Ty, LT, LY, P., F.
• Кириллица: Га, Го, То, Уа, Ра, Г., Та, «ДУ»
• Цифры и знаки: 1 рядом с другими цифрами, кавычки и скобки рядом с буквами

У кириллических шрифтов кернинг часто проработан хуже, чем у латиницы. Перед выбором шрифта для проекта наберите слова с «Г», «Т» и «У» и посмотрите на промежутки.

Как настроить кернинг в Figma

Figma автоматически применяет встроенный кернинг шрифта. Отдельной кнопки «Кернинг» в панели нет, но пару букв можно поправить вручную через Letter spacing.

1. Дважды кликните по текстовому слою, чтобы перейти в режим редактирования.
2. Выделите первую букву пары. Промежуток добавляется справа от выделенного символа.
3. В правой панели в разделе Text измените значение Letter spacing. Отрицательное значение сближает буквы, положительное — раздвигает.
4. Работайте в процентах, а не в пикселях. Тогда поправка сохранится при смене размера шрифта.
5. Проверьте результат при масштабе 100% и в уменьшенном виде.

Для текста целиком тот же параметр работает как трекинг. Ручные правки для отдельных букв не сохраняются в текстовых стилях, поэтому делайте их только для конкретных заголовков и логотипов.

Кернинг в вебе (CSS)

В браузере за кернинг отвечает свойство font-kerning. Оно включает или выключает встроенные кернинговые пары шрифта.

h1 {
  font-kerning: normal;      /* включить кернинг шрифта */
  letter-spacing: -0.02em;   /* трекинг для крупного заголовка */
}

У font-kerning три значения: auto (решает браузер), normal (включить) и none (выключить). Для ручной поправки одной пары букву оборачивают в <span> и задают ей свой letter-spacing. Это имеет смысл только для логотипа или главного заголовка.

Когда кернинг действительно важен

Ручной кернинг нужен там, где текст крупный и его рассматривают, а не просто читают.

• Логотипы. Здесь кернинг настраивают всегда и вручную.
• Заголовки первого экрана и баннеры. При размере от 40–48 px неровности становятся заметны.
• Текст заглавными буквами. У заглавных букв больше проблемных сочетаний.
• Иконки приложений и обложки с короткими надписями.

Для основного текста, кнопок и подписей обычно хватает встроенного кернинга шрифта.

Частые ошибки

1. Ручной кернинг в основном тексте. Это долго, а при смене текста все правки придётся делать заново.
2. Трекинг вместо кернинга. Изменив расстояние для всего слова, неудачную пару не исправишь: просвет останется.
3. Слишком плотный текст. Буквы сливаются, особенно «рн» и «тт» в мелком размере.
4. Проверка только в крупном масштабе. При увеличении в Figma всё выглядит иначе, чем на реальном экране.
5. Шрифт с плохой кириллицей. Если в шрифте не проработаны кириллические пары, вручную это не исправить. Лучше выбрать другой шрифт.

Заключение

Кернинг — небольшая деталь типографики, которая отличает аккуратный дизайн от небрежного. В интерфейсах достаточно выбрать качественный шрифт и вручную поправить только крупные заголовки и логотипы. Главное правило: ориентируйтесь на глаз, а не на цифры.