Маркус Гард, типограф: Сеточная система вёрстки
Маркус Гард, типограф: Сеточная система вёрстки.
Оригинал статьи
Marcus Gärde, Typographer
Linnéa Bach Gärde, Designer
В результате детального анализа старинных книг Маркус Гард разработал пособие по созданию модульных схем-сеток, которое, в свою очередь, базируется на пропорциях листа. Данное руководство попало в его книгу «Путь вёрстки», которая была издана в 2007 году.
В данном начинании у него был помощник - в прошлом его студент - Авраам Жоржес, который приобрёл известность после публикации своей работы «Форма и бесформие».
Придерживаясь создания модульной сетки таким путём, в итоге мы получаем грамотную и функциональную модель. Главная задача, которой отвечает данная схема-сетка, является нахождение естественного месторасположения для всех требуемых компонентов дизайна для того, чтобы общая композиция была гармонична и приятна по восприятию. И тут нет никакого противоречия со свободой в творчестве: правильная модульная сетка - это и есть его основа добротного дизайна.
Модульная сетка Маркуса Гарда для страниц с определённым форматом в Adobe InDesign
1 шаг
Создаём новый документ
Формат А4 (210×297 mm).
Переводим миллиметры (mm) в пункты (pt):
210 mm ≈ 595,276 pt
297 mm ≈ 841,89 pt
Параметры шрифта:
841,89 / 595,276 ≈ 1,414
595,276 / 841,89 ≈ 0,7070
Настройка базовых линий
Baseline Grid
View > Grids & Guides > Show Baseline Grid
Alt + Ctrl + ‘ - включение/выключение базовых линий.
СОЗДАЁМ СЕТКУ БАЗОВЫХ ЛИНИЙ
Делим значение высоты страницы на значение интерлиньяжа.
841,89 / 11 = 76,53545454545455 (окр. = 77)
Далее получаем точный интерлиньяж. Для этого:
841,89 / 77 = 10,934 pt
Применяем полученные расчёты.
Edit > Preferences > Grids
И вводим следующие данные:
Start - 0 pt
Increment Every - 10,934 pt
2 шаг
Создаём горизонтальные направляющие (Guidelines) для изображений
Выбираем шрифт, который мы хотим использовать в дальнейшем. В нашем примере мы используем:
Печатаем “f”, после чего преобразовываем данный символ в кривые.
Type > Create Outlines
Или с помощью нажатия сочетаний клавиш: Shift + Ctrl + O
Теперь нам известна H (высота) данного символа. В данном примере, учитывая выбранный шрифт, H = 6,488 pt.
Включаем направляющие, если они не отображаются.
View > Show Rules
Или с помощью нажатия сочетаний клавиш: Ctrl + R
Ставим направляющую на границу верхнего поля страницы. Затем сдвигаем её вниз на 4,446 pt при помощи Move.
Данный параметр мы получаем следующим образом:
10,934 pt (интерлиньяж) − 6,488 pt (H символа “f”) = 4,446 pt
Выделяем направляющую.
Object > Transform > Move…
Или с помощью нажатия сочетаний клавиш: Shift + Ctrl + M
В графу Vertical вводим наш параметр - 4,446 pt.
Далее надо всё это продублировать 76 раз.
Для этого мы применяем команду Step and Repeat.
Выделяем направляющую.
Edit > Step and Repeat…
Или с помощью нажатия сочетаний клавиш: Alt + Ctrl + U
Вводим следующие параметры:
Repeat Count - 76 (кол-во дублируемых направляющих).
Vertical Offset - 10,934 pt (расстояние между направляющими).
Создаём вертикальные направляющие
У вертикальных направляющих свой собственный интервал. Высчитывается он следующим образом.
(841,89 / 77) × (595,276 / 841,89) ≈ 7,731 pt
841,89 / 77 - получение интерлиньяжа.
Также вертикальные направляющие мы будем дублировать с помощью Step and Repeat…
Выделяем направляющую, которая должна располагаться на левом крае страницы.
Далее Step and Repeat…
И вводим данные:
Repeat Count - 77 (кол-во дублируемых направляющих).
Horizontal Offset - 7,731 pt (расстояние между направляющими).
3 шаг
Блоки и колонны
В данном примере мы рассмотрим вариант разбивки страницы на 4 блока. Нам остаётся только выяснить, какие поля - как внешние, так и внутренние, подходят в данном случае, какое расстояние должно быть между колоннами.
Реализация проста. Нам всего лишь надо всё измерить и внести данные в Margins and Columns… .
Layout > Margins and Columns…
Вводим следующие параметры:
Top - 37,248 pt
Bottom - 54,67 pt
Inside - 38,658 pt
Outside - 46,399 pt
Number - 4
Gutter - 15,462 pt (данный параметр получаем следующим путём: 7,731 × 2 ≈ 15,4617 pt)
7,731 pt - интервал горизонтальных направляющих.
4 шаг
Размещение горизонтальных блоков
Изначально надо понять, какое количество блочных рядов нам походит для изображений. В данном примере рассмотрим вариант с пятью рядами.
Расположим на странице по тому же принципу, какой мы использовали с колонками. Между ними также должны быть одинаковые интервалы.
Измеряем внутренние и внешние поля.
Inside - 38,655 pt
Outside - 46,375 pt
И записываем данные.
Layout > Margins and Columns…
Убедитесь в том, что верхние края блоков соответствуют высоте «f», а нижние края выровнены по базовым линиям.
Создаём блоки строк по направляющим. Сделаем пять направляющих:
Layout > Create Guides…
Определение размер интервала между блоками:
10,934 (расстояние между направляющими) + (10,934 − 6,488) = 15,38 pt
Вводим параметры:
Rows
Number - 5
Gutter - 15,38 pt
Fit Guides to: Margins (указывает начало отсчёта блоков от полей)
Оригинал статьи
Marcus Gärde, Typographer
Linnéa Bach Gärde, Designer
В результате детального анализа старинных книг Маркус Гард разработал пособие по созданию модульных схем-сеток, которое, в свою очередь, базируется на пропорциях листа. Данное руководство попало в его книгу «Путь вёрстки», которая была издана в 2007 году.
В данном начинании у него был помощник - в прошлом его студент - Авраам Жоржес, который приобрёл известность после публикации своей работы «Форма и бесформие».
Придерживаясь создания модульной сетки таким путём, в итоге мы получаем грамотную и функциональную модель. Главная задача, которой отвечает данная схема-сетка, является нахождение естественного месторасположения для всех требуемых компонентов дизайна для того, чтобы общая композиция была гармонична и приятна по восприятию. И тут нет никакого противоречия со свободой в творчестве: правильная модульная сетка - это и есть его основа добротного дизайна.
Модульная сетка Маркуса Гарда для страниц с определённым форматом в Adobe InDesign
1 шаг
Создаём новый документ
Формат А4 (210×297 mm).
Переводим миллиметры (mm) в пункты (pt):
210 mm ≈ 595,276 pt
297 mm ≈ 841,89 pt
Параметры шрифта:
- Название шрифта - Myriad Pro
- Кегль = 9 pt
- Интерлиньяж = 11 pt
841,89 / 595,276 ≈ 1,414
595,276 / 841,89 ≈ 0,7070
Настройка базовых линий
Baseline Grid
View > Grids & Guides > Show Baseline Grid
Alt + Ctrl + ‘ - включение/выключение базовых линий.
СОЗДАЁМ СЕТКУ БАЗОВЫХ ЛИНИЙ
Делим значение высоты страницы на значение интерлиньяжа.
841,89 / 11 = 76,53545454545455 (окр. = 77)
Далее получаем точный интерлиньяж. Для этого:
841,89 / 77 = 10,934 pt
Применяем полученные расчёты.
Edit > Preferences > Grids
И вводим следующие данные:
Start - 0 pt
Increment Every - 10,934 pt
2 шаг
Создаём горизонтальные направляющие (Guidelines) для изображений
Выбираем шрифт, который мы хотим использовать в дальнейшем. В нашем примере мы используем:
- Название шрифта - Myriad Pro
- Кегль = 9 pt
- Интерлиньяж = 11 pt
Печатаем “f”, после чего преобразовываем данный символ в кривые.
Type > Create Outlines
Или с помощью нажатия сочетаний клавиш: Shift + Ctrl + O
Теперь нам известна H (высота) данного символа. В данном примере, учитывая выбранный шрифт, H = 6,488 pt.
Включаем направляющие, если они не отображаются.
View > Show Rules
Или с помощью нажатия сочетаний клавиш: Ctrl + R
Ставим направляющую на границу верхнего поля страницы. Затем сдвигаем её вниз на 4,446 pt при помощи Move.
Данный параметр мы получаем следующим образом:
10,934 pt (интерлиньяж) − 6,488 pt (H символа “f”) = 4,446 pt
Выделяем направляющую.
Object > Transform > Move…
Или с помощью нажатия сочетаний клавиш: Shift + Ctrl + M
В графу Vertical вводим наш параметр - 4,446 pt.
Далее надо всё это продублировать 76 раз.
Для этого мы применяем команду Step and Repeat.
Выделяем направляющую.
Edit > Step and Repeat…
Или с помощью нажатия сочетаний клавиш: Alt + Ctrl + U
Вводим следующие параметры:
Repeat Count - 76 (кол-во дублируемых направляющих).
Vertical Offset - 10,934 pt (расстояние между направляющими).
Создаём вертикальные направляющие
У вертикальных направляющих свой собственный интервал. Высчитывается он следующим образом.
(841,89 / 77) × (595,276 / 841,89) ≈ 7,731 pt
841,89 / 77 - получение интерлиньяжа.
Также вертикальные направляющие мы будем дублировать с помощью Step and Repeat…
Выделяем направляющую, которая должна располагаться на левом крае страницы.
Далее Step and Repeat…
И вводим данные:
Repeat Count - 77 (кол-во дублируемых направляющих).
Horizontal Offset - 7,731 pt (расстояние между направляющими).
3 шаг
Блоки и колонны
В данном примере мы рассмотрим вариант разбивки страницы на 4 блока. Нам остаётся только выяснить, какие поля - как внешние, так и внутренние, подходят в данном случае, какое расстояние должно быть между колоннами.
Реализация проста. Нам всего лишь надо всё измерить и внести данные в Margins and Columns… .
Layout > Margins and Columns…
Вводим следующие параметры:
Top - 37,248 pt
Bottom - 54,67 pt
Inside - 38,658 pt
Outside - 46,399 pt
Number - 4
Gutter - 15,462 pt (данный параметр получаем следующим путём: 7,731 × 2 ≈ 15,4617 pt)
7,731 pt - интервал горизонтальных направляющих.
4 шаг
Размещение горизонтальных блоков
Изначально надо понять, какое количество блочных рядов нам походит для изображений. В данном примере рассмотрим вариант с пятью рядами.
Расположим на странице по тому же принципу, какой мы использовали с колонками. Между ними также должны быть одинаковые интервалы.
Измеряем внутренние и внешние поля.
Inside - 38,655 pt
Outside - 46,375 pt
И записываем данные.
Layout > Margins and Columns…
Убедитесь в том, что верхние края блоков соответствуют высоте «f», а нижние края выровнены по базовым линиям.
Создаём блоки строк по направляющим. Сделаем пять направляющих:
Layout > Create Guides…
Определение размер интервала между блоками:
10,934 (расстояние между направляющими) + (10,934 − 6,488) = 15,38 pt
Вводим параметры:
Rows
Number - 5
Gutter - 15,38 pt
Fit Guides to: Margins (указывает начало отсчёта блоков от полей)