Система сіток є найбільш недооціненим інструментом дизайнера: невидима конструкція, завдяки якій каталог, книга чи вебсторінка утворюють цілісну композицію.
Нижче наведено покроковий метод, який ви пройдете за чверть години, користуючись нашими безкоштовними інструментами. Кожен крок містить посилання, що відкриває інструмент із готовими налаштуваннями з цього прикладу: каталогу А4.
Крок 1. Формат і носій
Почніть із запитання, де проєкт буде переглядатися: друк чи екран, А4 чи телефон, у руці чи здалеку. Формат визначає рамки подальших рішень: пропорції сторінки, можливі береги, ширину шпальти набору та діапазон доречних поділів на колонки. Сама кількість колонок випливає вже з типу контенту, кегля, гарнітури та бажаної довжини рядка.
Одиниці вимірювання обираєте відповідно до носія: у друку найчастіше міліметри та пункти, в екранних проєктах одиниці CSS, такі як px, rem, em чи ch.
Відкрити генератор сіток із форматом А4
Крок 2. Береги: канон або свідоме рішення
Береги визначають шпальту набору, тобто прямокутник, у якому вміщується текст. Тут є два шляхи: скористатися готовим каноном або вирішити самостійно, керуючись призначенням видання.
Канон це не одне число, а набір трьох пропорційних правил. По-перше, розміри берегів є частками розмірів сторінки, а не значеннями в міліметрах, тож той самий рецепт працює для будь-якого формату. По-друге, береги збільшуються у сталому порядку: найвужчий корінцевий, далі верхній, потім зовнішній, найширший нижній. По-третє, у конструкції Ван де Граафа шпальта набору зберігає пропорцію сторінки, тому повторює її форму в меншому масштабі. Запис 2:3:4:6 дає той самий ефект лише на сторінці з пропорцією 2:3; на форматі А4 шпальта набору має вже іншу пропорцію, ніж сторінка.
Ці правила не були вигадані за письмовим столом, хоча до їхнього походження варто ставитися обережно. У давніх рукописах і ранніх друках пропорції шпальти набору бувають напрочуд регулярними, а в середині ХХ століття запропонували геометричні побудови, засновані на діагоналях сторінки та розвороту, які відтворюють ці схеми. Це реконструкції: ми напевно не знаємо, чи давні майстри користувалися саме таким кресленням. Описав і популяризував їх Ян Чихольд в есеї про пропорції книги середини п'ятдесятих років. Практичне обґрунтування просте: розворот ми сприймаємо як одну цілісність, тому корінцеві береги, що стикаються біля корінця, оптично підсумовуються і мають бути вужчими. Нижній берег найширший, бо сторінка візуально осідає, і на ньому лежать великі пальці читача.
Ван де Графф ділить сторінку на дев'ятини: корінцевий берег це 1/9 ширини, зовнішній 2/9, верхній 1/9 висоти, нижній 2/9. Для сторінки з пропорцією 2:3 це дає співвідношення 2:3:4:6 у порядку корінцевий, верхній, зовнішній, нижній, тобто схему, описану Чихольдом. Отже, обидва рецепти не є незалежними: на сторінці 2:3 вони приводять до того самого рішення, а наш приклад 160 × 240 мм має саме цю пропорцію. Результат це широкі, просторі береги та шпальта набору в пропорції сторінки.
Другий шлях це рішення, тобто власні береги, дібрані під завдання. Ви звертаєтеся до нього тоді, коли видання не є книгою для тривалого читання: у каталозі, листівці, звіті чи екранному проєкті канон зазвичай віддає забагато площі. Рішення, однак, не означає довільності, бо випливає з конкретних передумов: скільки контенту має вміститися на сторінці і чи важлива для вас економія паперу; яким способом видання буде скріплене, бо клейове скріплення забирає частину корінцевого берега і його треба розширити; чи графіка виходить до краю, що вимагає друку навипуск і змінює враження від ширини берега; які постійні елементи мають вміститися на сторінці, від пагінації і колонтитула до штрихкоду чи правового підпису; нарешті як читач тримає видання і де через це не повинно бути контенту.
Практична порада: замість того, щоб вписувати рівні 20 мм, оберіть пропорцію і дотримуйтеся її послідовно в усьому проєкті. У нашому прикладі каталогу А4 ми обираємо симетричні береги 16,8 мм, за яких шпальта набору займає приблизно від 70 до 75 відсотків площі сторінки. Генератор показує цю частку в реальному часі, тож ви одразу бачите, скільки місця віддається на світло, а скільки залишається на контент.
Перегляньте канон Чихольда на розвороті книги 160 × 240
Крок 3. Інтерліньяж, тобто одиниця сітки
Найважливіше рішення в усьому процесі: інтерліньяж основного тексту стає одиницею базової сітки. Текст 10 пт на інтерліньяжі 12 пт означає сітку кроком 12 пт, тобто 4,233 мм. Відтепер усе, що має висоту, рахуємо в рядках: шпальту набору, модулі, зображення, відступи.
Завдяки цьому рядки в сусідніх колонках зберігають спільний ритм, а за послідовного складання ректо і версо рядки тексту на обох сторонах аркуша припадають на ті самі висоти, що обмежує візуальний хаос, спричинений просвічуванням тонкого паперу.
Інструмент підганяє шпальту набору під ціле число рядків двома способами на вибір. Перший переносить надлишок висоти в нижній берег і показує, наскільки він збільшується. Другий залишає береги незмінними, що важливо при канонах, і мінімально коригує інтерліньяж. Коли для заповнення шпальти бракує принаймні одного рядка, інструмент підказує кількість рядків, яка вміститься без залишку.
Крок 4. Колонки та довжина рядка
Кількість колонок випливає зі змісту, а не з моди. Для суцільного тексту зазвичай варто орієнтуватися на 45 до 75 знаків у рядку, із середнім значенням близько 66, а корекцію вносити залежно від гарнітури, кегля та характеру видання. Вузькі журнальні шпальти бувають помітно коротшими і при 35 до 50 знаках можуть працювати дуже добре.
Дванадцять вузьких колонок це не дванадцять шпальт тексту, а гнучкий поділ: текст займає 3, 4 або 6 з них, зображення будь-яку кількість. Інструмент оцінює кількість знаків у рядку для однієї колонки, приймаючи середню ширину знака рівною 0,47 фірета, і підказує, скільки колонок треба об'єднати, щоб потрапити в зручний для читання діапазон. Це наближення: конкретна гарнітура може дати результат на кілька знаків інший.
Крок 5. Поля: модулі в цілих рядках
Модулі виникають на перетині колонок і рядів: поділ шпальти набору на рядки перетворює колонки на сітку полів. Трапляються схеми з 8, 20 чи 32 модулів, але це приклади, а не канон; так само добре працює 12 або 24. Практичне правило звучить так: висоти полів та відстані між ними варто виражати цілим числом одиниць базової сітки. Класичним і дуже зручним рішенням є відступ, що дорівнює одному рядку, хоча трапляються й два та більше. Тоді зображення, що займає два поля по вертикалі, закінчується на тій самій висоті, що й текст поруч.
Відкрити сітку з 20 полів (4 × 5) на А4
Крок 6. Зображення на сітці
Зображення повинно займати цілі поля: 1 × 1, 2 × 1, 2 × 2, 3 × 2 і так далі. Краї зображення повинні послідовно узгоджуватися з межами модулів і з ритмом рядків. Найнадійнішим орієнтиром є межа модуля: нижній край зображення збігається з нижнім краєм поля, а отже, з базовою лінією останнього рядка, який у ньому вміщується. У класичних працях трапляється додатково вирівнювання верхнього краю до висоти великих літер сусіднього тексту; оберіть одну умову і дотримуйтеся її в усьому виданні.
Таблиця розмаху в генераторі подає розміри та пропорції блоків, що охоплюють до чотирьох колонок і чотирьох рядів, тобто шістнадцять найпоширеніших кадрів. Завдяки цьому фотограф чи ретушер знає, як кадрувати, ще до початку складання.
Крок 7. Типографіка на тій самій сітці
Сітка без шрифту порожня. Кнопка Підібрати шрифт до цієї сітки переносить інтерліньяж, кегль і ширину колонки в типографічний інструмент, який будує повну ієрархію: підпис, текст, лід і три рівні заголовків.
Інтерліньяжі окремих рівнів ієрархії співвідносяться з базовим модулем: вони можуть бути його цілою або, у гнучкішій сітці, половинною кратністю. Поділ на піврядки це сучасне розширення класичної моделі, у якій половинок уникали; в нашому інструменті текст і підписи тримають цілі рядки, а лід і заголовки можуть стояти на піврядку. Інструмент рахує лише інтерліньяжі і не стежить за висотою цілих блоків чи відступами перед ними і після них; про повернення на цілий рядок має подбати дизайнер.
Відкрити типографічний інструмент із налаштуваннями цього каталогу (шестиколонкова шпальта)
Крок 8. Перевірка та експорт
Наприкінці поставте собі чотири запитання: чи ієрархія заголовків чітко видима, чи найменший текст залишається комфортно читабельним у цільовій технології, чи суцільний текст має правильну довжину рядка і чи елементи послідовно повертаються до ритму сітки.
Інструмент попереджає, коли підпис опускається нижче 7 пт у друку або 12 px на екрані. Це попереджувальні значення, прийняті в калькуляторі, а не норми: 7 пт буває чудово читабельним у гарнітурі з великою висотою «ікс» на хорошому папері і підводить у тонкому шрифті на вбирному папері, а рекомендації доступності вебсторінок не встановлюють мінімального кегля: вони вимагають збільшення тексту до 200 відсотків без втрати змісту та коректного перетікання макета при ширині 320 пікселів CSS.
Коли все збігається, експортуйте сітку як специфікацію для програми DTP, PDF у масштабі 1:1 (підкладка та контрольний відбиток), SVG або CSS Grid зі змінними для вебсторінки. Посилання на конфігурацію можна надіслати співробітникам: воно відкриє інструмент точно в цьому стані.
Коли проєкт розглядатимуть здалеку
Плакат, стіна стенду чи банер підпорядковуються іншій логіці: читабельність визначає кут зору, а не кегль. Для простого контрастного напису орієнтовну висоту великої літери можна вирахувати саме з кута зору; за припущення 15 кутових хвилин це дає приблизно 44 мм з 10 м і приблизно 13 см з 30 м. У реальному проєкті це значення варто збільшити, особливо коли глядач перебуває в русі, бачить напис лише мить або контраст і освітлення гірші. Впливають також гарнітура, товщина штрихів і висота монтажу.
Підсумок
Хороша сітка не є прикрасою, а є рішенням, ухваленим один раз і послідовно витриманим: формат, береги, інтерліньяж як одиниця, колонки, поля. Уся інша робота стає тоді швидшою, а проєкт виглядає цілісним і тоді, коли до нього додаються наступні сторінки.
