Зачем нужен базовый шрифт и как выстроить систему размеров

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

Дата актуальности: 22 июля 2026 года.

В практической типографике базовым называют шрифт и размер, которые используются для обычного текста: описаний, статей, полей форм, пунктов меню и системных сообщений. Чаще всего под базовым размером понимают размер основного текста, а не название гарнитуры. Например, в проекте может быть выбран шрифт Inter с базовым размером 16 пикселей, межстрочным интервалом 24 пикселя и несколькими дополнительными уровнями.

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

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

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

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

В качестве рабочей отправной точки для веб-интерфейса часто используют 16 пикселей для основного текста. Это не универсальное правило и не обязательный стандарт, а удобный пример для начала настройки. Для компактной панели можно рассмотреть 14 пикселей, а для сайта с длинными текстами — проверить диапазон от 16 до 18 пикселей. Окончательное решение принимают после просмотра реального контента.

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

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

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

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

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

Межстрочный интервал определяет вертикальный ритм и влияет на скорость чтения. Слишком маленький интервал слипает строки, слишком большой разрушает связность абзаца. Для примера, текст размером 16 пикселей может хорошо работать с интервалом около 24 пикселей, но конкретное значение зависит от высоты строчных знаков и ширины колонки.

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

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

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

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

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

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

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

Запишите для каждого уровня не только кегль, но и назначение, начертание, межстрочный интервал, цвет и допустимые сценарии. Названия вроде «Большой текст 2» плохо объясняют роль. Формулировки «Заголовок страницы», «Основной текст» и «Подпись» помогают быстрее выбрать нужный стиль и уменьшают количество локальных исключений.

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

Для веб-сайта разумно начать с 16 пикселей для основного текста и проверить результат на реальных абзацах. В компактных интерфейсах может подойти 14 пикселей, а в проектах с большим объёмом чтения — более крупный размер. Решение зависит от гарнитуры, ширины колонки, контраста и сценария пользователя.

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

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

Начните с интервала, который заметно превышает высоту букв, и проверьте несколько абзацев подряд. Для текста размером 16 пикселей примером может быть интервал 24 пикселя, но он не является универсальным значением. Оцените ритм, длину строки, количество переносов и удобство чтения на целевом экране.

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

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

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