Сетка и отступы: система 4/8 pt без догм

Что такое система 8 pt и откуда она взялась

Идея простая: все размеры и отступы в интерфейсе кратны 8. Отступ внутри карточки — 16 или 24, расстояние между секциями — 48 или 64, высота кнопки — 40 или 48. Вместо бесконечного выбора между 13, 15 и 17 пикселями у дизайнера остаётся короткий список допустимых значений.

Число 8 выбрано не случайно. Большинство популярных разрешений экранов делятся на 8 без остатка, а при масштабировании в 1,5 раза — типичном для Android-устройств с плотностью hdpi — значение, кратное 8, превращается в целое число физических пикселей. Значения вроде 5 или 7 при таком масштабе дают дробные пиксели и размытые края.

Кроме технической причины есть и организационная. Когда шаг один на всю команду, дизайнер и разработчик говорят на одном языке: «отступ 3» означает 24 px и в макете, и в коде. Ревью становится проще: любое значение вне шкалы сразу видно и требует объяснения.

Material Design и многие другие публичные дизайн-системы используют сетку 8 dp с половинным шагом 4 dp для мелких элементов. Это хороший ориентир, но не обязательство: система отступов — инструмент, а не вера.

Почему 4, а не только 8

Чистая восьмёрка быстро упирается в мелочи. Расстояние между иконкой и подписью в 8 px часто выглядит слишком большим, а между заголовком карточки и её описанием 8 px мало, 16 — много. Поэтому почти все рабочие системы добавляют шаг 4 pt для внутренних, компонентных отступов.

Практичная схема выглядит так: внутри компонентов используются значения 4, 8, 12, 16; между компонентами — 16, 24, 32; между секциями страницы — 48, 64, 96 и выше. Чем крупнее уровень вложенности, тем крупнее шаг и тем меньше вариантов на выбор.

Значение 12 часто вызывает споры: оно не кратно 8. На практике оно нужно постоянно — для плотных списков, полей ввода, бейджей. Запрещать его ради чистоты системы — пример той самой догмы, которая делает интерфейс хуже. Если значение регулярно нужно и кратно 4, его стоит включить в шкалу.

• Микро: 2, 4 — зазоры внутри иконок, бордеры, фокус-кольца.
• Компонент: 8, 12, 16 — внутренние отступы и связи внутри элемента.
• Группа: 24, 32 — расстояние между связанными блоками.
• Секция: 48, 64, 96, 128 — крупный ритм страницы.

Отступы как средство группировки

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

Частая ошибка — одинаковые отступы везде. Форма, в которой между подписью и полем 16 px и между полями тоже 16 px, превращается в равномерную кашу: подписи «висят» между двумя полями. Минимальное правило — внешний отступ хотя бы в 1,5–2 раза больше внутреннего.

То же работает на уровне страницы. Если между секциями столько же воздуха, сколько между карточками внутри секции, структура страницы перестаёт читаться. Крупный ритм должен быть крупным: это и есть причина, по которой шкала отступов растёт нелинейно.

Связь с типографикой и высотой строки

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

Самый простой способ держать ритм — делать высоты строк кратными 4: 16, 20, 24, 28, 32, 40. Тогда текстовые блоки сами встают в сетку, и отступ 16 px от заголовка до абзаца остаётся 16 px в коде. Выравнивание по базовой линии, популярное в полиграфии, в вебе даётся тяжело и обычно не окупается — достаточно кратной высоты строки.

В CSS есть свойство text-box-trim (ранее leading-trim), которое позволяет срезать лишнее пространство над заглавными и под базовой линией. Оно уже поддерживается в части браузеров, но пока не повсеместно, поэтому стоит проверять актуальный статус поддержки перед тем, как строить на нём систему.

Колоночная сетка и контейнеры

Система отступов отвечает за расстояния, колоночная сетка — за распределение ширины. Для десктопа типичны 12 колонок: число делится на 2, 3, 4 и 6, что даёт гибкость компоновки. Для планшета — 8 колонок, для мобильного — 4. Межколонный промежуток (гаттер) и поля по краям берутся из той же шкалы: 16 px на мобильных, 24–32 px на десктопе.

Ширину колонок не обязательно делать кратной 8: при резиновой сетке она всё равно вычисляется из ширины экрана. Кратными шагу должны быть гаттеры, поля и максимальная ширина контейнера. Для текстовых страниц удобнее ограничивать ширину не колонками, а длиной строки, например max-width: 65ch.

В CSS Grid колоночная сетка описывается в пару строк: grid-template-columns: repeat(12, 1fr) и gap: var(--space-6). Для компонентов, которые должны подстраиваться под ширину своего контейнера, а не всего окна, полезны контейнерные запросы @container — они уже поддерживаются всеми основными браузерами.

Токены вместо чисел

В коде отступы лучше хранить не числами, а токенами. Распространены два подхода к именованию. Первый — порядковый: space-1 = 4, space-2 = 8, space-4 = 16. Номер равен количеству шагов по 4 px, это легко запомнить. Второй — футболочный: xs, sm, md, lg. Он нагляднее, но плохо расширяется: когда понадобится значение между sm и md, появляется неловкий sm-plus.

Над примитивами полезно завести семантический слой: space-inset-card, space-stack-section, space-inline-icon. Тогда, если команда решит сделать карточки плотнее, меняется одно значение, а не пятьдесят мест в коде.

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

• Примитивы: space-0 … space-32 в rem.
• Семантика: inset, stack, inline для разных направлений.
• Ревью: любое число вне шкалы в коде требует объяснения.

Когда правило нужно нарушить

Оптическая компенсация — главная законная причина отступить от шкалы. Треугольная иконка «Play» в круглой кнопке, выровненная математически по центру, выглядит сдвинутой влево; её смещают на 1–2 px вправо. Круглые и острые формы визуально кажутся меньше квадратных того же размера, поэтому их делают чуть крупнее. Это не нарушение системы, а её доводка.

Вторая причина — бордеры. Кнопка высотой 40 px с рамкой 1 px внутри: если рамка добавляется к размеру, высота становится 42. Решение — box-sizing: border-box или рамка через box-shadow/outline, но иногда проще принять, что внутренний отступ равен 11 px, а не 12. Главное, чтобы внешний размер оставался в сетке.

Третья — контент, который вы не контролируете: пользовательский текст, переводы, данные из API. Сетка должна выдерживать длинное немецкое слово и пустое поле, а не только аккуратный макет. Если для этого нужно ослабить правило в конкретном компоненте, это правильный компромисс.

Редакция Флагштока

Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.