Как настроить типографику в макете: кернинг, трекинг и интерлиньяж на практике

Типографика в макете редко разваливается целиком. Чаще она «немного не так»: слова норовят разъехаться, заголовок выглядит рыхлым, строки в абзаце слипаются или, наоборот, теряют связь друг с другом. Причина почти всегда в трёх настройках — кернинге, трекинге и интерлиньяже. Это не декоративные параметры, а инструменты управления плотностью и вертикальным ритмом текста. Ниже — практика: что именно крутить, на сколько и в каких случаях.

Три инструмента — три разные задачи

Их постоянно путают, а вместе с тем каждый решает свою задачу и работает на своём уровне.

• Кернинг — расстояние между конкретной парой знаков. Точечная правка, работающая на крупном кегле.
• Трекинг — равномерное изменение пробелов во фрагменте: слове, строке, абзаце, заголовке.
• Интерлиньяж (leading) — расстояние между базовыми линиями соседних строк, то есть межстрочный интервал.

Кернинг и трекинг меняют горизонтальный ритм, интерлиньяж — вертикальный. Ошибки в них ощущаются по-разному: первая группа делает набор «дырявым» или слипшимся, вторая — превращает абзац в серое пятно либо разрывает его на отдельные полосы.

Кернинг: работа с отдельными парами

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

Проблемные пары

Раньше всех расходятся пары с диагоналями, открытыми формами и прямыми стойками рядом:

• «ГА», «АУ», «ТА», «УД», «ЛД» — прописные с диагональными элементами;
• «Го», «Тс», «Ул» — прописная плюс строчная с открытой формой;
• «1», «7», «4» и любые табличные цифры в наборе;
• кавычки и знаки препинания рядом с прописными: «А» «В», «Р.»

Как править

• В InDesign поставьте курсор между знаками и используйте Alt + стрелка (Option на Mac) или поле кернинга в панели «Символ».
• В Figma в поле кернинга выберите Optical или задайте значение вручную, подтягивая пары на глаз.
• В Illustrator и Photoshop логика та же — панель «Символ», ручной кернинг.

Важное ограничение: ручной кернинг привязан к конкретному месту в строке. Если текст перетекает, набирается заново или правится в CMS, правка теряется. Поэтому кернят заголовки и логотипы, а не абзацы в потоке. Для остального включают оптический кернинг, а метрический оставляют по умолчанию.

Трекинг: масштаб и плотность набора

Трекинг работает на диапазоне. В InDesign он измеряется в тысячных долях кегля: значение +20 означает 0,02 em. Ниже — рабочие ориентиры, от которых можно отталкиваться.

• Основной текст 9–11 pt: 0.
• Мелкий кегль (6–8 pt — сноски, подписи, юридические тексты): +20…+50.
• Инверсия, светлое на тёмном: +20…+40, так как буквы визуально «жирнеют» от ореола.
• Прописные и капитель: +50…+150, иначе буквы слипаются в единый блок.
• Крупные заголовки от 36 pt: −10…−30, чтобы набор не рассыпался.

Трекингом нельзя лечить выключку

Соблазн велик: строка не влезает в формат — и рука тянется к трекингу. Так делать не стоит. Отрицательный трекинг в одном абзаце и нулевой в соседнем создают эффект «пятнистого» текста: плотность строк скачет, и глаз это считывает как небрежность. Правильные инструменты — ширина колонки, разбивка на строки, переносы, кегль. Трекинг — последнее средство, и в одном абзаце его значение не должно прыгать.

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

В CSS за это отвечает letter-spacing. Задавайте его в относительных единицах, чтобы он масштабировался вместе с кеглем: 0.02em для подписей, 0.05–0.1em для прописных заголовков. Не применяйте отрицательный трекинг к длинным абзацам: читаемость падает быстрее, чем улучшается внешний вид. И не забывайте про font-kerning: normal — по умолчанию в некоторых браузерах кернинг выключен.

Интерлиньяж: вертикальный ритм

Интерлиньяж задаёт плотность абзаца и напрямую влияет на читаемость. В InDesign по умолчанию стоит 120 % от кегля — это разумная отправная точка, но не универсальное решение.

• Основной текст 9–10 pt: 120–135 %.
• Текст 11–12 pt: 120–130 %.
• Длинная строка (от 80 знаков): 130–145 %.
• Короткая колонка, мобильная вёрстка: 110–125 %.
• Заголовок в одну строку: 100–110 %; в две–три строки: 90–100 %.
• Сноски и подписи мелким кеглем: 115–130 %.

Главная зависимость простая: чем длиннее строка, тем больше нужен интерлиньяж. Глазу сложно возвращаться к началу длинной строки, и увеличенный межстрочный интервал помогает не потерять место. И наоборот: в узкой колонке слишком щедрый интерлиньяж рвёт абзац на отдельные строчки, и текст перестаёт восприниматься как единое целое.

Как проверить результат

• Прищурьтесь или отойдите от экрана на пару шагов: абзац должен читаться как серая полоса равномерной плотности.
• Переверните текст или размойте его — так лучше видны «дыры» и слипшиеся пары.
• Проверьте строки с прописными, цифрами и выделениями: их плотность выше, и интерлиньяж вокруг них иногда стоит поправить отдельно.
• В многострочном заголовке следите, чтобы выносные элементы верхней строки не задевали нижнюю: интервал меньше кегля работает только при запасе по высоте.

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

1. Ручной кернинг всего абзаца вместо заголовков и отдельных пар.
2. Попытка исправить выключку по формату трекингом.
3. Одинаковый интерлиньяж для всех кеглей в макете.
4. Отключённый оптический кернинг в заголовках.
5. Игнорирование инверсии: тот же трекинг, что и для тёмного текста на светлом.
6. Отрицательный letter-spacing на длинных абзацах в вебе.

Короткий чек-лист перед сдачей макета

• Оптический кернинг включён, ручной кернинг стоит только в крупных надписях.
• Трекинг прописных увеличен, трекинг основного текста равен нулю.
• Значение трекинга не меняется внутри одного абзаца.
• Интерлиньяж пересчитан отдельно для заголовков, основного текста и сносок.
• Абзацы читаются как ровные серые полосы при размытии.

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