Справочник

Практическое руководство
по типографике

Полный справочник по принципам набора, кернингу, трекингу, интерлиньяжу и построению типографической системы. Для профессионалов и тех, кто хочет ими стать.

Анатомия Кернинг Интерлиньяж Иерархия Выравнивание Масштаб Образцы
Раздел I

Анатомия шрифта

Профессиональный разговор о типографике требует общего терминологического языка. Знание анатомии шрифта — это не педантизм, а инструмент точной коммуникации между дизайнерами, типографами и заказчиками.

Апрош (sidebearing) — пространство слева и справа от основного контура буквы, вшитое в метрику шрифта. Сумма левого апроша буквы A и правого апроша буквы V даёт базовое расстояние между ними.

Аsцендер (ascender) — часть строчной буквы, выходящая выше линии верхнего края строчной x-height. Характерна для букв b, d, f, h, k, l.

Десцендер (descender) — часть строчной буквы, опускающаяся ниже базовой линии. Характерна для g, j, p, q, y.

Шрифтовая линия (baseline) — невидимая линия, на которой «стоят» строчные буквы. Базовая линия — один из важнейших ориентиров при построении типографической сетки.

X-height — высота строчной буквы «x» (и большинства строчных без асцендеров и десцендеров). Один из ключевых параметров, влияющих на воспринимаемый размер шрифта и его читаемость при малых кеглях.

Контрштрих (counter) — замкнутое или полузамкнутое белое пространство внутри буквы: внутри «о», «b», «p», «q», «d». Ширина и форма контрштриха существенно влияют на читаемость при малых размерах.

Засечки (serifs) — поперечные штрихи на концах основных штрихов букв. Их форма, угол и толщина — главный критерий классификации серифных гарнитур.

Детальная схема анатомии типографской буквы с обозначениями всех элементов: базовая линия, засечки, контрштрих, апрош, x-height

Анатомические элементы шрифта на примере буквы «g» в Garamond Premier Pro.

Раздел II

Кернинг, трекинг и апрош

Кернинг — корректировка межбуквенного расстояния в конкретных парах символов. Шрифт содержит встроенные таблицы кернинга для нескольких сотен или тысяч пар; дизайнер может дополнительно корректировать кернинг вручную — особенно в крупных заголовках, где автоматические значения нередко недостаточны.

Наиболее «проблемные» пары в латинском алфавите: AV, AW, AT, LT, LY, VA, WA, WO, Te, Ty. Диагональные грани создают оптически избыточные пробелы, требующие компенсации. В кириллице аналогичную роль играют пары: ДА, ДЯ, ЛА, ЛЯ, ТА, ТО, ТУ, ФА.

Трекинг (tracking) — равномерное изменение межбуквенного расстояния для всего выбранного текста или его фрагмента. Используется для оптической коррекции: крупные заголовки, как правило, требуют уменьшенного трекинга (буквы «ближе»), строчные капители и аббревиатуры — увеличенного («воздушного») трекинга.

Практическое правило: никогда не используйте положительный трекинг для основного текста нормального кегля — это нарушает ритм строки и ухудшает читаемость. Исключение — декоративные заголовки с разрежённым письмом и строчные капители (small caps), для которых умеренный трекинг обязателен.

ЭлементРекомендацияПримечание
Основной текстТрекинг 0–5Не трогать без явной нужды
Заголовки крупныеТрекинг −10 — −30Зависит от гарнитуры
КАПИТЕЛЬ (All Caps)Трекинг +50–+120Обязательно разреживать
Small CapsТрекинг +30–+80Улучшает читаемость
Eyebrow / CaptionТрекинг +100–+200Для мелкого декоративного
AV

Оптический кернинг

Сравните расстояние между «A» и «V» с метрическим кернингом и оптическим. Оптический режим компенсирует диагональные грани, создавая визуальное равновесие пространства.

ABC

Трекинг в капители

Строчные в режиме All Caps всегда требуют положительного трекинга: +80–150 единиц в зависимости от гарнитуры и кегля.

Раздел III

Интерлиньяж: вертикальный ритм

Интерлиньяж (leading) — расстояние от базовой линии одной строки до базовой линии следующей. Термин происходит от свинцовых полос (leads), которые металлические наборщики вставляли между строками для увеличения интервала. В цифровом программном обеспечении интерлиньяж обычно задаётся в пунктах или как множитель от кегля.

1.2×

Тесный

100–120% от кегля. Подходит для крупных заголовков с небольшим количеством строк. Создаёт плотный визуальный блок. Неприемлем для основного текста.

1.5×

Оптимальный

140–165% от кегля. Универсальный стандарт для основного текста. Обеспечивает комфортное чтение без ощущения разорванности строк.

1.8×

Воздушный

170–200% от кегля. Используется в luxury-изданиях, в коротких блоках текста, в UI-интерфейсах. Усиливает ощущение элегантности и пространства.

