Почему 8px сетка — стандарт индустрии

При работе с сайтами вы могли заметить, что многие элементы имеют размеры или отступы, кратные восьми: кнопка высотой 40px, отступ между карточками каталога 32px, несколько иконок, стоящих в ряд с отступом в 8px и так далее. Что же происходит? Это совпадение или какой-то дизайнерский заговор?

Это не заговор: в таких отступах есть смысл и практическая польза.

Откуда взялись 8 пикселей

Всё просто — это удобный размер. Достаточно большой, чтобы быть заметным на экране, и достаточно маленький, чтобы его можно было взять за один «шаг». Если поставить два элемента на расстоянии 8px, этого отступа будет достаточно, чтобы увидеть их как раздельные элементы и не кликнуть случайно по другому элементу. А если иконка слишком мала в размере 16 на 16 пикселей, то следующий шаг с использованием 8 будет 24 на 24. Заметно больше, но не слишком.

Ещё такой размер удобен при работе с иконками и прочими векторными изображениями. Под экраны с более высокой плотностью браузер будет выводить интерфейс, масштабируя виртуальные пиксели в реальные. И если браузер будет масштабировать 8 пикселей в 1,5 раза, то на выходе мы получим тоже чётное количество пикселей — 12. Благодаря этому все наши элементы попадут чётко на границы пикселей. А вот если взять базовый размер в 5px, то при масштабировании в 1,5 раза мы должны вывести иконку на нечётное количество пикселей — 7,5. В результате границы иконки станут размытыми.

Конечно, эта проблема решается использованием любого чётного количества пикселей, не только восьми. Но вспомним, что помимо прочего, 8px — ещё и довольно удобный размер.

Зачем и как отходят от стандарта?

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

Или другой пример: базовый шрифт по умолчанию — 16px, а хорошая высота строки для чтения — полуторная, то есть 24px. Если нам нужен шрифт чуть крупнее, мы не можем увеличить его до 24px — это много. Поэтому принято делать шрифты с шагом в 4px. Бывает и наоборот, для крупных элементов используют большие расстояния — приходится «перескакивать» через несколько ступеней.

Однако все эти случаи — уточнённая или доработанная вариация базовой сетки в 8px, которая лежит в основе всех более сложных размерных сеток.

Отдельный вопрос: а как в дизайне регламентируются такие моменты?

Дизайн-токены

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

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

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

Подробнее про сетки и другие нюансы дизайна, можно узнать на курсе «Дизайн для фронтендеров».