Исторический контекст: от Цюриха до Figma
В 1961 году Йозеф Мюллер-Брокман опубликовал «Систему модульных сеток», заложив теоретический фундамент, который три поколения дизайнеров воспроизводили на бумаге и плёнке. Главный тезис Мюллера-Брокмана состоял в том, что сетка — не ограничение творчества, а инструмент его дисциплинирования: без структуры невозможна ни коммуникация, ни эстетика.
Переход к экранному дизайну в 1990–2000-х годах поставил перед его принципами серьёзный вызов: пиксельные экраны не имели физической базовой линии, а пропорции браузерных окон не подчинялись типографическим традициям. Тем не менее методологическое ядро оказалось устойчивым — концепция модуля, вертикального ритма и типографической шкалы нашла прямое отражение в современных дизайн-системах.
Анатомия модульной сетки
Классическая модульная сетка состоит из нескольких взаимосвязанных уровней, каждый из которых несёт свою функцию в организации пространства страницы:
Зона вокруг контентного поля. Защищают текст от периферического зрения, создают воздух и определяют «весовой центр» страницы. Классическое соотношение: внутреннее поле × 2 = внешнее.
Вертикальные полосы для размещения контентных блоков. Число колонок определяется сложностью верстки: 4 — минимальная гибкость, 12 — максимальная комбинаторика без потери ясности.
Пространство между колонками. Ширина просвета должна быть достаточной, чтобы не смешивать соседние блоки, но не настолько большой, чтобы разрывать единство полосы набора.
Горизонтальные зоны. В модульной сетке пересечение колонок и строк даёт ячейки — базовые единицы модуля. Отношение ширины к высоте ячейки формирует «тон» всей системы.
Горизонтальная сетка с шагом, равным межстрочному интервалу (leading) основного текста. Обеспечивает вертикальный ритм страницы — ощущение метрической упорядоченности.
Базовая линия в веб-типографике
Главная проблема перенесения базовой линии в веб — различия в рендеринге шрифтов на разных платформах. Межстрочный интервал, заданный в CSS, рассчитывается иначе, чем в настольных DTP-программах, а браузеры не выравнивают текст по нижней кромке символов.
Практические стратегии поддержания вертикального ритма в вебе включают следующие подходы:
- Единица rem как модульная единица: задать базовый font-size:16px и строить все отступы кратными rem. При изменении корневого размера вся система масштабируется пропорционально.
- Модульная шкала (Modular Scale): использовать математические соотношения (1.25, 1.333, 1.414) для построения типографической шкалы. Размеры заголовков, текста и подписей находятся в гармоничных пропорциях.
- CSS Custom Properties: хранить базовые значения сетки в переменных — --space-unit, --line-height-base — и использовать их как строительные блоки для всех отступов.
- leading-trim (cap-height / ex-height): CSS-свойство text-box (ранее leading-trim), поддерживаемое в современных браузерах, позволяет удалять избыточное пространство над и под заглавными буквами, обеспечивая точное выравнивание в контейнерах.
Реализация через CSS Grid
CSS Grid Layout — первый нативный инструмент браузера, дающий дизайнеру контроль, сопоставимый с профессиональными DTP-программами. 12-колоночная сетка, стандарт Bootstrap и большинства дизайн-систем, реализуется минимальным кодом:
Мобильная адаптация: сетка как живая система
Классическая модульная сетка Мюллера-Брокмана создавалась для фиксированного формата — листа бумаги с заданными пропорциями. Экран смартфона разрушает это допущение: ширина вьюпорта варьируется от 320px до 430px, а контент должен сохранять читаемость и иерархию на любом размере.
Современный ответ — принцип fluid typography в сочетании с адаптивной сеткой: типографические размеры задаются через clamp() с минимальным, предпочтительным (vw) и максимальным значениями, а колонки схлопываются от 12 до 4 и далее до 1 при уменьшении экрана. Модульный шаг остаётся неизменным — меняется лишь масштаб системы.
Итоговый вывод: модульная сетка в 2025 году — не артефакт швейцарского модернизма, а живой инструментарий, который веб-технологии не упразднили, а наоборот — возвели в норму. CSS Grid и CSS Custom Properties дают дизайнеру беспрецедентный контроль над структурой, а переменные шрифты позволяют поддерживать вертикальный ритм даже в условиях fluid typography.