Кернинг — что это такое во frontend-разработке

Коротко

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

Что такое «Кернинг»

Буквы имеют разную форму, и одинаковое расстояние между ними не всегда воспринимается одинаково. В паре «AV» наклонные штрихи оставляют много воздуха, в паре «То» верхняя перекладина нависает над круглой буквой. Без поправки слово выглядит рыхлым или с «дырами». Поэтому дизайнер шрифта заранее прописывает для сотен пар поправки — их называют кернинговыми парами.

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

Как управлять кернингом в CSS

За включение отвечает свойство font-kerning. Значение normal заставляет применять пары из шрифта, none отключает их, а auto оставляет решение браузеру — некоторые браузеры при этом не применяют кернинг к мелкому тексту. Низкоуровневый способ — OpenType-функция kern через font-feature-settings.

h1, .hero-title {
  font-kerning: normal;
}
/* ручная поправка одной пары в логотипе */
.logo .pair-av {
  letter-spacing: -0.04em;
}

Ручная поправка нужна редко: обычно это крупный логотип или заголовок, где дизайнер увидел неудачную пару. Значение лучше задавать в em, чтобы оно масштабировалось вместе с размером шрифта.

Кернинг и разрядка — не одно и то же

Кернинг меняет расстояние точечно, только внутри определённых пар. Межбуквенный интервал (letter-spacing, трекинг) равномерно раздвигает или сжимает все буквы строки. Их часто путают: если заголовок кажется слишком плотным целиком, нужен трекинг, а если неудачно смотрятся две конкретные буквы — кернинг.

Где это заметно

Крупные заголовки и баннеры: на размере 48–72 пикселя любая неровность бросается в глаза.
Логотипы, набранные веб-шрифтом, а не вставленные картинкой.
Заголовки заглавными буквами: пары «LT», «AV», «ГА» без кернинга разваливаются.

Проверить, есть ли в шрифте пары, можно простым сравнением: вывести одно и то же слово с font-kerning: none и normal. Если разницы нет, кернинг в гарнитуре не размечен. Подробнее о других приёмах оформления текста — в статье о типографике.