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

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

Опорные принципы типографической шкалы

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

С чего начать: размеры текста и роль каждого уровня заголовка

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

Разделите текст на уровни: основной текст, подписи и вспомогательные элементы, подзаголовки, заголовок страницы. H1 обычно обозначает тему страницы, а H2 и последующие уровни структурируют вложенные разделы. Не выбирайте уровень заголовка только по желаемому размеру: HTML-иерархия должна отражать структуру материала.

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

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

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

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

Модуль шкалы: сравнение пропорций и сценариев применения

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

1. Зафиксируйте исходные условия.
   Выберите основную гарнитуру, задайте базовый размер текста и подготовьте типичный длинный абзац. Проверьте, как он выглядит в предполагаемой ширине колонки.
2. Выберите шаг между уровнями.
   Для плотных интерфейсов начните с небольшого увеличения - например, коэффициента около 1,2. Для редакционных страниц можно проверить более выраженный шаг около 1,25-1,33; крупные пропорции создают заметную иерархию, но быстрее раздувают заголовки.
3. Рассчитайте последовательность размеров.
   Умножайте базовый размер на выбранный коэффициент для следующего уровня, округляя значения так, чтобы ими было удобно управлять. Не обязательно применять формулу механически: промежуточные уровни можно скорректировать ради читаемости и длины заголовков.
4. Назначьте размеры реальным ролям.
   Свяжите уровни шкалы с заголовком страницы, разделами, вложенными подразделами, подзаголовками и основным текстом. Для мелких подписей используйте отдельный стиль, если он нужен, но проверьте его читаемость.
5. Сравните варианты на макетах.
   Проверьте несколько пропорций на одной и той же странице: оцените иерархию, переносы и плотность текста. Зафиксируйте выбранные значения как дизайн-токены или системные стили, чтобы не создавать несогласованные размеры вручную.

Таблица размеров для H1-H6, подзаголовков и основного текста

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

Роль текста	Пример размера	Назначение и проверка
Основной текст	16 px	Абзацы, списки; проверьте чтение длинного текста и межстрочный интервал.
Подпись или вторичный текст	14 px	Короткие пояснения; не используйте для важных инструкций без проверки читаемости.
H6	16 px	Нижний уровень вложенности; отличайте его от основного текста начертанием или отступами.
H5	18 px	Небольшой подраздел.
H4	20 px	Подраздел среднего уровня.
H3	24 px	Заметный раздел внутри страницы.
H2	30 px	Основной раздел страницы.
H1	38 px	Заголовок страницы; проверьте переносы на узком экране.
Подзаголовок	18-20 px	Краткое пояснение рядом с H1; используйте отдельный стиль, если его роль отличается от заголовка.

Проверка результата:

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

Как проверить шкалу на реальных экранах и длинных заголовках

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

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

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

Типичные риски: скачки иерархии, слабая читаемость и проблемы адаптива

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

• Компактная шкала. Уместна для интерфейсов с большим количеством данных и плотной навигацией. Иерархию усиливают также начертанием, отступами и контрастом, а не только крупными размерами.
• Умеренная шкала. Подходит как исходный вариант для универсального сайта: уровни различимы, но заголовки обычно проще разместить в разных блоках.
• Выразительная редакционная шкала. Уместна для материалов, где важны крупные заголовки и заметные разделы. Требует особенно внимательно проверять длинные строки, мобильную версию и вертикальный ритм.
• Адаптивная шкала. Используйте плавно меняющиеся размеры, если макет существенно меняется между узкими и широкими экранами. Задайте разумные минимальные и максимальные значения и проверьте их на реальном содержании.

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

Практические уточнения о размерах и иерархии текста

Какой базовый размер выбрать для основного текста?

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

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

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

Какой коэффициент лучше использовать между уровнями?

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

Можно ли уменьшать H1, чтобы он помещался в одну строку?

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

Должны ли H1-H6 всегда иметь разные размеры?

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

Как проверить, что подписи достаточно читаемы?

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