Что такое baseline grid
Baseline grid (базовая сетка) — горизонтальная система направляющих, расположенных через равные интервалы по всей высоте страницы или экрана. Шаг этой сетки соответствует межстрочному интервалу основного текста. В результате каждая строка основного текста «сидит» на линии сетки, создавая вертикальный ритм — визуальную согласованность, которую читатель ощущает как спокойствие и порядок, даже не осознавая её источника.
Концепция базовой линии пришла в типографику из каллиграфии и металлического набора, где физическая линия базировала все символы. Современная интерпретация — это математически выверенная система, связывающая все текстовые и визуальные элементы страницы вертикальным ритмом.
Почему вертикальный ритм важен
Вертикальный ритм — аналог метра в музыке. Читатель не воспринимает его сознательно, но нарушение ритма немедленно создаёт ощущение дискомфорта. Когда элементы «съезжают» с базовой линии — заголовок занимает нечётное количество единиц, вставленное изображение нарушает шаг сетки — разворот начинает казаться небрежным, даже если читатель не может объяснить почему.
Профессиональные издатели говорят о вертикальном ритме как об «инструменте доверия»: последовательный ритм сигнализирует о внимании к деталям и профессионализме редакции. Это одна из причин, почему крупные американские издания — NYT, The Atlantic, New Yorker — уделяют baseline grid особое внимание.
«Вертикальный ритм — это дыхание страницы. Когда он нарушен, страница задыхается.»
— Роберт Брингхёрст, «Основы стиля в типографике»Как рассчитать шаг baseline grid
Стандартная формула: шаг = межстрочный интервал основного текста. Если ваш основной текст — 17px с line-height 1.6, то line-height = 17 × 1.6 = 27.2px. Шаг сетки — 27px или 28px (округляем до целого числа пикселей).
Для многоколоночных изданий, где несколько текстовых потоков с разным кеглем должны выравниваться друг с другом, используют более мелкий шаг — 4px или 8px — и задают line-height всех текстовых элементов кратным этому значению. Это стандарт для Google Material Design и большинства компонентных систем.
Baseline grid в Figma: пошаговая настройка
- Откройте панель Layout Grid на фрейме (Cmd/Ctrl + Shift + 4).
- Нажмите «+» для добавления новой сетки, выберите тип «Rows».
- Установите Count = Auto, Height = шаг вашей baseline grid (например, 8).
- Offset = 0, Gutter = 0. Включите видимость (иконка глаза).
- Зафиксируйте эту сетку как стиль через панель Styles → Grid Styles.
После этого выравнивайте текстовые фреймы так, чтобы нижняя линия строк совпадала с линиями сетки. В Figma это удобно делать через «Align to pixel grid» и ручную проверку в режиме просмотра сетки.
Baseline grid в InDesign
В InDesign базовая сетка настраивается через Preferences → Grids. Параметры: «Start» — отступ от верхнего края страницы (обычно равен верхнему полю), «Relative To» — Top of Page, «Increment Every» — шаг в pt или mm, «Color» — выберите ненасыщенный цвет для удобства работы.
Для привязки текстового фрейма к baseline grid выделите его, откройте Text Frame Options (Cmd/Ctrl + B), на вкладке Baseline Options выберите «First Baseline: Leading» и включите «Align to Baseline Grid» в параметрах абзаца.
Baseline grid в вебе: ограничения и обходные пути
Браузеры не поддерживают baseline grid нативно. Но принцип воспроизводится через CSS: задайте базовое значение (например, 8px) и делайте все line-height, margin, padding, height кратными этой единице. Инструменты вроде Gridlover.net позволяют автоматически рассчитать правильные пропорции для всей типографической шкалы.