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

Происхождение: швейцарский интернациональный стиль

Модульная сетка как системный инструмент оформилась в швейцарских типографических школах 1940–1950-х годов. Йозеф Мюллер-Брокман, Макс Билл, Карло Вивиани и их коллеги разрабатывали визуальный язык, в котором сетка была не вспомогательным средством, а основой композиции — структурой, из которой вырастала форма.

В 1961 году Мюллер-Брокман выпустил книгу «Gestaltungsprobleme des Grafikers» («Проблемы формообразования графика»), а затем в 1981 году — «Grid Systems in Graphic Design», ставшую настольным изданием для нескольких поколений дизайнеров. Основной тезис: сетка — это инструмент рационального порядка, который не ограничивает, а освобождает.

Анатомия модульной сетки

Модульная сетка состоит из нескольких ключевых элементов. Столбцы (columns) — вертикальные полосы, делящие пространство страницы. Модули (modules) — прямоугольные ячейки, образованные пересечением вертикальных и горизонтальных делений. Промежутки (gutters) — пространство между столбцами и строками. Поля (margins) — внешние отступы от края носителя до начала активной зоны.

В отличие от простой колоночной сетки, модульная предполагает также горизонтальное деление — строки с фиксированным шагом, привязанным к базовой линии шрифта. Именно это пересечение вертикального и горизонтального ритмов создаёт полный модуль — единицу, из которой строится вся страница.

«Сетка — это невидимый каркас, который делает сложные решения простыми, а случайные — системными.»

— Йозеф Мюллер-Брокман

7 принципов применения в редакционном дизайне

  1. Выравнивание по базовой линии. Все текстовые блоки привязываются к единой baseline grid. Это создаёт вертикальный ритм, особенно важный в многоколоночных разворотах.
  2. Консистентность модуля. Высота модуля должна быть кратна межстрочному интервалу основного текста — обычно это 4 или 6 строк.
  3. Иерархия колонок. Одна ширина для основного текста, другая — для цитат и примечаний. Это создаёт визуальные уровни без использования размера шрифта.
  4. Нарушение сетки — как инструмент акцента. Элементы, пересекающие границы модулей (фотографии «в разрыв», выносные цитаты), приобретают визуальный вес именно потому, что нарушают ожидаемый порядок.
  5. Единый шаг отступов. Все поля, интервалы между секциями и внутренние отступы строятся на одном базовом значении — кратно 8px в цифре, кратно 5mm в печати.
  6. Адаптация, а не отмена. В цифровых изданиях сетка не фиксирована — она адаптируется. Но принцип сохраняется: 12 или 16 колонок на десктопе, 4 — на мобильном.
  7. Белое пространство как модуль. Пустые модули в сетке — не «дырки», а осознанные паузы, управляющие ритмом и фокусом читателя.

Современные примеры: от NYT до Figma

The New York Times использует 10-колоночную сетку для десктопа с жёсткой привязкой компонентов к модулям. The Atlantic строит свою типографическую систему на базовой линии в 24px с шагом 4. Figma, будучи инструментом дизайна, сам является примером grid-driven интерфейса: все панели, отступы и компоненты кратны 8px. Bloomberg Businessweek применяет деструктивную сетку — намеренно нарушает модули, создавая редакционный характер. Editorial New York, агентство с Austin-корнями, работает с 16-модульной сеткой для всех проектов брендинга.

Как начать: практический минимум

Для начала достаточно трёх шагов. Первый: определите базовую единицу — для цифры это 8px, для печати — 5mm. Второй: установите количество колонок и ширину промежутка (gutter). Для текстового журнала подойдут 12 колонок с 24px gutter. Третий: привяжите межстрочный интервал основного текста к вертикальному шагу — например, font-size 17px с line-height 28px образует baseline grid в 28px.

Руководство по сеткам Все статьи