Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

Что такое кернинг шрифта?

Веб-дизайнШрифты
Анонимный вопрос
  · 3,3 K
Дизайн-лид из Ozon отвечает на вопросы об интерактивном дизайне, UX, UI-анимации проектиро...  · 18 июн 2019  · slashdesigner.ru

С кернингом неразрывно связано понятие трекинга.

Трекинг — универсальная настройка расстояния между всеми буквами в слове. Трекинг может быть плотным, нормальным или разреженным. В Фигме устанавливается в процентах.

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

Зачем это нужно

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

Пример слова, в котором необходим кернинг: УЛИЦА. Если кернинг не учитывается, может быть непонятно, есть ли после У пробел, или нет. От этого становится неясен смысл написанного.

В экранных интерфейсах большинство надписей кернятся автоматически, однако в редакторах обычно есть настройка, позволяющая настраивать трекинг и кернинг. Например, в Фигме за это отвечает одно поле Tracking, которое настраивается в процентах относительно ширины каждой буквы. Если трекинг 0%, значит используется ширина буквы по умолчанию.

Трекинг и кернинг в вебе

За трекинг отвечает свойство letter-spacing, которому желательно выдавать относительные величины в em. 2em — двойное межбуквенное расстояние. За кернинг отвечает CSS-свойство font-kerning. У него может быть три значения: auto — определяется браузером, normal — кернинг автоматом, либо none — не используется.

Как кернить в Фигме

Нужно выделить букву и настраивать расстояние перед ней, регулируя значение в том же самом поле Tracking. Чем больше процентное значение, тем дальше будет отодвигаться следующая буква.

Screenshot 2019-06-18 at 17.01.54.png

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