VIDEMIND
Графический дизайнГид

Издательский дизайн: сетка, полоса, ритм разворота

Как устроена журнальная и книжная вёрстка: модульная сетка, работа с полосой, чередование плотности и роль изображения в развороте.

Издательский дизайн: сетка, полоса, ритм разворота — графика VIDEMIND
VIDEMIND · generated
Содержание · 10
  1. Разворот, а не страница
  2. Поля и полоса набора
  3. Модульная сетка
  4. Ритм издания
  5. Служебные элементы
  6. Разворот как единица
  7. Что переносится в цифру, а что нет
  8. Базовая сетка: почему строки должны совпадать
  9. Как её задают
  10. Что в итоге

Как устроена журнальная и книжная вёрстка: модульная сетка, работа с полосой, чередование плотности и роль изображения в развороте.

Разворот, а не страница

Единица издательской вёрстки — разворот. Читатель видит две страницы одновременно, и композиция строится на их взаимодействии: одна может быть плотной, другая воздушной, изображение может переходить через корешок.

Верстать страницы по отдельности — самая распространённая ошибка начинающих: издание превращается в набор несвязанных полос.

Разворот как единица композиции: страницы работают в паре
Разворот как единица композиции: страницы работают в пареVIDEMIND · generated

Поля и полоса набора

Классическая схема полей асимметрична: внутреннее поле меньше внешнего, верхнее меньше нижнего. Это уравновешивает разворот и оставляет место для пальцев.

Пропорции полей исторически выводились из пропорций страницы; практически удобно начинать с соотношения 2: 3: 4: 5 (внутреннее, верхнее, внешнее, нижнее).

ПолеОтносительная величинаЗачем
Внутреннее2Разворот собирается
Верхнее3Полоса не давит
Внешнее4Место для пальцев
Нижнее5Оптическое равновесие

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

Сетка в издании задаёт не только колонки, но и горизонтальные модули: строки базовой сетки, по которым выравниваются подписи, врезки и верх изображений.

Базовая линия — самый недооценённый инструмент: выравнивание текста соседних колонок по одним и тем же линиям делает разворот собранным даже при сложной вёрстке.

Издательский дизайн: сетка, полоса, ритм разворота — графика VIDEMIND
VIDEMIND · generated

Ритм издания

Хорошее издание чередует плотность: за текстовым разворотом идёт разворот с крупным изображением, за ним — плотная полоса с врезками. Монотонная вёрстка утомляет независимо от качества отдельных полос.

Приём проверяется раскладкой миниатюр: разложите все развороты в один экран и посмотрите на чередование светлых и тёмных пятен.

  • Разложите миниатюры всех разворотов вместе.
  • Проверьте чередование плотных и воздушных.
  • Найдите три и более одинаковых подряд — это места для переработки.
  • Убедитесь, что открывающие развороты разделов выделяются.
Полосу читают не по одной: разворот — единица вёрстки, и всё, что верно для страницы, проверяется на паре.

Служебные элементы

Колонцифры, колонтитулы, подписи и сноски — то, что отличает издание от набора текста. Их положение должно быть постоянным и подчинённым: они помогают ориентироваться, а не участвуют в композиции.

Издательский дизайн: сетка, полоса, ритм разворота — графика VIDEMIND
VIDEMIND · generated

Разворот как единица

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

Ритм задаётся чередованием: плотная полоса — воздух, изображение — текст. Просмотр журнала подряд должен давать перепад, иначе издание читается как справочник, каким бы хорошим ни был отдельный разворот.

Что переносится в цифру, а что нет

  • Переносится: сетка, иерархия, мера строки, дисциплина полей.
  • Переносится: идея ритма — чередование плотного и разреженного работает и при прокрутке.
  • Не переносится: разворот. В вебе есть только одна полоса, и композиция строится вертикально.
  • Не переносится: фиксированная мера. Полоса резиновая, и правила задаются в относительных единицах.
  • Меняется: колонтитул превращается в липкую шапку, а колонцифра — в индикатор прогресса.
Издательский дизайн: сетка, полоса, ритм разворота — графика VIDEMIND
VIDEMIND · generated

Базовая сетка: почему строки должны совпадать

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

Держать базовую сетку сложнее всего на заголовках и иллюстрациях: их высота почти никогда не кратна шагу. Решают это не подгонкой кегля, а отступами — заголовок получает сверху и снизу столько, чтобы следующий абзац вернулся на линию. Отсюда практическое следствие: в системе отступов не бывает произвольных значений, все они кратны шагу сетки.

Как её задают

  • Шаг равен интерлиньяжу основного текста: при кегле 10 и интерлиньяже 14 пунктов шаг — 14.
  • Заголовки набирают с интерлиньяжем, кратным шагу: 28 вместо 26, даже если по рисунку хочется 26.
  • Иллюстрации кадрируют по высоте до кратной шагу, а не растягивают текст под них.
  • Подписи и сноски часто идут в половинном шаге — это допустимое исключение, если оно одно.
  • В вебе то же самое достигается вертикальным ритмом: все вертикальные отступы кратны базовому интерлиньяжу.
Издательский дизайн: сетка, полоса, ритм разворота — графика VIDEMIND
VIDEMIND · generated

Что в итоге

Издательская вёрстка строится на развороте, асимметричных полях и базовой сетке, привязанной к интерлиньяжу.

Проверяйте ритм раскладкой миниатюр: монотонность видна только на всём издании сразу.

Коротко

Зачем вебу опыт журнальной вёрстки?
Почти всё, чем пользуется веб, придумано в ней: сетка, воздух, иерархия, ритм разворота. Отличие только в том, что полоса в вебе резиновая, — но правила соотношений от этого не меняются.
Какой длины должна быть строка в наборе?
Для кириллицы 60–70 знаков с пробелами. Короче — глаз слишком часто прыгает на новую строку, длиннее — теряет начало следующей.

Нашли ошибку или неточность в атрибуции? Напишите нам

Обсуждение

Загружаем…

Только имя и мысль. Ссылки, разметку, код и номера телефонов журнал не публикует — учётных записей на сайте нет, и оставлять здесь ссылку бессмысленно.

0 / 1500