Типографическая шкала: как связать размеры текста между собой

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

Типографическая шкала — это система, которая связывает размеры основного текста, подзаголовков, заголовков, подписей, кнопок и служебных элементов. Вместо случайного набора значений дизайнер задаёт несколько уровней: например, 14, 16, 20, 25, 32 и 40 пикселей. Такие значения образуют визуальный ритм и позволяют быстро назначать стили новым элементам.

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

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

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

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

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

После выбора базы определите коэффициент, который будет связывать соседние уровни. Если базовый размер равен 16 пикселям, при коэффициенте 1,25 следующий крупный уровень составит 20 пикселей, затем 25, 31 или 32 и так далее. Коэффициент не обязан применяться без округления: в интерфейсе практичные целые значения обычно удобнее точной математической последовательности.

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

Предположим, что основной текст сайта имеет размер 16 пикселей, а выбранный коэффициент находится около 1,25. Получается компактная система, которую легко применять в макете: 12 пикселей для служебных подписей, 14 для вторичного текста, 16 для основного, 20 для небольших подзаголовков, 25 или 26 для заголовка третьего уровня, 32 для второго уровня и 40 для первого.

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

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

Названия стилей лучше связывать с функцией, а не с конкретным числом. Форматы Heading Large, Heading Medium, Body, Small и Caption легче поддерживать, чем стили вроде Text 18 или Blue Paragraph. Если позже изменится шрифт или масштаб интерфейса, функциональные названия сохранят смысл, а значения можно будет обновить централизованно.

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

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

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

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

Для статьи можно выбрать базовый текст 17 пикселей, подзаголовки 24 пикселя, заголовки разделов 32 пикселя и главный заголовок 44 пикселя на широком экране. Такой набор создаёт заметную иерархию без чрезмерной разницы. Подписи к изображениям можно сделать 14 пикселей, но добавить достаточный контраст и отступ, чтобы они не сливались с основным текстом.

В интерфейсе с плотными карточками практичнее начать с 14 или 16 пикселей для основного содержимого, 20 пикселей для названия карточки и 24 или 28 пикселей для заголовка секции. Кнопки не обязаны быть крупнее всех соседних элементов: их роль поддерживают контраст, внутренние отступы, насыщенность начертания и понятная формулировка действия.

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

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

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

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

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

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

Составьте тестовый лист с заголовками разной длины, русскими словами с высокими и низкими знаками, цифрами, ссылками и несколькими абзацами. Проверьте переносы, плотность строк и визуальный вес начертаний. Отдельно протестируйте буквы, которых нет в латинском алфавите: они могут заметно изменить характер и высоту текстового блока.

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

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