Вертикальный ритм — согласование интерлиньяжей всех элементов страницы по единой базовой сетке. Если базовый интерлиньяж текста равен 28px, то все отступы — между заголовком и абзацем, между блоками, высоты изображений — должны быть кратны 28px или 14px. Это создаёт невидимую, но ощутимую гармонию вёрстки.

Раздел IV

Типографическая иерархия

Типографическая иерархия — организация элементов текста по степени важности, реализованная через визуальные средства. Чёткая иерархия позволяет читателю мгновенно понять структуру материала и выбрать точку входа в текст: заголовок, подзаголовок, лид, основной текст.

Стандартная редакционная система включает пять уровней:

  1. Заголовок первого уровня (H1) — самый крупный элемент страницы, уникальный для каждого материала. Гарнитура: display serif. Кегль: 2.4–4.2rem.
  2. Подзаголовки (H2, H3) — структурные маяки внутри текста. Меньше H1, но отчётливо крупнее основного текста. Та же гарнитура или созвучная.
  3. Лид-абзац — введение, выделенное курсивом или увеличенным кеглем. Создаёт мост между заголовком и основным текстом.
  4. Основной текст — наиболее нейтральный уровень. Текстовая гарнитура оптимального кегля (16–18px для экрана).
  5. Метаданные и подписи — кегль меньше основного, часто в гротеске или с увеличенным трекингом. Подписи к иллюстрациям, даты, теги.

Правило минимализма

Используйте не более двух гарнитур и трёх-четырёх уровней иерархии. Больше — не выразительнее, а хаотичнее.

Рекомендуемые кегли

ЭлементЭкран
H136–64px
H228–40px
H322–28px
Лид20–24px
Текст16–18px
Подпись12–14px
Раздел V

Выравнивание и длина строки

Типы выравнивания

По левому краю (flush left) — самый читаемый вариант для большинства контекстов. Равномерные межслоговые пробелы, предсказуемое начало строки. Стандарт для веб-контента.

По ширине (justified) — создаёт плотный организованный блок; традиционен для книг и газет. Требует качественного переноса слов: без него возникают «реки» — цепочки пробелов, пересекающие абзац по вертикали.

По центру — подходит для заголовков, кратких подписей, декоративных блоков. Разрушает читаемость длинных текстов: непредсказуемое начало строки заставляет взгляд каждый раз искать старт.

По правому краю (flush right) — используется ограниченно: для подписей к иллюстрациям, в двуколоночных макетах для контраста, в дизайне RTL-языков.

Оптимальная длина строки

Исследования читаемости устойчиво указывают на оптимальный диапазон: 45–75 символов (включая пробелы) на строку для основного текста. Это соответствует примерно 8–12 словам средней длины.

Слишком короткие строки (менее 35 знаков) заставляют взгляд слишком часто переходить на следующую строку. Слишком длинные (более 90 знаков) — теряет нить и промахивается мимо начала следующей строки.

Для многоколонного набора ширина колонки, как правило, рассчитывается так, чтобы вместить 45–65 символов при стандартном кегле текста.

45–75

Символов на строку — оптимальный диапазон для основного текста по результатам исследований читаемости Bringhurst, Hochuli и Spencer.

Раздел VI

Типографический масштаб

Математически обоснованные соотношения кеглей создают гармоничную и согласованную визуальную систему.

1.25×

Большая терция

Мягкое, плавное соотношение. Подходит для изданий с большим количеством текста, где нужна умеренная иерархия без резких контрастов.

1.414×

Корень из двух

Соотношение формата A4. Создаёт чёткую, уверенную иерархию. Универсальный выбор для редакционного дизайна.

1.618×

Золотое сечение

Выразительный контраст между уровнями. Подходит для display-ориентированных систем: постеры, обложки, рекламные макеты.

Раздел VII

Образцы шрифтов Calvoro

Типографическая система сайта построена на трёх взаимодополняющих гарнитурах.

Playfair Display — Заголовочная гарнитура
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Разработана Клаусом Эгберсом Лынгбю в 2011 году. Высококонтрастная транзиционная антиква, вдохновлённая гарнитурами эпохи Просвещения. Идеальна для крупных кеглей — заголовков, цитат, логотипов.
Regular
Medium
Bold
Black
Italic
Cormorant Garamond — Текстовая гарнитура
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Цифровой revival классической гарнитуры Клода Гарамона (XVI в.), созданный Кристианом Таненберг. Элегантная гуманистическая антиква с изысканным курсивом. Оптимальна для длинных редакционных текстов при кегле от 14pt.
Light
Regular
Medium
SemiBold
Italic
Libre Baskerville — Акцентная гарнитура
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Веб-адаптация классической Baskerville, разработанная Impallari Type для Google Fonts. Высокий x-height и усиленные штрихи делают её прекрасно читаемой на экранах любых размеров. Используется для UI-элементов, подписей и навигации.
Regular
Bold
Italic
Классификация шрифтов Глоссарий