Главная/Руководство по типографике
// type_guide_v3.1

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

Систематическое справочное руководство: от анатомии глифа до построения типографических систем в цифровых продуктах. Обновлено в 2025 году.

Глава I

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

Понимание структурных элементов глифа — основа профессиональной работы со шрифтами. Каждый элемент несёт функциональную и эстетическую нагрузку.

Детальная схема анатомии буквы из шрифта антиква с пронумерованными элементами: засечки, апертуры, счётчики, ось наклона, высота заглавных, высота строчных и базовая линия // glyph_anatomy_diagram
Baseline

Базовая линия — воображаемая горизонталь, на которой «стоят» строчные знаки.

X-height

Высота строчных букв без выносных элементов. Определяет оптическую «крупность» шрифта и удобочитаемость мелкого кегля.

Cap height

Высота прописных букв. Как правило, ниже аscender height для оптического баланса.

Засечки (Serifs)

Поперечные штрихи, завершающие основные штрихи буквы. По форме засечек различают группы шрифтов (антиквы, египетские и др.).

Апертура

Открытость контрформ в буквах с незамкнутыми петлями: e, c, s, a. Большая апертура → выше читаемость при мелком кегле.

Счётчик

Замкнутое или частично замкнутое белое пространство внутри буквы (o, p, q, b). Размер счётчика влияет на воздушность и читаемость шрифта.

Глава II

Кёрнинг, трекинг и лидинг

Три инструмента управления пространством в типографике, без понимания которых невозможна точная работа с текстом.

// kern
◈

Кёрнинг

Корректировка пространства между конкретными парами символов. Все профессиональные шрифты содержат таблицы кёрнинга — тысячи предустановленных значений для проблемных пар (AV, To, WA). В CSS управляется через font-kerning: auto.

Ручной кёрнинг необходим в логотипах, крупных заголовках и всех случаях, где автоматические пары дают видимые промахи.

// track
⊞

Трекинг

Равномерное изменение пространства между всеми символами. Увеличенный трекинг применяется для заглавных надписей и подписей — добавляет воздуха и официальности. Для строчного основного текста трекинг должен быть нейтральным (0) или минимально отрицательным.

Правило: чем крупнее шрифт → тем меньше трекинг; чем мельче → тем больше трекинг для сохранения читаемости.

// lead
◫

Лидинг (Leading)

Межстрочный интервал — расстояние от базовой линии одной строки до базовой линии следующей. Название происходит от свинцовых полос, которыми наборщики разделяли строки. В CSS — свойство line-height.

Оптимальные значения: 1.4–1.6 для основного текста, 1.0–1.2 для крупных заголовков. Длинные строки требуют большего лидинга.

Глава III

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

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

Классические шкалы основаны на музыкальных интервалах: Perfect Fourth (4:3 = 1.333), Major Third (5:4 = 1.25), Minor Third (6:5 = 1.2), Augmented Fourth / Tritone (√2 ≈ 1.414).

// perfect_fourth_scale / base: 16px
H1
56.8px / 3.55rem
H2
42.6px / 2.66rem
H3
32px / 2rem
H4
24px / 1.5rem
Body
16px / 1rem
Caption
12px / 0.75rem

Fluid Typography с CSS clamp()

Функция clamp() позволяет задавать типографическую шкалу, которая плавно масштабируется между минимальным и максимальным значениями в зависимости от ширины вьюпорта:

/* Заголовок H1: 2rem на 320px → 4rem на 1280px */
h1 {
font-size: clamp(
2rem,
1rem + 2.5vw,
4rem
);
}

Инструмент для генерации fluid clamp значений: utopia.fyi — задаёте минимальный и максимальный вьюпорт и шрифтовую шкалу, получаете готовые CSS-переменные.

Продолжить

Следующие шаги

◈

Принципы дизайна

Углублённое руководство по визуальной иерархии, контрасту и ритму в типографическом дизайне.

Изучить →
⊞

Ресурсы

Подборка книг, инструментов и платформ для профессиональной работы со шрифтами.

Перейти →
◫

FAQ

Ответы на самые распространённые вопросы о типографике — от базовых до профессиональных.

Смотреть →
↑