Отступы и интервалы в вёрстке¶

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

¶Типографские отступы и интервалы

¶Межстрочный интервал

Межстрочный интервал (интерлиньяж) — расстояние между базовыми линиями соседних строк текста. Измеряется в единицах кегля (пунктах) или в процентах от кегля. В типографике принято различать:

• Одинарный интерлиньяж — расстояние равно высоте набора (100 %).
• Увеличенный интерлиньяж — 120–150 %, характерен для учебных изданий и технической документации.
• Уменьшенный интерлиньяж — 80–90 %, применяется в газетной вёрстке и для крупных заголовков.

В текстовых редакторах и вёрсточных программах (Microsoft Word, Adobe InDesign, LaTeX) интерлиньяж задаётся числом в пунктах или процентом от кегля. В веб-стандартах CSS свойство line-height задаёт межстрочный интервал безразмерным числом или процентом.

¶Абзацный отступ и интервал между абзацами

Два основных способа разделять абзацы в наборе:

• Абзацный отступ (красная строка) — сдвиг первой строки абзаца относительно остальных. В русской типографской традиции абзацный отступ составляет 1–1,5 em (единиц ширины знака).
• Интервал между абзацами — пустое пространство после абзаца. Широко применяется в веб-дизайне и документах, набранных в сплошном стиле без красной строки.

В веб-стандартах CSS абзацный отступ задаётся свойством text-indent, интервал между абзацами — margin-bottom у элемента <p>.

¶Отступы в заголовках

Для визуального выделения заголовков используются отступы сверху и снизу. Правило типографики: отступ перед заголовком больше, чем после него, чтобы заголовок визуально «прижимался» к следующему за ним тексту. В CSS это свойства margin-top и margin-bottom у элементов <h1>–<h6>.

¶Отступы в макете и вёрстке

¶Поля страницы

Поля — отступы от края листа до текстовой полосы. Различают:

• Верхнее поле (верхнее поле страницы).
• Нижнее поле — обычно больше верхнего, так как в него выносятся колонтитулы.
• Внутреннее (переплётное) поле — примыкает к корешку книги и компенсирует уход текста в переплёт.
• Внешнее поле — противоположное переплёту.

В типографике соотношение полей задаётся пропорцией, например 1:1,5:1:1,5 (внутреннее:верхнее:внешнее:нижнее). В вёрсточных программах поля задаются в миллиметрах или пунктах.

¶Колонки и межколонник

При многоколоночной вёрстке расстояние между колонками называется межколонником (интерколумнием). Ширина межколонника обычно составляет 1/6–1/4 ширины колонки. В CSS межколонник задаётся свойством column-gap при использовании column-count или column-width.

¶Отступы в интерфейсах

В веб-дизайне и проектировании интерфейсов отступы формируют систему ритма. Популярна модульная сетка с шагом 4 или 8 пикселей: все отступы кратны базовому модулю. Системы дизайн-токенов (например, в Material Design) задают шкалу отступов: 4, 8, 12, 16, 24, 32 пикселя.

¶Единицы измерения

¶Влияние на читаемость

Исследования в области типографики показывают, что слишком плотная вёрстка (малый интерлиньяж, отсутствие отступов между абзацами) снижает скорость чтения и повышает утомляемость. Слишком редкая вёрстка, наоборот, затрудняет отслеживание строк. Оптимальный межстрочный интервал для длинных текстов на экране — 140–160 %, для печатных изданий — 120–140 %.

¶См. также

• Кегль
• Интерлиньяж
• Типографика
• Сетка (дизайн)

¶Источники

• Бернштейн С. Н. «Редактирование и техническая подготовка изданий»
• Левитов М. Д. «Типографика: набор и вёрстка»
• Bringhurst Р. «The Elements of Typographic Style»
• Стандарты CSS (W3C): свойства margin, padding, line-height, column-gap
• Material Design: систематизация отступов и сеток