Сетка в типографике — это не ограничение, а язык. Это система координат, в которой каждый элемент страницы находит своё место не случайно, а в соответствии с математической логикой, заложенной в пропорции формата. Из всех инструментов типографа сетка, пожалуй, наименее заметна читателю и наиболее ощутима при её отсутствии.

Швейцарская школа и рождение модульного подхода

В 1950-х годах группа швейцарских дизайнеров — Йозеф Мюллер-Брокманн, Армин Хофманн, Эмиль Рудер, Ричард Пол Лохзе — систематизировала принципы работы с пространством страницы. Их называют «интернациональным стилем» или «швейцарским стилем» — хотя правильнее говорить о систематическом применении конструктивистских принципов к задачам массовой коммуникации.

Книга Мюллера-Брокманна «Система модульной сетки» (1981) стала кодексом этого подхода. Её суть: страница делится на горизонтальные и вертикальные модули — прямоугольные ячейки равного размера, разделённые неизменными отступами. Любой элемент — текстовый блок, иллюстрация, подпись — занимает целое кратное количество модулей.

Как строится сетка

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

Принцип базовой сетки

Базовая сетка — это горизонтальные линии, расположенные через равный интервал, совпадающий с интерлиньяжем основного текста. Все строки всех текстовых блоков страницы должны совпадать с этими линиями — только тогда разворот выглядит ритмично и воспринимается как единое целое.

Горизонтальные колонки создают основу для размещения текста; поля между ними (gutters) определяют минимальный просвет между соседними блоками. Соотношение ширины колонки к ширине поля обычно берётся от 1:1/5 до 1:1/3 — чем меньше кегль, тем относительно уже допускаются поля.

От бумаги к экрану

Переход типографики на экран в 1990-х годах поставил сетку под угрозу: HTML первых лет был семантическим, но не позиционным. Дизайнеры имитировали многоколоночные макеты таблицами — костылем, который работал, но нарушал принцип разделения структуры и представления.

CSS Float (1997) дал первый реальный инструмент колонирования, но с ограничениями по выравниванию. Flexbox (2009–2012) решил задачу одноосных макетов. CSS Grid (2017) впервые предоставил браузеру явную двухосную сетку — концептуально эквивалентную типографической модульной системе.

МетодГодОграничение
HTML Tables1993Семантическая некорректность, хрупкость
CSS Float1997Одна ось, проблемы с высотой
CSS Flexbox2009Одна ось, нет межстрочной сетки
CSS Grid2017Нет нативной базовой сетки

Проблема базовой линии остаётся нерешённой и сегодня: CSS Grid контролирует колонки и строки, но не выравнивает строки текста разных элементов по единой базовой сетке. Это делается либо вручную, через кратные значения отступов, либо через JavaScript-библиотеки вроде gridlover.net.

Практические рекомендации

Современная практика работы с типографической сеткой в веб-дизайне предполагает несколько устойчивых принципов:

  • Выбирайте единицу rem для всех размеров, связанных с типографикой — это сохраняет масштабируемость при изменении базового размера.
  • Устанавливайте line-height как безразмерный множитель (1.5, 1.6), а не в пикселях — текст остаётся пропорциональным при изменении кегля.
  • Используйте CSS Custom Properties для хранения шага сетки: --grid-unit: 0.5rem; — и стройте все отступы кратными этому значению.