Типографіка: добір кегля, інтерліньяжу та шрифтів для друку й екрана

Задайте кегль тексту, пропорцію шкали, базову сітку та ширину колонки, оберіть шрифти, і Ви отримаєте повну ієрархію (від підпису до 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.

    Потрібна верстка видання, айдентика або сайт із продуманою типографікою? Ми спроєктуємо