Типографская иерархия: как построить такую, которая действительно читается

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

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

Что такое типографская иерархия на самом деле

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

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

Пять уровней, которые нужны почти каждой системе

Большинство рабочих систем приходят к пяти уровням: H1, H2, H3, основной текст и мелкий текст. Больше уровней создаёт шум. Меньше делает страницу плоской.

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

Выберите коэффициент шкалы и держитесь его

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

Большая терция (1.25). Плотная и сжатая. Лучше всего для интерфейсов с множеством данных и админок. От базы 16px: 16, 20, 25, 31, 39, 49, 61. Заметно, но никогда не драматично.

Чистая кварта (1.333). Рабочая лошадка. Достаточно сильная для редакционных проектов, достаточно сдержанная для продукта. От базы 16px: 16, 21, 28, 37, 50, 67. Вариант по умолчанию для большинства маркетинговых сайтов.

Золотое сечение (1.618). Редакционное, выразительное, почти театральное. Лучше всего для лендингов и журнальных макетов. От базы 16px: 16, 26, 42, 68, 110. H1 возвышается над основным текстом, и в этом смысл.

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

Насыщенность — вторая ось, а не первая

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

Рабочей системе нужны три насыщенности. Regular для основного текста, medium для акцентов и меток, bold или semibold для заголовков. Четвёртая насыщенность это решение бренда, а не требование системы.

Правило, которое чинит большинство плоских страниц: никогда не используйте одну насыщенность для двух соседних уровней. Если H2 жирный, H3 должен быть semibold или medium. Одинаковая насыщенность у соседей схлопывает иерархию независимо от размера. Обратная ловушка это «всё жирное», которое полностью убирает насыщенность как рычаг.

Интерлиньяж — тихий рычаг иерархии

Интерлиньяж это вертикальное расстояние между строками от базовой линии до базовой линии. В CSS это line-height. Самый недооценённый рычаг типографской иерархии.

Тугой интерлиньяж у заголовка читается уверенно и плотно. Свободный интерлиньяж у основного текста читается спокойно и удобно. Наоборот иерархия переворачивается. Основной текст при 1.2 читается как стена. Заголовок в 64px при 1.6 читается как декор.

Рабочие значения по умолчанию. Заголовки (H1, H2): от 1.1 до 1.2. Подзаголовки (H3): от 1.2 до 1.3. Основной текст: от 1.5 до 1.7. Подписи: от 1.4 до 1.5. Крупному тексту нужно меньше интерлиньяжа, мелкому больше. Лонгриду нужен более свободный интерлиньяж, чем интерфейсу. Дашборд при 1.4 читается плотно, и это правильно.

Трекинг нужен для акцидентного шрифта, а не для основного текста

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

Трекинг работает как инструмент иерархии только на крайностях. Плотный трекинг у крупного заголовка (от -0.02em до -0.04em) делает его собранным и решительным. Свободный трекинг у мелких заглавных меток (от +0.05em до +0.1em) делает метку осознанной. Оба сигнализируют о роли текста.

Зона опасности это основной текст. Трекинг основного текста вредит читаемости и не даёт никакой выгоды для иерархии. Оставьте основной текст на нуле. Быстрее всего выдаёт дизайнера, не понимающего трекинг, главный заголовок с +0.1em, потому что это «ощущается как редакционное». Не ощущается. Ощущается как декор.

Отступы между уровнями — часть иерархии

Вертикальное пространство вокруг каждого уровня ранжирует его не меньше, чем размер и насыщенность. H2 с 80px сверху и 24px снизу читается как начало нового раздела. Тот же H2 с 24px сверху и снизу читается как разрыв абзаца.

Правило: пространство сверху примерно вдвое больше пространства снизу. Элемент принадлежит контенту под ним. Стартовая спецификация: над H2 от 64 до 96px, под H2 от 16 до 24px. Над H3 от 32 до 48px, под H3 от 8 до 16px. Дисциплина пустого пространства важна не меньше самой типографики. Идеальная шкала с небрежными отступами читается плоско.

Порядок решений при построении иерархии с нуля

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

1. Выберите базовый размер. 16px для экрана. 18px для сайтов с упором на редакционный контент. Никогда меньше 16px для основного текста.
2. Выберите коэффициент шкалы. Большая терция для плотного интерфейса, чистая кварта для общего случая, золотое сечение для редакционных проектов.
3. Сгенерируйте таблицу размеров. Выведите каждый уровень из коэффициента. Округлите до целых пикселей. Запишите.
4. Выберите три насыщенности. Regular, medium, bold или semibold. Не больше.
5. Задайте интерлиньяж для каждого уровня. Плотный для заголовков, свободный для основного текста.
6. Задайте отступы для каждого уровня. Соотношение 2 к 1 «сверху к снизу» у каждого заголовка.
7. Меняйте трекинг только на крайностях. Плотный на акцидентном шрифте, свободный на мелких заглавных. Ноль на основном тексте.
8. Проверьте на трёх реальных экранах. Главный блок главной страницы, лонгрид, плотная панель интерфейса. Если держится на всех трёх, выпускайте.

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

Где проваливается большинство иерархий

Шесть паттернов ошибок убивают больше иерархий, чем всё остальное.

Всё жирное. Насыщенность перестаёт быть рычагом, и страница опирается только на размер. Переведите H3 и любые третичные заголовки на medium или semibold.

Есть только два уровня. H1 и основной текст без ничего между ними читаются как плоский документ с заголовком сверху. Добавляйте H2 каждые 150-300 слов.

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

Сбежавший H1. Десктопный H1 главного блока, использованный на каждой странице с контентом, ломает ритм. Заведите токен десктопного H1 и токен H1 для контентных страниц. Одно имя, два значения.

Основной текст в 14px. Ниже 16px ломается читаемость, а мелкие уровни зажимаются в диапазон 2px. Минимум 16px. 13-14px только для подписей и меток.

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

Иерархия в условиях 2026 года

Вариативные шрифты теперь правильный выбор по умолчанию. Один файл на 80KB отдаёт regular, medium, semibold и bold по одной оси. Двух вариативных шрифтов хватает на всю систему. О том, как их выбрать, рассказывает руководство по сочетанию шрифтов.

AI-обзоры читают семантическую разметку, а не визуальную. Страница с H1, затем div, стилизованным под H2, затем H3, парсится неверно. Визуальная иерархия и семантический HTML должны совпадать. Один H1 на страницу, без пропущенных уровней. Семантическую сторону разбирает материал о принципах веб-дизайна.

Чек-лист аудита иерархии

Сохраните его. Прогоните перед запуском. Любое «нет» исправляется до релиза.

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

FAQ

В чём разница между визуальной и типографской иерархией?

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

Какой коэффициент лучше всего подходит для типографской шкалы?

Чистая кварта (1.333) это самый безопасный вариант по умолчанию. Она даёт чёткий контраст, не становясь театральной. Используйте большую терцию (1.25) для плотных интерфейсов и админок. Используйте золотое сечение (1.618) для редакционных проектов и лендингов, где главный блок должен доминировать.

Как исправить иерархию, которая выглядит плоско?

Три шага по порядку. Сначала увеличьте контраст размеров. H1 минимум вдвое больше H2, H2 минимум в 1.5 раза больше основного текста. Вторым добавьте контраст насыщенности. Никакие два соседних уровня не делят одну насыщенность. Третьим подтяните ритм отступов с соотношением 2 к 1 «сверху к снизу» у каждого заголовка. Если страница всё равно читается плоско, макет делает слишком много и требует сокращения объёма до того, как делать больше работы с типографикой.

Постройте иерархию, а потом доверяйте ей

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

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