Иерархия текста в вебе: как работать с типографикой, ее размерами и отступами в дизайне

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

Когда мы запускали itsets.ru, мы делали продукт в темпе стартапа. В режиме «дизайн на коленке», когда каждый лишний час — минус к шансу вообще успеть. Тогда казалось, что типографика — это уже потом. Сначала бы всё собрать, запустить, оживить. И мы это сделали. MVP родился и пошёл в люди.

Наш текст не читается

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

Всё это — прямые последствия спешки на старте. Где-то не докрутили line-height, где-то не подумали про контраст. И вот он результат — вроде бы текст есть, а читать его тяжело.

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

От пикселя к тексту и его иерархии

Чтобы всё стало понятно, давай разложим текст на атомы. В самом низу иерархии — пиксель. Это минимальная единица, из которой вообще собирается изображение на экране. Несколько пикселей образуют букву — это уже уровень повыше.

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

Это и есть первое главное правило иерархии в типографике — чем выше уровень иерархии, тем больше отступ между его элементами:

• На уровне букв — минимальный леттеринг.
• На уровне слов — уже ощутимые пробелы.
• На уровне строк — появляется line-height.
• На уровне абзацев — ещё больший отступ.
• А над заголовками и между разделами — настоящий воздух.

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

Два ключевых правила иерархии в типографике

Так что если хочется, чтобы слово воспринималось как слово, а абзац — как абзац, нужно соблюдать эти два принципа:

• Чем выше уровень, тем больше расстояние.
• На одном уровне расстояние должно быть одинаковым между всеми равными элементами.

В этой статье я покажу, как мы применяем эти правила на практике. Разберём иерархию текста в интерфейсах от самого микроуровня (буквы и пробелы) до макроуровня (главы и вся статья). Поговорим, как мы выстраиваем отступы между абзацами, заголовками, пунктами списков. И что меняем прямо сейчас, чтобы тексты на itsets.ru наконец начали не просто читаться, а дышать.

Почему важно понимать уровни иерархии до начала работы с текстом

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

На этих примерах хорошо видно:

• Контраст текста низкий — серый на белом, как будто шрифт извиняется за то, что вообще появился.
• Заголовки вторгаются в чужую зону, нарушают визуальный ритм, словно не поняли, что они уже на уровне иерархии выше.
• Строки липнут друг к другу, line-height слишком скромный, и глаз не успевает передохнуть.
• Пункты списков теряют контекст, особенно если до них и после них — по одной-две строки абзаца. Что к чему относится, уже не так очевидно, как хотелось бы.

Это классическая ситуация, которая возникает, когда у текста нет чёткой иерархии. Или когда она вроде как есть, но никто не удосужился её проверить по пикселям. Особенно часто с этим сталкиваются новички. Они видят: есть абзац, есть заголовок, есть список — но не понимают, как они соотносятся друг с другом.

Поэтому перед тем, как вообще трогать стили, шрифты, лайнхейты и прочие margin’ы, нужно разобраться: а из чего вообще состоит текст? Где в нём границы, уровни, вложенность? Какая у него структура?

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

Из чего вообще состоит текст: уровни иерархии и структура

Прежде чем выстраивать отступы, нужно ответить на простой, но коварный вопрос: а из чего вообще состоит текст? Какие у него есть уровни, как они связаны и почему нельзя просто взять и поставить одинаковый отступ «на глаз».

Вот основные уровни текстовой иерархии, которые мы используем в статьях на itsets.ru:

• Слово — первый, самый базовый элемент. Состоит из букв, между которыми есть леттеринг (или кернинг). Это минимальное расстояние, самая низкая ступень иерархии.
• Предложение — набор слов, между которыми уже есть пробелы. Пробел шире, чем расстояние между буквами. Логично: уровень выше — расстояние больше.
• Абзац — объединение нескольких предложений. Здесь появляется line-height — расстояние между строками. У нас на платформе базовая высота строки — 24 пикселя.
• Часть главы — это несколько абзацев и заголовок H3, объединённые одной мыслью. Между ними расстояние уже больше, чем между абзацами, но они всё ещё относятся к одной смысловой группе.
• Глава — это уже раздел статьи, который разграничивается заголовками H2. Отступы тут ещё шире, потому что это переход на новый уровень восприятия. Часто между главами появляется визуальный разделитель.

А где в этой системе списки?

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

Вот, что важно понимать:

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

Чтобы список визуально и логически «прилипал» к верхнему абзацу, нужно соблюсти несколько правил:

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

И не забудем про ритм наборного текста

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

Потому что если ты вдруг решил, что у списков line-height может быть меньше (вдруг «влезет» компактнее) — всё, ритм поломался. Читателю будет казаться, что внутри списка — другая вселенная, не связанная с основным текстом.

