Размеры заголовков: как выстроить типографическую систему

Это уровни заголовков, где H1 обозначает самый высокий уровень и обычно имеет наибольший визуальный приоритет, а последующие H2, H3 и далее постепенно становятся менее значимыми.

Это основной наборный текст страницы, который используется для абзацев, описаний и другой содержательной информации.

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

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

Материалы урока:

• Typescales - ссылка

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

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

На сайте может использоваться до шести уровней заголовков:

• H1 — основной заголовок страницы;
• H2 — заголовки крупных разделов;
• H3 — заголовки более мелких подразделов или карточек;
• H4–H6 — дополнительные уровни для более сложных структур.

Чем меньше число после H, тем выше уровень заголовка и, как правило, больше его визуальный вес.

На обычном лендинге редко требуется использовать все шесть уровней. Часто достаточно H1, H2 и иногда H3. Большое количество уровней чаще встречается на сложных информационных сайтах, в каталогах и крупных интернет-магазинах.

На лендинге H1 чаще всего встречается один раз — на первом экране. Это главный заголовок, который передаёт основное предложение страницы и поэтому получает самый высокий визуальный приоритет.

В рамках стандартного десктопного проекта можно ориентироваться примерно на 60–80 px. При этом диапазон не является строгим ограничением: в проектах с крупной типографикой H1 может быть значительно больше.

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

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

В качестве ориентира можно использовать примерно 30–50 px. На практике часто подходят значения в районе 37–45 px, но размер зависит от гарнитуры, композиции и общей стилистики сайта.

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

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

В рамках курса можно ориентироваться на диапазон примерно 21–30 px. Он уже заметно ближе к основному тексту, но всё ещё должен сохранять достаточный контраст.

На простом одностраничном сайте этого количества уровней часто достаточно:

• H1 — главный экран;
• H2 — основные блоки;
• H3 — карточки и внутренние элементы;
• Body — наборный текст.

Удобнее всего начинать построение системы не с самого крупного заголовка, а с основного текста. Для стандартного сайта наборный текст обычно находится в диапазоне 16–18 px.

В рамках курса в качестве удобного базового значения часто используется 17 px. Оно находится между 16 и 18 px и подходит для большинства стандартных десктопных макетов.

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

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

Их размер может быть меньше основного текста, например около 12–14 px. Слишком маленькие значения стоит использовать осторожно, поскольку текст всё равно должен оставаться читаемым.

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

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

Например, стандартный Body-текст и надпись на кнопке могут иметь одинаковые гарнитуру и кегль, но отличаться начертанием:

• основной текст — Regular;
• текст кнопки — Bold.

В таком случае они относятся к одному размерному уровню, но выполняют разные функции за счёт насыщенности.

Поэтому типографическая система строится не только на кеглях, но и на сочетании размеров, начертаний и назначения элементов.

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

Для веб-дизайна можно использовать шаги примерно:

• 1,2;
• 1,25;
• 1,39.

Например, при шаге 1,2 каждое последующее значение будет примерно на 20% больше предыдущего. Благодаря этому размеры внутри системы сохраняют закономерность и хорошо сочетаются между собой.

Необязательно использовать все полученные значения. Сначала формируется шкала, а затем из неё выбираются только те размеры, которые нужны конкретному проекту.

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

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

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

В Figma можно использовать плагин Type Scale, который автоматически создаёт набор размеров на основе заданных параметров.

Для работы необходимо указать:

• базовый размер текста;
• коэффициент увеличения;
• количество уровней вверх;
• количество уровней вниз.

Например, можно взять базовый кегль 17 px, выбрать шаг 1,2 и сгенерировать несколько уровней в обе стороны. В результате получится готовая шкала, из которой можно выбрать размеры для H1, H2, H3, Body и подписей.

Такой подход позволяет не высчитывать каждый кегль вручную и быстрее сравнивать разные варианты.

Плагин может создать большое количество значений, но переносить их все в проект не нужно.

Лучше последовательно примерить уровни:

• выбрать подходящий размер для H1;
• определить H2;
• при необходимости оставить H3;
• сохранить базовый Body;
• подобрать один размер для вспомогательных подписей;
• удалить лишние значения.

В итоге остаётся компактная система без дублирующихся и ненужных размеров.

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

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

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

Для примерки разных вариантов в Figma удобно копировать не сам текстовый объект, а его свойства.

Для этого:

• выделите элемент с нужным оформлением;
• нажмите Ctrl + Alt + C;
• выделите объект, к которому нужно применить оформление;
• нажмите Ctrl + Alt + V.

Так можно быстро переносить гарнитуру, размер, начертание, цвет и другие свойства и сравнивать разные варианты непосредственно в проекте.

Когда основные уровни определены, их стоит сохранить в виде текстовых стилей. Например:

• H1 — заголовок главного экрана;
• H2 — заголовок блока;
• H3 — заголовок карточки;
• Body — основной текст;
• Caption — подпись.

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

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

Главная задача типографической шкалы — не заставить дизайнера использовать определённые числа, а создать понятную основу для принятия решений.

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

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

Перейти к следующему уроку