Типографіка: добір кегля, інтерліньяжу та шрифтів для друку й екрана
Задайте кегль тексту, пропорцію шкали, базову сітку та ширину колонки, оберіть шрифти, і Ви отримаєте повну ієрархію (від підпису до H1) з інтерліньяжем на сітці, кількістю знаків у рядку, перевіркою правил набору та оцінкою пари шрифтів. Зразок показує все в масштабі 1:1. Експорт у CSS, JSON і текстове зведення для перенесення в програму DTP.
Носій
Базова сітка 0 = без сітки (інтерліньяж із пропорції). Ширина колонки 0 = без підрахунку знаків у рядку. З генератора сіток перенесіть інтерліньяж і ширину колонки.
Шрифти
Шрифти на вільних ліцензіях (SIL OFL, Apache), розміщені локально: висота x і висота великих літер виміряні з файлів шрифтів. Оцінка пари ґрунтується на контрасті класів, узгодженості висоти x та призначенні шрифту.
Оцінка пари
Зразок 1:1 для екрана 96 dpi
Ієрархія
Перевірка правил набору
Код і налаштування
Як дібрати кегль, інтерліньяж і ширину набору?
Три величини тримають одна одну: кегль, інтерліньяж і довжина рядка. Суцільний текст у друці зазвичай набирають у 9–11 pt, на екрані у 16–18 px. Рядок має містити 45–75 знаків: коротший рве читання, довший губить око при поверненні до лівого поля. Інтерліньяж зростає разом із довжиною рядка: у друці від 1,2 кегля (10/12 pt) при рядках до 75 знаків до близько 1,3 при довших; на екрані від близько 1,35 при коротких рядках до 1,6 при дуже довгих. Шрифти з великою висотою x виглядають більшими й потребують трохи вільнішого інтерліньяжу; шрифти з малою висотою x (ренесансні антикви) вимагають більшого кегля.
Ієрархія та типографічна шкала на базовій сітці
Ієрархія: це набір ролей (підпис, текст, лід, H3, H2, H1) із кеглями, що випливають зі спільної пропорції: 1,2 (м’яка), 1,25, 1,333, 1,5 або 1,618 (драматична). Різниця між сусідніми рівнями має бути виразною (зазвичай щонайменше 1,2×), а між H1 і текстом приблизно від 2× до 4×. З базовою сіткою інтерліньяж кожної ролі кратний кроку сітки: текст і підписи на повних лініях, лід і заголовки можуть ставати на півлініях за умови, що блок завершується на повній лінії. Завдяки цьому текст у сусідніх колонках і на сусідніх сторінках стоїть на тих самих лініях.
Як поєднувати шрифти: контраст, висота x, призначення
Добра пара дає контраст класів (антиква в тексті + гротеск у заголовку або навпаки), а не «майже те саме»: два схожі гротески виглядають як помилка. Узгоджена висота x робить тексти в обох шрифтах подібними за оптичною вагою. Акцидентні, рукописні шрифти та шрифти від руки придатні лише для заголовків і акцентів, ніколи для суцільного тексту. Найбезпечніший вибір: гарнітури, спроєктовані разом (наприклад, пари антиква + гротеск одного автора), або одна гарнітура з багатьма накресленнями. Інструмент оцінює пару за шкалою 0–100 і пропонує заголовкові шрифти до обраного текстового шрифту.
Шрифти у зразку розміщені локально за ліцензіями SIL Open Font License 1.1 та Apache 2.0; реєстр ліцензій: LICENSES.md
Словник типографіки: поняття, історія, факти
- Друкарська літера, шрифт, гарнітура
- Історично друкарська літера була металевим брусочком із відлитим на торці знаком, а шрифт (font) означав повний комплект таких літер однієї гарнітури в одному кеглі. Сьогодні шрифтом називають файл (наприклад WOFF2, OTF), а гарнітурою графічний проєкт літер, незалежний від носія. У побуті ці слова вживають як синоніми; у наборі їх варто розрізняти.
- Родина шрифтів і накреслення
- Родина шрифтів об’єднує накреслення однієї гарнітури: насиченість (Light, Regular, Bold), ширину (Condensed, Extended), нахил (Italic). Варіативні шрифти (OpenType 1.8, 2016) зберігають усю родину в одному файлі з осями, наприклад насиченості (wght) та оптичного розміру (opsz).
- Типографський пункт
- Одиниця кегля. Пункт Дідо (Франція, XVIII ст.) дорівнює 0,376 мм; англо-американський пункт, прийнятий у DTP, становить 1/72 дюйма = 0,3528 мм. Піка дорівнює 12 пунктам, цицеро 12 пунктам Дідо. Піксель CSS становить 1/96 дюйма, тому 1 pt = 1,333 px.
- Кегль
- Номінальний розмір шрифту: колись розмір кегельної площадки металевої літери, сьогодні висота поля знака. Самі літери менші за кегль: великі літери зазвичай займають 0,66–0,73 кегля, а висота малих літер 0,45–0,55. Тому дві гарнітури в одному кеглі можуть здаватися різними за розміром.
- Інтерліньяж
- Відстань між базовими лініями сусідніх рядків. Англійська назва leading походить від свинцевих смужок (lead), які складальники вкладали між рядками літер. Запис 10/12 означає кегль 10 та інтерліньяж 12 пунктів.
- Базова лінія, висота малих літер, виносні елементи
- Базовою лінією називають лінію, на якій стоять літери. Висота малих літер (x-height) вимірюється без виносних елементів (як у x); верхні виносні елементи (b, d, k) і нижні (g, p, y) виходять за її межі. Гарнітури з великою висотою малих літер (наприклад Verdana, Inter) краще читаються в малих кеглях на екрані.
- Засічка (серіф)
- Короткий поперечний елемент, що завершує штрих літери. Засічки видно вже в римських написах (колона Траяна, 113 р.); у друці вони ведуть око вздовж рядка. Шрифти без засічок називають беззасічковими, гротесками (від англійського «grotesque» XIX століття) або, в американській традиції, готичними (Gothic).
- Антиква та її різновиди
- Антиквою називають шрифт із засічками, що походить від гуманістичного мінускула та римських капітальних літер. Ренесансна (Jenson 1470, Garamond XVI ст.): малий контраст, похила вісь. Барокова, або перехідна (Baskerville, 1750-ті): більший контраст. Класицистична (Didot, Bodoni, кінець XVIII ст.): дуже великий контраст, волосяні засічки; звідси англійська назва didone.
- Брускова (єгипетська, slab serif)
- Шрифт із товстими прямокутними засічками, створений для плакатів і реклами в Англії близько 1815–1820 років. Назва «єгипетська» відбиває моду епохи після Єгипетського походу Наполеона, а не зв’язок із Єгиптом. Сучасні брускові шрифти (наприклад Rockwell, Roboto Slab) добре тримаються на екрані.
- Гротеск, неогротеск, гуманістичні та геометричні беззасічкові
- Перші гротески були рекламними шрифтами XIX століття. Akzidenz-Grotesk (Берлін, 1896–1898) започаткував неогротески: Helvetica з’явилася 1957 року як Neue Haas Grotesk (Макс Мідінгер, Едуард Гоффманн). Геометричні (Futura, Пауль Реннер, 1927) будують літери з кола та прямої; гуманістичні (Gill Sans 1928, Frutiger 1976) зберігають пропорції антикви й найкраще читаються в тексті.
- Класифікація Vox-ATypI
- Система класифікації шрифтів, яку запропонував Максимільєн Вокс 1954 року і яку ATypI ухвалила 1962 року: гуманістичні, гаральди, перехідні, дідони, механістичні (брускові), лінійні (беззасічкові), різьблені, рукописні, мальовані від руки, ламані (готичні). 2021 року ATypI відмовилася від неї як недостатньої для сучасних шрифтів, але назви досі в ужитку.
- Курсив і похиле накреслення
- Курсив (italic) запровадив 1501 року венеційський друкар Альд Мануцій разом із гравером Франческо Ґріффо, взявши за зразок канцелярське письмо; курсив мав умістити більше тексту в кишенькових виданнях. Похиле накреслення (oblique) є лише механічно нахиленою антиквою; справжній курсив має власні, відмінні форми літер (a, f, g).
- Великі літери, малі літери, капітель
- Великі літери (маюскул) походять від римського капітального письма, малі від каролінзького мінускула (VIII–IX ст.). Англійські uppercase та lowercase буквально означають верхню й нижню касу: у друкарнях великі літери лежали у верхній шухляді, малі в нижній. Капітеллю називають великі літери, зменшені до висоти малих; її вживають у скороченнях і підзаголовках.
- Лігатура
- Два або більше знаків, поєднаних в один гліф, наприклад fi, fl, ffl, щоб крапка над i не стикалася з верхівкою f. Знак & є лігатурою латинського «et». У шрифтах OpenType лігатури вмикає функція liga; у CSS їй відповідає font-variant-ligatures.
- Кернінг і трекінг
- Кернінг коригує відстань між конкретною парою літер (AV, To, Wa), а трекінг рівномірно змінює відстані в усьому тексті. Слово kern походить з епохи металевого набору: так називали частину літери, що виступала за межі ніжки й нависала над сусідньою. Трекінг застосовують обережно: великі додатні значення розривають слова, від’ємні склеюють літери.
- Вирівнювання по ширині та по лівому краю
- Вирівнювання по ширині (по обох краях) вимагає переносів і контролю пробілів, інакше в наборі з’являються «коридори» білого простору. Вирівнювання по лівому краю (флаговий набір) зберігає однакові пробіли й природний ритм; добрий флаговий набір має м’яко різні закінчення рядків, без сходинок і без самотніх коротких слів.
- Сироти, вдови, висячі рядки
- Польські правила набору: «сиротою» там називають однолітерний сполучник або прийменник (i, w, z, a), залишений наприкінці рядка; його переносять нерозривним пробілом. «Вдовою» називають останній рядок абзацу на початку нової колонки чи сторінки, «бастардом» (bękart) перший рядок абзацу в її кінці. В українській термінології обидва випадки називають висячими рядками (вдовиний і сирітський рядок), а однолітерні прийменники та сполучники (в, у, з, і, й, а) так само не лишають наприкінці рядка. Програми DTP стежать за цим у налаштуваннях абзацу.
- Дефіс, коротке тире, довге тире
- Три різні знаки: дефіс (-) з’єднує та розділяє слова; коротке тире (–, завширшки з n) позначає діапазони (45–75) і в польській практиці часто заміняє тире в реченні; довге тире (—, завширшки з m) є класичним тире книжкового набору. В українському наборі роль тире в реченні традиційно виконує довге тире (—) з пробілами обабіч, а коротке (–) лишають для діапазонів. Назви em та en походять від ширини літер M і N у даному кеглі.
- Лапки
- Польські лапки мають вигляд „нижні й верхні” (99-66), для цитати в цитаті «французькі». Англійські “66-99” стоять угорі, німецькі „99-66“ схожі на польські, але з іншим закриттям. В українському наборі основні лапки «кутові» (ялинки), а для цитати в цитаті „лапки“. Прямий знак " із клавіатури є машинописними лапками; у наборі його замінюють друкарськими.
- Рухомі літери та Ґутенберг
- Близько 1450 року в Майнці Йоганн Ґутенберг поєднав металеві літери, відлиті з матриць, друкарський прес та олійну фарбу; його 42-рядкова Біблія (бл. 1455) є першою великою друкованою книгою Європи. Рухомі літери були відомі раніше: керамічні в Китаї (Бі Шен, бл. 1040) та металеві в Кореї (Чикчі, 1377, найстаріша збережена книга, надрукована металевими літерами).
- Lorem ipsum і панграми
- Lorem ipsum є текстом-заповнювачем, складеним зі спотвореного уривка трактату Цицерона «De finibus bonorum et malorum» (45 р. до н. е.); його популяризували аркуші Letraset у 1960-х і програма PageMaker (1985). Панграмою називають речення з усіма літерами абетки: польська «Zażółć gęślą jaźń» містить повний комплект дев’яти польських діакритичних знаків, а українська «Щастям б’єш жук їх глицю в фон й ґедзь пріч» охоплює всі 33 літери української абетки.
- Польські діакритичні знаки
- Огонек (ą, ę), акут (ć, ń, ó, ś, ź), крапка (ż) та перекреслення (ł). Гарнітура для польського набору мусить мати їх спроєктованими, а не доклеєними автоматично: огонек має виростати з літери, а акут мати нахил, властивий гарнітурі. У таблицях знаків це позиції блоку Unicode Latin Extended-A (1991, Unicode 1.0). Українському читачеві варто так само перевіряти у шрифті літери ґ, є, і, ї та апостроф ’ (U+2019): вони мають бути намальовані, а не зібрані з частин.
- Шрифт на екрані
- Екран малює літери пікселями, тому в малих кеглях важливі гінтинг (припасування контурів до піксельної сітки) та згладжування. Прийняті мінімуми: 16 px для суцільного тексту, 12 px для підписів. Формат WOFF2 (W3C, 2018) стискає вебшрифти, а властивість font-display визначає, що видно, доки шрифт не завантажиться.
- Ліцензії на шрифти
- Шрифт одночасно є комп’ютерною програмою і твором, тому підлягає ліцензуванню. SIL Open Font License (2005, версія 1.1 від 2007) дозволяє використовувати, вбудовувати й поширювати шрифт, забороняє продавати його окремо та резервує назви для змінених версій; Apache 2.0 подібно ліберальна. Комерційні шрифти мають окремі ліцензії на друк, веб, застосунки та вбудовування в PDF.
- Оптичні розміри та текстові накреслення
- Та сама гарнітура у 8 pt і 72 pt не повинна виглядати однаково: малі кеглі потребують більшої висоти малих літер, вільніших відстаней і міцніших штрихів, великі можуть бути тонкими й щільними. Колись кожен кегль різали окремо; сьогодні це робить вісь opsz варіативних шрифтів або окремі накреслення Text і Display.