Итог простой: список — не самостоятельный блок, а продолжение мысли предыдущего абзаца. Если он оторван от абзаца, это уже какой-то абстрактный список. Хотя такое тоже бывает, но чаще не в статьях, а на лендингах или в других промо материалах.

Как устроена иерархия частей и глав статьи: заголовки и абзацы

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

Что входит в типографическую иерархию этого уровня?

• Заголовок H3 — как правило, это подзаголовок внутри раздела.
• Абзацы текста — основной наборный текст, который идёт под H3.
• (Иногда — примечания, цитаты, изображения, но мы сейчас говорим только про типографику, а не про весь контент.)

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

Почему это важно? Потому что если, например, под заголовком H3 отступ вдруг больше, чем между абзацами, он начинает визуально относиться к другой части. А если меньше — кажется, что заголовок «приклеился» только к первому абзацу, а не всем абзацам. Оба варианта сбивают читателя с понимания структуры текста. Визуально он теряется: где начинается новая мысль, где заканчивается предыдущая?

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

Уровень иерархии ещё выше: как выстраивается глава

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

Как это выглядит:

• Заголовок H2 — это название главы.
• Под ним идут одна или несколько частей текста с подзаголовками H3.
• У каждой части — свои абзацы и другие UI-элементы.

И здесь появляется новый уровень отступов:

• Отступ под заголовком H2 должен быть равен отступу между двумя разными частями статьи (над всеми заголовками H3).
• Эти отступы чуть больше, чем между абзацами или между заголовком H3 и текстом. Логично: уровень выше — расстояние шире.

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

Максимальный уровень иерархии: уровень всей статьи

И наконец, самый высокий уровень иерархии — вся статья. Здесь речь идёт про расстояния между главами. Точнее — про отступы над заголовками H2.

Это самые большие отступы в структуре текста. Они дают читателю почувствовать: сейчас начнётся новая крупная тема, не просто новый абзац или часть главы, а новый смысловой блок на уровне всей статьи. Часто главы могут отделяться разделителями.

В итоге у нас получается такая структура:

• Между строками в абзаце — line-height.
• Между пунктами списка — маленький отступ больше, чем line-height, но меньше, чем между абзацами.
• Между абзацами и под H3 — средний отступ.
• Между частями главы (над заголовком H3 или под заголовком H2) — более крупный отступ.
• Над заголовками H2 (то есть между главами) — самый крупный отступ в статье.

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

Как не промахнуться с отступами: используем множители

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

Чтобы не гадать и не делать «на глаз», удобно использовать множитель отступа. Всё идёт от базы — от кегля шрифта. В наших статьях кегль = 16 пикселей. Значит, line-height (высота строки) стоит рассчитывать как 120–150% от кегля:

• 120% от 16 px = 19,2 px.
• 150% от 16 px = 24 px.

На практике это округляется до ближайшего чёткого значения: 20–24 пикселя.

Оптимальный line-height для читаемого текста — это где-то между 130 и 150%, в зависимости от шрифта, плотности текста и платформы. Мы, например, используем 24 пикселя (150%) — так текст в лонгридах «дышит», не разваливаясь на фразы.

Такой подход убивает сразу двух зайцев:

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

Пример нашей системы отступов в иерархии текста

Вся типографическая система на itsets.ru строится по иерархии. Чем выше уровень — тем больше отступ. Чем ниже — тем плотнее элементы друг к другу. Но чтобы не получилось каша из «плюс-минус-вроде бы норм», мы опираемся на чёткие множители. Всё начинается с базовой единицы — высоты строки, или line-height.

У нас она равна 24 пикселя — это 150% от базового кегля текста, который составляет 16 пикселей. Это и есть наш якорь. А дальше всё строится на его основе:

1-й уровень иерархии — между строками

Line Height = 24 px — это базовая высота строки для наборного текста.

2-й уровень иерархии — между пунктами списка

li Height = 34 px — это 1.4×line-height = 1.4 × 24 = 33.6 ≈ 34 px

Расстояние между пунктами списка: li gap = 10 px (34 - 24).

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

3-й уровень иерархии — между абзацами и под H3

Отступ между абзацами и между абзацем и H3: 1.2 × ур.2 = 1.2 × 34 = 40.8 ≈ 40 px

Получается 16 пикселей дополнительного отступа от li line-height. Это тот самый воздух, который позволяет тексту не слипаться.

4-й уровень иерархии — над заголовком H3 и под заголовком H2

Отступы над H3 и под H2 = 1.4 × ур.3 = 1.4 × 40 = 56 px

На этом уровне мы переходим от локальных блоков к более крупным смысловым частям. Поэтому и отступы становятся шире.

5-й уровень иерархии — над заголовком H2

Отступ над H2 = 1.2 × ур.4 = 1.2 × 56 = 67.2 ≈ 64 px

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

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

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

Иерархия текста — это уважение к читателю

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

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

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

Пусть твой текст дышит. А читатель — дочитывает до конца.