Почему кастомная типографика разъезжается на реальном контенте
Дизайн-макет типографики почти всегда проверяют на коротких строках: «Заголовок», две-три строки текста. Как только в блок попадает реальное наполнение — длинные составные термины, абзацы на несколько сотен знаков, — типографика сайта перестаёт держать сетку. Разбираем конкретные поломки, которые видно на первом же прогоне с боевым текстом.
Перенос строк ломается первым: заголовок без корректных точек переноса вылезает за колонку или рвётся посреди слова, а выключка по обоим краям даёт «реки» из пробелов и разную плотность соседних строк. Переполнение блока проявляется не только визуально — если высота карточки завязана на содержимое, одна длинная строка сдвигает секцию и ломает её выравнивание относительно соседних.
Шкала размеров на дискретных шагах под каждый контрольный размер экрана даёт скачки между разделами: заголовок одного блока визуально тяжелее такого же по смыслу в другом. Интерлиньяж часто задан локально в компонентах — где-то множителем, где-то жёстким значением, — и при подстановке другого начертания строки начинают «дышать» по-разному, а вертикальный ритм секций рассыпается.
Читаемость текста страдает последней, но заметнее всего. Строка длиннее 90 знаков заставляет терять начало следующей, одинокое слово в последней строке абзаца и предлог в конце колонки добивают ритм. Масштабирование страницы пользователем добавляет ещё один слой: вёрстка под одну ширину на промежуточных значениях переполняется и уводит блоки вниз.
Как это закрывается — от расстановки переносов и непрерывной шкалы до правил интерлиньяжа для каждого компонента.
Что меняется после переработки: скорость, читаемость, устойчивость
Единая шкала убирает ручной подбор кегля в каждом блоке: размеры, межстрочный интервал и отступы заданы набором переменных, а не размножены по стилям. Остаётся 6-8 размеров текста вместо трёх десятков случайных значений — это видно по числу уникальных правил и по весу отдаваемых браузеру стилей. Меньше значений — меньше пересчётов при отрисовке, и текст появляется целиком, а не достраивается по мере применения стилей.
Читаемость перестаёт зависеть от ширины экрана. Длина строки держится в диапазоне 60-75 знаков, межстрочный интервал основного текста — около 1.5, у заголовков плотнее, чтобы они читались вместе с последующим абзацем. Контраст текста и фона проверяем по порогу доступности, а не на глаз.
Адаптивная типографика строится на плавном изменении размеров между границами экранов, а не на отдельном наборе правил под каждое разрешение. Промежуточные ширины — планшет в портретной ориентации, крупный телефон — не проваливаются в мелкий или обрезанный текст. Точек перелома становится меньше, а поведение между ними предсказуемым.
Вертикальный ритм держит общий шаг: отступы между заголовком, абзацем, списком и врезкой кратны одному значению, поэтому блоки не слипаются и не расходятся. Вместе с подмножеством глиф и сокращённым набором начертаний это ускоряет первую отрисовку текста и снижает сдвиг вёрстки при подмене шрифта.
Способы подключения шрифтов и варианты типографской шкалы
Выбор между самохостингом шрифтов и внешним подключением решают не вкусом, а требованиями к контролю над загрузкой. Самохостинг даёт владение подмножеством набора, кэшированием и правилом font-display, но требует следить за весом файлов и лицензиями. Внешний хостинг подключается одной строкой, зато добавляет чужой домен в критический путь отрисовки первого экрана.
Типографская шкала строится либо как фиксированный набор ступеней, либо как непрерывная функция от ширины экрана. Ниже — альтернативы, между которыми реально выбирают на старте проекта.
| Вариант | Когда подходит | Ограничения |
|---|---|---|
| Самохостинг шрифтов с подмножеством под нужный алфавит | Один-два начертания в основе, важна предсказуемая отрисовка | Нужно обновлять файлы и следить за лицензией на каждое начертание |
| Вариативный шрифт одним файлом | Много степеней насыщенности, плавные переходы веса и курсива | Файл тяжелее статичного, для старых браузеров нужен запасной вариант |
| Системный шрифтовой стек | Скорость и нулевая задержка важнее уникальности начертания | Отрисовка различается между платформами, бренд теряет узнаваемость |
| Модульная шкала на фиксированных ступенях | Простой интерфейс, два-три размера текста | На нестандартных ширинах между ступенями появляются разрывы |
Модульная шкала с плавным пересчётом через clamp() |
Много типов контента, адаптив от мобильного до широкого экрана | Сложнее отлаживать: размер нельзя прочитать прямо в макете |
Как устроена работа над типографикой: этапы от аудита до передачи
Кастомная типографика перестаёт «плыть» только тогда, когда описана как система: шкала размеров, межстрочные расстояния и вертикальный ритм заданы один раз и переиспользуются. Поэтому работа идёт последовательно — от инвентаризации текущих стилей до документа, по которому типографику воспроизводят без нас.
- Аудит типографики. Собираем все стили с работающих страниц и из макетов: кегли, насыщенности, межстрочные, отступы до и после блока. Отмечаем, где значения заданы вручную и разошлись между разделами.
- Схема шкалы. Считаем модульную шкалу от базового размера текста, привязываем заголовки к коэффициенту и шагу сетки. Здесь же определяем, как шкала меняется на каждом переломе ширины экрана.
- Типографские стили. Описываем их как именованные сущности: размер, интерлиньяж, трекинг, насыщенность, вертикальные отступы. Компоненты ссылаются на эти значения, а не на числа, — правка одного места меняет весь интерфейс.
- Настройка и подключение шрифтов. Подбираем начертания и подмножества, подключаем с собственного домена, настраиваем подмену и убираем скачок разметки при загрузке.
- Проверка на устройствах. Смотрим реальные экраны и браузеры: переносы, обрезку выносных элементов, «сироты» в заголовках, поведение при системном увеличении текста и в тёмной теме.
- Передача документации. Отдаём таблицу стилей, правила применения, памятку для редакторов контента и перечень мест для регрессии. Новые блоки после этого собираются по этим правилам.
Комплект стилей, переменные шкалы и регламент правок
Сдача типографики — это не картинка и не набор красивых заголовков, а рабочая система, которой заказчик пользуется сам. Поэтому в комплект входит всё, что нужно для правок без нашего участия: от переменных шкалы до правил, по которым новый сотрудник соберёт страницу так же, как эталонную.
- Набор типографских стилей. Заголовки всех уровней, лид, основной текст, подписи, цитаты, списки, таблицы и сноски — каждый с прописанными межстрочным расстоянием, отбивками до и после, правилами переноса и висячей пунктуацией.
- Переменные шкалы. Размеры, интерлиньяж, отбивки, насыщенности и контрастные пары вынесены в переменные, привязанные к контрольным точкам адаптива: правка одного значения перестраивает весь сайт, а не отдельную страницу.
- Правила применения. Где уместен каждый стиль, сколько уровней заголовков допустимо на странице, как оформлять вложенные списки и длинные подписи к изображениям.
- Макет-образец. Эталонная страница, где собраны сразу все элементы — от первого заголовка до таблицы и сноски; по ней сверяют любую новую вёрстку.
- Регламент правок. Кто и в каком порядке меняет значения шкалы, что проверяется перед публикацией, как фиксируется причина изменения, чтобы через полгода было понятно, откуда взялось текущее значение.
- Инструкция для редакторов. Пошаговый документ на понятном языке: как добавить материал, выбрать правильный стиль, что делать с заголовком длиннее строки и куда обращаться, если макет не сходится.
- Чек-лист приёмки. Контрольные точки по адаптиву и контрасту: проверка на узких экранах, поведение при увеличении системного шрифта, читаемость текста поверх изображений.
Всё это лежит рядом с кодом и обновляется вместе с ним, поэтому типографика не расходится по страницам со временем. Опишите задачу — вернёмся с оценкой и планом работ.
Кейс: портал с разнородным контентом и ломаной сеткой
Портал собирали разные команды: у новостного раздела своя вёрстка, у каталога — своя, у справочных страниц — третья. Контент разнородный: длинные тексты с врезками, таблицы сравнения, карточки с длинными названиями. Заголовки вылезали из контейнеров, таблицы растягивали страницу, а сетку чинили в каждом разделе отдельно.
На старте посчитали, сколько страниц реально ломается: у 38% шаблонов текст переполнял контейнер хотя бы на одном контрольном разрешении. Правка макета занимала в среднем 90 минут — значения подбирали заново, общей шкалы не было.
Что изменили
Собрали единую шкалу и закрепили её в переменных: кегль, интерлиньяж, межбуквенное расстояние и вертикальные отступы стали общими для всех разделов. Шкала интерполируется между контрольными разрешениями — размеры считаются от ширины экрана, а не переключаются ступенями. Основой взяли Inter в вариативной версии: одна гарнитура на весь портал, разные начертания вместо второго шрифта.
Переполнение закрыли правилами, а не запретами: минимальный размер по нижней границе диапазона, ограничение длины строки, перенос длинных слов и артикулов, а таблицы прокручиваются внутри своей области и не растягивают страницу. Правила лежат в общем слое, поэтому новый раздел наследует поведение.
Что получилось
Доля страниц с переполнением упала с 38% до 2%. Правка макета сократилась с 90 до 25 минут: меняется токен, а не значения по разделам. Шесть разделов с разной сеткой свели к одной — колонки, отступы и ритм заголовков совпадают.
Чем кастомная типографика отличается от готового шрифтового набора?
Готовый шрифтовой набор — гарнитура с собранными начертаниями и понятной лицензией. Его хватает, когда у сайта один шаблон страницы и стандартная сетка: подключаем два-три начертания, задаём базовый размер и коэффициент шкалы — типографика ведёт себя предсказуемо на всех экранах.
Ограничения проявляются на объёме. Чужие метрики не совпадают с вашей сеткой, крупные заголовки требуют ручной правки трекинга, а лишние языковые разделы тянут вес сборки. Готовый набор вроде Inter закрывает интерфейс, но не решает задачи айдентики и многоязычной вёрстки.
Кастомная типографика начинается там, где шкалу проектируют под контент. Инженер задаёт модульную шкалу — коэффициент 1.2–1.333 для интерфейсов и около 1.5 для текстовых страниц, — отдельные правила интерлиньяжа и трекинга для крупных и мелких кеглей, плавные переходы между экранами вместо ступенчатых скачков. В шрифт добавляют недостающие глифы и локальные начертания, а в стили — метрики подмены, чтобы вёрстка не прыгала, пока файл загружается.
Сроки переработки различаются на порядок. Готовый набор внедряем за несколько дней: подключение, шкала, проверка переносов и контраста. Своя система — недели: аудит текущих стилей, проектирование шкалы и правил, доработка глифов, эталонная страница со всеми состояниями.
Критерий простой: если типов контента меньше пяти и бренд не спорит со стандартной гарнитурой — хватит готового набора. Если страниц десятки и языков несколько, точнее работает своя система.
Технические вопросы, которые задают перед стартом
Эти сомнения всплывают почти на каждом проекте, и почти все они решаются на этапе проектирования шкалы — позже переделка задевает вёрстку, компоненты и сборку. Ниже — четыре вопроса, которые чаще всего тормозят согласование, с ответами наших инженеров.
Мы не гадаем: лицензию читаем до вёрстки, поведение шрифта проверяем на реальных текстах — длинных заголовках, узких колонках, таблицах, а не на демо-абзаце из макета.
Какие лицензии на шрифты нужно учитывать?
Различаем свободные и коммерческие: у вторых считаются начертания, домены и объём показов, а не сам факт покупки файла. Проверяем это до вёрстки — фиксируем, какие начертания реально нужны шкале, собираем подмножество по используемым глифам и размещаем файлы на своём домене, чтобы не зависеть от чужой раздачи.
Как настроить переносы слов, чтобы текст не «рвался»?
Автоматический перенос требует корректного атрибута языка у документа и словарей для него — без них браузер либо не переносит, либо рвёт слова неудачно. Для узких колонок добавляем аварийный перенос длинных слов, для заголовков — балансировку строк, а термины без словаря размечаем мягкими переносами вручную.
Что меняется в тёмной теме?
Тёмная тема — не инверсия цветов. Тонкие начертания на тёмном фоне кажутся жирнее и «заплывают», поэтому для неё подбираем вес на ступень ниже и отдельные значения межстрочного расстояния. Плюс проверяем контраст по требованиям доступности и отдаём переключатель, учитывающий системную настройку.
Как типографика ведёт себя при печати страниц?
Печать — отдельный режим: тёмную тему отключаем, иначе страница уходит в расход краски и нечитаемые плашки. Задаём размеры в типографских единицах, показываем адреса ссылок, запрещаем разрывы внутри заголовков и карточек, а для длинных документов включаем шрифт с засечками.
Что прислать для старта и как мы вернёмся с оценкой
Чтобы оценка опиралась на факты, а не на догадки, для старта достаточно нескольких исходников. Чем полнее картина по шрифтам, сетке и контенту, тем точнее план работ и меньше правок на этапе вёрстки.
- адрес текущего сайта или тестового стенда и перечень страниц, где типографика уже вызывает вопросы;
- файлы шрифтов с лицензиями и списком доменов, где разрешено использование;
- макеты с текстовыми стилями либо выгрузку с размерами, отступами и межстрочными;
- брендбук или правила набора: гарнитуры, начертания, кегли, переносы, поведение заголовков;
- статистику разрешений экрана и типов устройств за последние месяцы;
- описание платформы и текущего подхода к стилям: тема, сборка, переменные оформления;
- требования по доступности и локализации, если языков на сайте больше одного.
После этого мы разбираем материалы и возвращаемся с планом работ: какой набор шкал и начертаний нужен, как они подключаются, в каком порядке выкладываем по страницам. На разбор уходит один-два рабочих дня, оценка приходит вместе с планом — этапами, сроками и тем, что требуется от вас на каждом шаге. Если часть исходников отсутствует, соберём недостающее сами и отдельно отметим в плане, какие решения приняты по нашей инициативе.
