Что такое сетка в типографике
Типографическая сетка — это система направляющих линий, которые структурируют пространство страницы или экрана. Она задаёт поля, ширину колонок, межколонные промежутки (гатеры) и вертикальный ритм (базовую сетку). Сетка не ограничивает дизайнера — она освобождает его от необходимости заново принимать базовые пространственные решения при каждом размещении нового элемента.
Виды типографических сеток
Одноколонная сетка
Простейшая форма: весь текстовый контент размещается в одном текстовом поле. Поля задаются с учётом оптимальной длины строки (45–75 символов). Применяется в книгах, эссе, научных статьях — везде, где непрерывное линейное чтение является основным режимом взаимодействия с текстом.
Многоколонная сетка
Страница делится на несколько равных или неравных колонок. Классические варианты: 2-, 3-, 4-колонная и 12-колонная сетки (последняя — основа большинства современных CSS-фреймворков). Многоколонная сетка позволяет комбинировать разные ширины текстовых блоков и изображений в рамках единой системы.
Модульная сетка
Сочетает горизонтальные и вертикальные направляющие, образуя сетку прямоугольных модулей. Разработана и канонизирована в 1950–60-х годах швейцарскими дизайнерами — прежде всего Йозефом Мюллером-Брокманом. Модульная сетка обеспечивает двумерный контроль над размещением всех элементов: текста, изображений, инфографики, пространства.
Иерархическая сетка
Не основана на равномерном делении, а следует логическим приоритетам содержания. Типична для газет, новостных порталов и сайтов с неоднородной контентной структурой. Главный материал занимает больше пространства, второстепенные — меньше.
| Тип сетки | Структура | Лучше всего для | Представители |
|---|---|---|---|
| Одноколонная | Единый текстовый блок | Книги, эссе, монографии | Академические издания |
| Двухколонная | Два текстовых поля | Журналы, брошюры | Научные журналы |
| Трёхколонная | Гибкое деление 1+2, 2+1 | Каталоги, веб-порталы | Большинство новостных сайтов |
| 12-колонная | Максимальная гибкость | Веб-интерфейсы, UI | Bootstrap, Tailwind |
| Модульная | Строки + колонки | Плакаты, корпоративные издания | Swiss Style, Brockmann |
| Иерархическая | Неравномерное деление | Новостные порталы, дашборды | Газеты, агрегаторы |
Базовая строчная сетка (Baseline Grid)
Базовая сетка — это горизонтальные линии, отстоящие друг от друга на расстояние, равное интерлиньяжу основного текста. Она обеспечивает вертикальный ритм — одно из важнейших качеств профессиональной типографской вёрстки. Когда все текстовые элементы привязаны к базовой сетке, текст на соседних колонках «выравнивается» по горизонтали, создавая эффект строчного единства.
Пример расчёта: при кегле основного текста 16 px и интерлиньяже 24 px базовый шаг сетки равен 24 px. Все остальные размеры — отступы, высоты блоков, размеры изображений — рекомендуется задавать кратными 24 или 8 px (суббазе).
Поля (Margins) и промежутки (Gutters)
Поля страницы — не просто «пустое место». Они создают зону безопасности для контента и обеспечивают зрительный отдых. В классической книжной традиции поля рассчитываются по правилу van de Graaf: внутреннее — самое узкое, внешнее — широкое, верхнее — среднее, нижнее — самое широкое. Это создаёт ощущение «парения» текстового блока на странице.
Гатер (межколонный промежуток) в большинстве профессиональных систем составляет от одного до полутора размеров базовой единицы сетки. Слишком узкий гатер смешивает колонки, слишком широкий — разрушает единство полосы.
«Сетка — это не клетка. Это музыкальная нотная линейка. Без неё любая нота — это просто звук. С ней — музыка.»
— Йозеф Мюллер-Брокман, «Система модульных сеток»Сетки в веб-дизайне
В веб-среде сетки реализуются через CSS Grid, Flexbox или адаптивные фреймворки. 12-колонная система остаётся де-факто стандартом, поскольку позволяет делить страницу на 1, 2, 3, 4, 6 или 12 равных частей. Ключевые параметры веб-сетки:
- Container width — максимальная ширина контентного блока (типично 1200–1440 px)
- Column count — чаще всего 12 на десктопе, 4 на мобильных
- Gutter — промежуток между колонками (типично 16–32 px)
- Margin — боковые отступы от края вьюпорта (минимум 16 px на мобильных)