Как составить типографическую шкалу для сайта и цифрового продукта

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

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

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

Шкалу нельзя выбирать отдельно от контекста. Один и тот же шрифт при одинаковом размере может выглядеть плотным, крупным, низким или слишком воздушным. До расчёта зафиксируйте назначение продукта, основные типы экранов, язык интерфейса, среднюю длину заголовков и текстов, а также минимальную ширину мобильного макета.

Начните с основного текста, потому что именно он формирует ощущение масштаба интерфейса. Для веб-страницы или продукта можно взять отправную точку 16 пикселей, а затем проверить её на выбранном шрифте и реальном абзаце. Если гарнитура имеет крупный или мелкий рисунок, визуально комфортный размер может отличаться при том же техническом значении.

Базовый размер не должен определяться только привычкой команды. Оцените, удобно ли читать текст на ноутбуке и мобильном устройстве, различаются ли соседние уровни и помещаются ли элементы интерфейса в заданную высоту. Для длинных статей особенно важны длина строки, контраст и межстрочный интервал, а не только число в пикселях.

Коэффициент определяет, насколько каждый следующий уровень отличается от предыдущего. Например, при базовом размере 16 пикселей и коэффициенте 1,25 последовательность может выглядеть так: 12,8, 16, 20, 25, 31 и 39 пикселей с округлением под систему. Это не готовый шаблон, а способ получить логичные отношения между размерами.

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

После расчёта привяжите размеры не к названиям HTML-тегов, а к визуальным и функциональным ролям. H1 и H2 могут выглядеть по-разному на разных типах страниц, а кнопка иногда должна быть крупнее подписи, хотя технически оба элемента содержат короткую строку. Имена вроде text-small, body, heading-medium и display помогают описывать намерение стиля.

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

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

Адаптивная типографика не означает, что каждый размер должен непрерывно меняться. Основной текст часто можно оставить одинаковым или почти одинаковым, а крупные заголовки уменьшать на узких экранах, чтобы избежать неудачных переносов. Для плавного изменения используют формулы и функцию clamp, но даже в таком случае задают минимальное и максимальное значение.

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

Представим редакционный сайт с базовым текстом 16 пикселей. Рабочая шкала может включать подпись 12, вторичный текст 14, основной текст 16, подзаголовок 20, заголовок раздела 28, заголовок страницы 36 и крупный промо-заголовок 48 пикселей. Для мобильной версии последние два уровня можно уменьшить до 30 и 38 пикселей, если это улучшает переносы.

Для интерфейса аналитического сервиса набор может быть компактнее: подпись 12, текст таблицы 14, основной текст 16, заголовок карточки 18, заголовок экрана 24 и крупное значение 32 пикселя. В таком продукте важнее быстрое сканирование данных, поэтому чрезмерно большие заголовки будут занимать место и нарушать плотность рабочего пространства.

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

Самая распространённая ошибка — добавлять размеры без понятной роли. Если в проекте есть почти одинаковые варианты текста 15, 16, 17 и 18 пикселей, команда будет путаться, а визуальная иерархия станет менее предсказуемой. Лучше оставить меньше уровней и чётко описать, где каждый из них используется.

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

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

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

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

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

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

Рабочая типографическая шкала строится от базового текста и реальных сценариев, а не от случайного набора красивых размеров. Определите роли, выберите последовательный шаг, настройте интервалы, проверьте адаптивность и закрепите правила в дизайн-системе. Если для проекта нужен собственный характер, начните с создания шрифта на fontgenerator.ru и затем настройте шкалу под его пропорции и начертания.