Рубрика: Типографика

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

Фиксированный носитель против адаптивной среды

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

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

Единицы измерения и сетка

Печать: пункты, миллиметры, пики

В полиграфии основные единицы — пункты (pt) и миллиметры. Кегль, интерлиньяж, отбивки измеряются в пунктах; поля и форматы — в миллиметрах. В InDesign верстальщик выстраивает модульную сетку и базовую линию, чтобы текст ложился ритмично. Базовая сетка помогает синхронизировать строки в колонках и избегать «пляшущих» интерлиньяжей.

Веб: пиксели, rem, em, vw

В CSS мы используем относительные единицы: rem зависит от корневого размера шрифта, em — от размера родителя, vw — от ширины вьюпорта. Абсолютные пиксели тоже допустимы, но они не учитывают пользовательские настройки. Современный подход — fluid typography с функцией clamp(), которая плавно меняет размер шрифта между заданными границами.

• px — фиксированный размер, предсказуемый, но не адаптивный;
• rem — удобно для масштабирования от корневого элемента;
• em — хорош для компонентов, где размер зависит от контекста;
• vw/vh — для привязки к размеру окна, но требует осторожности.

Вместо жёсткой базовой сетки в вебе применяют вертикальный ритм через line-height и отступы, заданные в относительных единицах. Это позволяет сохранять ритм при изменении размера шрифта. Базовую сетку можно эмулировать, но она не будет абсолютной: пользователь может изменить масштаб, и ритм собьётся. Поэтому вместо жёсткой сетки проектируют модульные отступы, кратные базовой единице.

Шрифты и их рендеринг

Форматы и внедрение

В печати шрифты внедряются в PDF или передаются в типографию вместе с макетом. Основные форматы — OpenType (OTF), TrueType (TTF), реже PostScript. Важно следить за лицензией и наличием всех начертаний. В вебе шрифты подключаются через @font-face, а оптимальный формат — WOFF2 с поддержкой вариативных шрифтов. Это снижает вес и ускоряет загрузку. Вариативные шрифты позволяют в одном файле хранить множество начертаний и плавно менять вес и ширину. В печати они тоже используются, но требуют поддержки в RIP и программах вёрстки. В вебе это экономит загрузку и даёт гибкость.

Рендеринг и хинтинг

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

Цвет и контраст

Полиграфия работает в CMYK, Pantone и других inks. Цвет зависит от бумаги, способа печати и растискивания. Дизайнер учитывает, как краска ляжет на поверхность, и проверяет цветопробу. Веб использует RGB, sRGB и всё чаще P3. Цвета отображаются на экранах с разной калибровкой, а тёмная тема может инвертировать восприятие. Для текста критичен контраст: стандарт WCAG рекомендует соотношение не ниже 4.5:1 для основного текста. В печати контраст зависит от цвета бумаги и краски, но нет режимов отображения.

Набор и выключка

Кернинг, трекинг, выключка

В печати доступны тонкие настройки: оптический кернинг, трекинг для диапазонов, выключка по формату с управляемыми переносами и минимальными/максимальными пробелами. В InDesign можно настроить «висячую пунктуацию» и оптическое выравнивание полей.

В вебе CSS даёт letter-spacing, word-spacing, text-align, hyphens. Однако выключка по ширине (text-align: justify) часто приводит к «рекам» из пробелов, если не включены переносы и язык. Свойства text-wrap: balance и pretty помогают бороться с висячими словами и короткими последними строками, но поддерживаются не везде.

Читаемость и адаптивность

В печати длина строки фиксирована: оптимально 45–75 знаков. Интерлиньяж обычно составляет 120–145% от кегля. В вебе длина строки задаётся в ch или процентах, а line-height лучше указывать без единиц, чтобы он наследовался пропорционально. Адаптивность требует не только гибких размеров, но и перестройки иерархии: на маленьких экранах заголовки могут уменьшаться, отступы — сжиматься, а многоколоночный текст становится одноколоночным.

Доступность и семантика

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

Типичные ошибки при переносе макета

• Использование пунктов в CSS без пересчёта — на экране это даёт непредсказуемый размер.
• Жёсткие переносы строк и <br> для управления вёрсткой.
• Выключка по ширине без переносов и указания языка.
• Слишком плотный или разреженный трекинг, скопированный из печатного макета.
• Игнорирование тёмной темы и пользовательских настроек контраста.
• Тонкие начертания для мелкого текста на экранах с низкой плотностью.
• Копирование цвета из CMYK в RGB без цветокоррекции.

Что общего у печати и веба

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

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

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

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

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

• Кернинг — расстояние между конкретной парой знаков. Точечная правка, работающая на крупном кегле.
• Трекинг — равномерное изменение пробелов во фрагменте: слове, строке, абзаце, заголовке.
• Интерлиньяж (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 на длинных абзацах в вебе.

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

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

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