Системи сіток: генератор сітки макета для друку та екрана
Побудуйте систему сіток, як у підручниках з типографіки: формат сторінки або екрана, поля за каноном (Ван де Грааф, Чихольд) або пресет (золотий перетин, модульний, однакові поля) або власні, колонки з міжколонниками, модулі в цілих базових лініях, інтерліньяж і типографічна шкала, узгоджена з базовою сіткою. Попередній перегляд наживо, експорт у SVG, PDF, CSS Grid, JSON і налаштування для програм DTP.
Готові налаштування для типових проєктів. Вибір заповнює поля нижче, які можна далі змінювати.
Сторінка / екран
Поля
Книжкові канони (Ван де Грааф, Чихольд) і пресет золотого перетину навмисно дають широкі поля: поле набору становить близько 40–60 % сторінки. Для листівок, плакатів та екрана оберіть симетричні або власні поля.
Колонки та модулі
Базова сітка
Типографічна шкала
Значення
Розміри зображень на сітці
Зображення заповнює цілі поля: нижній край на базовій лінії, верхній приблизно на 0,7 кегля над базовою лінією першого рядка (висота великих літер). Проміжок між полями = один рядок.
Код і налаштування
Що таке система сіток і навіщо її будувати?
Система сіток – це невидима конструкція макета: поля окреслюють поле набору, колонки й міжколонники впорядковують ширини, модулі впорядковують висоти, а базова сітка (інтерліньяж) робить так, що текст у сусідніх колонках і на сусідніх сторінках стоїть на тих самих лініях. Добре побудована сітка скорочує проєктування, уніфікує видання й дозволяє поєднати друк з екраном на спільній логіці пропорцій.
Канони полів (Ван де Грааф, Чихольд) і пресет золотого перетину
Канон Ван де Граафа – це геометрична побудова, що ділить сторінку на дев’яті частини: внутрішнє поле 1/9 ширини, зовнішнє 2/9, верхнє 1/9 висоти, нижнє 2/9. Поле набору має пропорцію сторінки. Чихольд описав пропорції 2:3:4:6 (внутрішнє : верхнє : зовнішнє : нижнє). Пресет на основі золотого перетину масштабує поля коефіцієнтом 1,618 (1 : φ : φ : φ², від 1/12 ширини сторінки); це не історичний канон. Генератор обчислює ці значення для будь-якого формату й дозволяє виправити їх вручну. Канон є відправною точкою, а не догмою.
Базова сітка та типографічна шкала
Інтерліньяж основного тексту (напр. 12 pt) стає одиницею базової сітки: поле набору припасовуємо до цілого числа ліній, модулі мають висоту в цілих лініях, а кеглі заголовків зі шкали (1,2 · 1,25 · 1,333 · 1,5 · 1,618) отримують інтерліньяж, кратний одиниці. Завдяки цьому все «сидить» на одній сітці. Для екрана та сама логіка працює в пікселях (напр. 8 px), з експортом у CSS Grid і змінні CSS.
Словник термінів: сітки, набір і шпальта
- Система сіток
- Сукупність правил побудови сторінки: поля, колонки, модулі та базова сітка, які разом упорядковують розташування тексту й зображень у всьому виданні або на сайті.
- Набір (верстка)
- Розміщення тексту й графіки на сторінці за заданими параметрами: форматом, полями, шпальтами, кеглем та інтерліньяжем. Колись ручний набір із металевих літер, сьогодні робота в програмі DTP або в CSS.
- Поле набору
- Ділянка сторінки всередині полів, де розміщують текст і зображення. У книжковій типографіці її називають також смугою набору або дзеркалом сторінки.
- Колонка тексту (шпальта)
- Вертикальна смуга тексту сталої ширини (ширини набору); сторінка може мати одну або кілька шпальт. У вебдизайні їй відповідає колонка контенту.
- Колонка сітки
- Одиниця поділу ширини поля набору. Шпальта тексту може займати одну або кілька колонок сітки, напр. 3 з 12.
- Міжколонник (gutter)
- Порожня смуга між колонками сітки або шпальтами. Часто її встановлюють рівною інтерліньяжу або кратною йому, щоб горизонтальна сітка узгоджувалася з вертикальною, але зрештою її добирають до ширини шпальти та кегля.
- Поля
- Ділянки між краєм сторінки та полем набору: верхнє (головка), нижнє (хвіст), внутрішнє (корінцеве) і зовнішнє (бічне). На розвороті внутрішні поля сходяться в корінці.
- Канон полів
- Історична побудова, що задає пропорції полів, напр. Ван де Граафа (1/9 і 2/9 сторінки) або Чихольда (2:3:4:6). Пресет є сучасною, умовною пропорцією, а не каноном.
- Модуль (поле)
- Прямокутник на перетині колонки та рядка сітки; одиниця, до якої прив’язують блоки тексту й зображення. Розкладка на 8, 20 чи 32 поля означає кількість модулів у полі набору.
- Базова сітка
- Сукупність горизонтальних ліній із кроком, що дорівнює інтерліньяжу основного тексту. Базові лінії рядків у всіх колонках і на сусідніх сторінках лежать на тих самих лініях.
- Базова лінія
- Невидима лінія, на якій стоять літери без нижніх виносних елементів (a, m, x). Інтерліньяж дорівнює відстані між сусідніми базовими лініями.
- Інтерліньяж
- Відстань між базовими лініями сусідніх рядків у пунктах або пікселях. Запис 10/12 pt означає кегль 10 pt та інтерліньяж 12 pt.
- Кегль
- Номінальний розмір шрифту в пунктах (1 pt = 0,353 mm) або пікселях. Висота літер менша й залежить від гарнітури: у більшості текстових шрифтів великі літери займають близько 0,66–0,73 кегля.
- Ширина набору (знаків у рядку)
- Ширина шпальти, виражена кількістю знаків у рядку. Для суцільного тексту найчастіше рекомендують 45–75 знаків; коротші рядки рвуть читання, довші втомлюють око, хоча межі залежать від гарнітури, кегля та виду тексту.
- Типографічна ієрархія
- Упорядкована система ролей тексту (підпис, основний текст, лід, заголовки), що різняться кеглем, інтерліньяжем і насиченістю та побудовані на спільній шкалі.
- Типографічна шкала
- Послідовність кеглів, що випливає з однієї пропорції, напр. 1,25: кожний наступний кегль дорівнює попередньому, помноженому на пропорцію.
- Розворот
- Пара суміжних сторінок розгорнутого видання. Поля на ньому дзеркальні: внутрішнє біля корінця, зовнішнє біля краю.
- Вертикальний ритм
- Регулярність вертикальних відступів, що випливає з базової сітки: висоти блоків і проміжки між ними кратні інтерліньяжу.
- Випуск під обріз
- Ділянка графіки, що виходить за лінію різу (зазвичай 3 mm) і запобігає білим смужкам після обрізання. Не належить до поля набору.
- DTP
- Desktop publishing: комп’ютерна підготовка видань до друку. Інструмент не експортує файли для програм DTP; він створює текстове зведення (поля, шпальти, базова сітка), яке вручну переносять у налаштування документа.
