Белое пространство как активный элемент дизайна
В типографике пространство — это не «пустое место» между буквами и строками. Это активный инструмент коммуникации. Отступы определяют отношения между элементами: близко расположенные объекты воспринимаются как связанные (принцип близости Гештальта), далеко расположенные — как независимые. Правильно расставленные паузы в тексте создают ритм, который читатель ощущает как «дыхание» страницы.
Дизайнеры, избегающие белого пространства из страха «пустоты», получают страницы, которые выглядят перегруженными и тревожными. Страница, где каждый элемент получает достаточно пространства, воспринимается как уверенная, спокойная, авторитетная — вне зависимости от количества контента.
Вертикальный ритм: определение и значение
Вертикальный ритм — это согласованность вертикальных отступов на всей странице, выраженная в кратных значениях единой базовой единицы (line-height основного текста или производной от него). Когда вертикальный ритм соблюдён, строки текста в соседних колонках выровнены по горизонтали, отступы между разными элементами страницы образуют предсказуемую математическую последовательность.
Читатель не осознаёт вертикальный ритм явно — но его нарушение создаёт интуитивное ощущение «что-то не так». Профессиональные редакторские издания — The New York Times, The Atlantic, Financial Times — исторически уделяют вертикальному ритму такое же внимание, как колоночной сетке.
Базовая единица spacing-системы
Для большинства проектов базовая единица spacing-системы = line-height основного текста. Если body font-size = 16px, а line-height = 1.6, то базовая единица = 16 × 1.6 = 25.6px. Но работать с этим числом неудобно, поэтому на практике выбирают ближайшее «круглое» значение: 24px или 8px (1/3 от 24).
Альтернативный подход, более распространённый в UI-дизайне: фиксированная базовая единица 4px или 8px, от которой строятся все остальные значения: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96... Этот подход, популяризированный Material Design и Atlassian Design System, даёт механическую простоту в обмен на некоторую потерю органичной связи с конкретным шрифтом.
«Отступы — это не про расстояния между объектами. Это про отношения между идеями.»
— Елена Дорошенко, главный редактор MireviaSpacing-токены: структура системы
| Токен | Значение (8px base) | Применение |
|---|---|---|
| --space-1 | 4px (0.5 unit) | Иконки рядом с текстом, micro-паддинг |
| --space-2 | 8px (1 unit) | Внутри компонентов, padding inputs |
| --space-3 | 12px (1.5 unit) | Отступ между inline-элементами |
| --space-4 | 16px (2 units) | Стандартный padding карточки |
| --space-5 | 20px (2.5 units) | Отступ между строками формы |
| --space-6 | 24px (3 units) | Отступ между абзацами |
| --space-8 | 32px (4 units) | Отступ после заголовка H3 |
| --space-10 | 40px (5 units) | Отступ после заголовка H2 |
| --space-12 | 48px (6 units) | Разделитель между секциями |
| --space-16 | 64px (8 units) | Паддинг секций страницы |
| --space-24 | 96px (12 units) | Вертикальные отступы hero |
| --space-32 | 128px (16 units) | Крупные разделители лендингов |
Принцип близости в типографии
Принцип близости (Proximity, Закон Гештальта): объекты, расположенные близко друг к другу, воспринимаются как принадлежащие одной группе. В типографике это означает: отступ между заголовком и следующим за ним текстом должен быть меньше, чем отступ, разделяющий этот заголовок от предыдущего раздела.
Конкретные значения: отступ между H2 и следующим абзацем (margin-bottom у H2) — 0.5–0.75 базовой единицы. Отступ между предыдущим разделом и H2 (margin-top у H2) — 2–3 базовые единицы. Разница должна быть ощутимой — не менее чем в 3 раза. Визуально заголовок должен явно «прилипать» к своему контенту.
Межстрочный интервал (line-height): таблица значений
| Контекст | Рекомендуемый line-height | Объяснение |
|---|---|---|
| Дисплейные заголовки (48px+) | 1.0–1.15 | Крупный кегль сам создаёт пространство |
| Заголовки H1–H2 (28–48px) | 1.15–1.3 | Умеренный межстрочный воздух |
| Подзаголовки H3–H4 (18–28px) | 1.3–1.5 | Баланс между компактностью и читаемостью |
| Основной текст (15–18px) | 1.5–1.7 | Оптимум для длинного чтения |
| Короткие UI-метки (12–14px) | 1.2–1.4 | Мелкий кегль требует плотности |
| Footnotes и caption (11–13px) | 1.4–1.6 | Компенсация мелкого кегля |
Отступы в длинных текстах: редакционная практика
В длинных редакционных материалах (статьи, лонгриды) традиционно использовался один из двух подходов для разделения абзацев. Отступ первой строки (first-line indent): абзацы не имеют отступа между собой, но первая строка каждого нового абзаца (кроме первого после заголовка) имеет отступ 1–2em. Характерно для книг и газет. Межабзацный отступ (paragraph spacing): первые строки не имеют отступа, между абзацами — пустое пространство 0.75–1.25em. Характерно для цифровых медиа и веба.
Ключевое правило: никогда не используйте оба метода одновременно. Либо отступы первой строки, либо межабзацные отступы — третьего не дано.
Внешние отступы страницы: поля
Поля (margins) — это пространство между контентом и краями носителя. В печатном дизайне исторически использовалось правило «золотого сечения для полей»: внутреннее поле наименьшее, верхнее — на 1 единицу больше, наружное — на 1 единицу больше верхнего, нижнее — наибольшее. Это создаёт «активную зону» текста, визуально центрированную несколько выше и внутрь страницы.
В цифровом дизайне поля меняются в зависимости от ширины viewport: 16px на мобильных устройствах, 32–40px на планшетах, 80–120px или фиксированный max-width контейнера на десктопах. Правило для больших экранов: ширина полосы набора основного текста не должна превышать 75–80 символов (~680–760px при 16px шрифте).