Модульная сетка

Учебник BCcampus описывает модульную сетку именно через постоянные горизонтальные и вертикальные деления и одинаковые модули. Поэтому одна колонка ещё не образует модульную сетку: к делению по ширине должно добавиться регулярное деление по высоте. ^{[1, § 3.4]}

Кратко

Модуль — ячейка сетки; несколько соседних модулей можно объединить под один элемент. ^[1]
Поле отделяет рабочую область от края листа, а межколонник или промежуток — соседние колонки и ряды.
Базовая сетка задаёт положение строк текста и решает другую задачу, хотя её шаг можно согласовать с модулями. ^{[1; 2]}
Одинаковая сетка допускает разные композиции: элементы могут занимать разные сочетания модулей. ^[1]

Происхождение и история термина

Модульная организация страницы не имеет подтверждённого в использованных источниках единственного изобретателя или дня появления. Документированная веха — международный типографский стиль, или швейцарский стиль, сложившийся в Швейцарии и Германии в 1950-х годах. Его представители применяли композиционные сетки и шрифты без засечек, сочетая порядок с асимметрией. ^{[1, § 1.6]}

В 1981 году вышло руководство Йозефа Мюллера-Брокманна Grid systems in graphic design. Издатель Niggli характеризует его как пошаговое пособие о функциях и применении сеток и приводит диапазон от 8 до 32 полей сетки. Это дата конкретного издания, а не дата изобретения метода. ^[3]

Цифровая вёрстка дала сеточному принципу отдельные технические реализации. Например, CSS Grid — двумерная модель размещения элементов веб-страницы с фиксированными и гибкими размерами. Она родственна печатной сетке по геометрии, но спецификация CSS не служит определением редакционной полосы. ^[4]

Суть и механизм

Возьмём учебную полосу условной городской газеты. После задания полей остаётся рабочая область. Разделим её на четыре колонки и шесть рядов; между соседними колонками и рядами оставим промежутки. Получатся 24 модуля. Направляющие задают координаты, а дизайнер решает, какие ячейки объединить для заголовка, фотографии, основного текста и справки.

Допустим, фотография занимает два модуля по ширине и два по высоте. Её область включает четыре ячейки и внутренние промежутки между ними. Заголовок может занять все четыре колонки, а короткая справка — одну. Сетка задаёт согласованные границы, но не выбирает содержание и не гарантирует удачную композицию.

Для строк текста нужна базовая сетка — ряд горизонтальных линий, к которым привязывают базовые линии букв. Adobe рекомендует связывать её шаг с интерлиньяжем, то есть расстоянием между базовыми линиями соседних строк; в InDesign возможна общая настройка документа и отдельная настройка текстового фрейма. ^[2] Модульная сетка определяет крупные области, а базовая помогает согласовать строки внутри них.

Виды и границы понятия

Учебник BCcampus различает несколько решений; это рабочее сопоставление, а не исчерпывающая классификация всех макетов. ^{[1, § 3.4]}

Сетка	Что она организует	Чем отличается от модульной
Одноколонная	Единое поле текста	Нет регулярного деления на несколько колонок и рядов
Многоколонная	Вертикальные области	Деление по высоте может отсутствовать
Модульная	Одинаковые ячейки по двум направлениям	Это предмет статьи
Базовая	Строки текста по высоте	Не задаёт сама по себе прямоугольные области макета

Сетка документа InDesign тоже не равна модульной системе издания. Это непечатаемые горизонтальные и вертикальные линии для выравнивания объектов; они работают независимо от базовой сетки. ^[2] Чтобы получить систему конкретного выпуска, дополнительно задают поля, число делений, промежутки и правила объединения ячеек.

Как применяется на практике

В российской конференционной публикации Цзан Юэцзэ и Ю. С. Ризен разобран учебный макет A4 в CorelDRAW 2017. Авторы сначала определяют рабочую область и поля, затем три колонки, кегль и межстрочный интервал. В их примере высота рабочей области соответствует 54 строкам; её делят на 18 ячеек — по шесть в каждом столбце, а высота ячейки соответствует девяти строкам. Это частная демонстрационная схема, а не норматив для российских журналов. ^{[5, с. 448]}

Вернёмся к условной газете. Для материала об открытии моста дадим заголовку всю ширину, фотографии — область 2 × 2 модуля, справке — одну колонку. Затем переставим фотографию вправо, сохранив сетку. Проверять нужно не только совпадение краёв с направляющими, но и связь подписи с фотографией, порядок чтения и достаточное место для заголовка. Это учебное упражнение редакции, а не результат исследования аудитории.

В веб-версии визуальная перестановка требует отдельной проверки. CSS Grid меняет видимое расположение, но сам по себе не меняет порядок озвучивания и последовательной навигации. Поэтому логический порядок материалов должен быть задан в исходном документе. ^{[4, § 4]}

Как рассчитать и проверить

Пусть ширина листа равна 210 мм, левое и правое поля — по 15 мм. Рабочая ширина $W=180$ мм. Для $n=4$ колонок с промежутком $g=6$ мм ширина одной колонки $c$ равна:

c=\frac{W-(n-1)g}{n}=\frac{180-3\times6}{4}=40{,}5\text{ мм}.

Множитель $n-1$ означает три промежутка между четырьмя колонками; знаменатель $n$ — число равных колонок. Обратная проверка: $4\times40{,}5+3\times6=180$ мм. Область шириной в две колонки включает один внутренний промежуток: $2\times40{,}5+6=87$ мм.

Для рабочей высоты 240 мм, шести рядов и промежутков по 6 мм высота модуля равна $(240-5\times6)/6=35$ мм. Два ряда с внутренним промежутком занимают $2\times35+6=76$ мм. Значит, область фотографии 2 × 2 модуля имеет размер 87 × 76 мм. Это размер рамки размещения; изображение можно кадрировать, а не растягивать с искажением.

Формула имеет границы: $n$ должно быть положительным целым, $g\geq0$ , а остаток $W-(n-1)g$ — положительным. При одной колонке внутренних промежутков нет. Если три промежутка займут все 180 мм, ширина колонок станет нулевой, и такая сетка непригодна для содержания.

Ошибки и ограничения

Если сначала разделить 180 мм на четыре, получится 45 мм, но добавление трёх промежутков по 6 мм даст 198 мм. Ошибка возникает потому, что место под промежутки не вычли до деления.

Геометрическая точность не заменяет редакционную проверку. Подпись может оказаться ближе к чужой фотографии, заголовок — не поместиться, а последовательность блоков — нарушить чтение. Тестовый макет стоит заполнить длинным заголовком, изображением с подписью и материалом с продолжением, а затем проверить границы и смысловые связи.

BCcampus связывает большее число колонок с большей гибкостью макета. ^[1] Однако доступные источники не задают одного числа модулей для всех проектов: в каждом случае его нужно соотнести с форматом, содержанием, типографикой и требуемыми размерами блоков.

Частые вопросы