Как выбрать кегль для заголовков, подзаголовков и текста

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

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

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

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

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

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

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

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

Эти диапазоны работают как каркас. Например, для спокойного журнального блога можно выбрать 18 px для основного текста, 32 px для H2 и 52 px для H1. Для плотной справочной страницы подойдут 16 px, 28 px и 44 px соответственно. Важно, чтобы соседние уровни отличались не только размером, но и отступами, начертанием или насыщенностью.

Представим статью шириной около 680 пикселей. Основной текст можно начать с 18 px при межстрочном интервале примерно 1,5–1,7 от кегля. H2 в 32 px будет заметно отделять крупные разделы, а H3 в 23 px — обозначать частные вопросы. Если заголовок занимает четыре строки, его размер лучше уменьшить или расширить контейнер, чем оставлять тяжёлый перенос.

На лендинге заголовок первого экрана часто делают крупнее, чем в статье: например, 48–64 px на десктопе и 32–40 px на мобильном. Подзаголовок может быть 20–24 px, а поясняющий текст — 16–18 px. Такая последовательность помогает сначала заметить обещание страницы, затем понять предложение и только после этого прочитать детали.

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

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

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

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

Практическая последовательность для статьи может выглядеть так: 18 px для основного текста, 23 px для H3, 32 px для H2 и 52 px для H1. Это не обязательная формула, а пример отношений. Если выбранный шрифт визуально крупный, уменьшите значения; если компактный — увеличьте их после проверки реального набора.

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

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

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

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

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

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

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

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

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

Для H1 на широком экране можно начать с диапазона 40–64 px, но длина заголовка и выбранный шрифт могут потребовать меньшего значения. Заголовок должен выделяться, оставаться легко читаемым и не превращаться в несколько случайных строк. На мобильном экране его обычно уменьшают адаптивно.

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

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

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

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

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