Профессиональная типографика — это система правил и принципов, выработанных пятью веками практики. Понимание этих принципов позволяет не просто набирать текст, а создавать визуальную коммуникацию, которая направляет взгляд читателя, передаёт иерархию информации и формирует эмоциональную реакцию.
1. Визуальная иерархия
Визуальная иерархия — это организация типографических элементов таким образом, чтобы читатель немедленно понимал, что важнее, что второстепенно, а что является вспомогательным. Без иерархии текст превращается в однородную массу, требующую сознательных усилий для навигации.
Иерархия создаётся через комбинацию размера, веса, цвета, начертания и позиции. Для заголовков используется крупный кегль и жирное начертание, для подзаголовков — средний кегль, для основного текста — стандартный кегль, для подписей и мета-информации — уменьшенный кегль в более светлом цвете.
Классическая схема иерархии включает минимум четыре уровня: основной заголовок (H1), заголовки разделов (H2–H3), основной текст и вспомогательный текст. На практике мастера типографики используют до семи–восьми уровней, тщательно выверяя отношения между каждым из них.
Правило иерархии
Если два типографических уровня визуально неотличимы, один из них лишний. Каждый уровень иерархии должен однозначно считываться без дополнительного контекста.
2. Типографическая шкала и пропорции
Выбор размеров кегля не должен быть произвольным. Профессионалы используют математически выверенные шкалы, основанные на геометрических прогрессиях. Классические шкалы: Perfect Fourth (отношение 4:3), Perfect Fifth (3:2), Golden Ratio (1:1.618).
Модульная шкала (Modular Scale) Тима Брауна и Роберта Бринхёрста — наиболее систематизированный современный подход. Выбирается базовый кегль (обычно 16–18px для веба) и множитель. Все кегли в системе являются результатом умножения базового значения на выбранную пропорцию.
Пример шкалы на основе Golden Ratio с базой 18px: 11.1 — 18 — 29.1 — 47.1 — 76.3px. Каждый следующий размер примерно в 1.618 раза больше предыдущего.
3. Длина строки (Measure)
Оптимальная длина строки — один из важнейших, но часто игнорируемых параметров типографики. Исследования читаемости последовательно показывают, что оптимальный диапазон составляет 45–75 символов на строку (или примерно 7–10 слов среднего размера).
Слишком короткая строка (менее 40 символов) заставляет глаза совершать частые возвраты, нарушая ритм чтения. Слишком длинная строка (более 85–90 символов) создаёт трудности при поиске начала следующей строки, вызывая эффект «потери места» при переносе взгляда.
Удобное практическое правило: ширина текстовой колонки должна равняться удвоенному алфавиту строчных букв используемой гарнитуры. Для большинства гарнитур это соответствует 60–70 символам.
4. Интерлиньяж (Leading)
Интерлиньяж — вертикальное расстояние между базовыми линиями соседних строк — является, пожалуй, наиболее чувствительным параметром читаемости. Его историческое название происходит от тонких свинцовых полосок (lead strips), которые наборщики вставляли между строками для увеличения межстрочного интервала.
Для основного текстового набора оптимальный интерлиньяж составляет 120–145% от кегля. При кегле 16px это соответствует 19–23px. Для заголовков рекомендуется более плотный интерлиньяж — 100–115%, поскольку их читают иначе, чем сплошной текст.
На интерлиньяж влияют ширина строки, гарнитура, целевая аудитория и среда (экран vs. бумага). Текст на экране требует большего интерлиньяжа, чем в печати, поскольку экранный рендеринг менее чёток. Длинные строки требуют большего интерлиньяжа для облегчения возврата взгляда.
5. Контраст и цвет текста
Контраст в типографике реализуется на двух уровнях: контраст внутри гарнитуры (соотношение толщин основных и соединительных штрихов) и контраст между текстом и фоном.
Коэффициент контрастности для основного текста по стандарту WCAG 2.1 AA должен составлять не менее 4.5:1 для обычного текста и 3:1 для крупного текста (18px+ или 14px+ жирный). Для стандарта AAA — 7:1 и 4.5:1 соответственно.
Тёмно-серый текст (#2C2C2C) на светло-кремовом фоне (#F5F2EC), используемый на этом сайте, обеспечивает коэффициент контраста около 10:1 — значительно выше минимальных требований. Это один из наиболее комфортных для длительного чтения вариантов — мягче, чем чёрный на белом, но с достаточным контрастом.
6. Выравнивание и модульная сетка
Принципы выравнивания и сетки — философская основа профессиональной типографики. Выравнивание может быть левосторонним (рэгд-райт), правосторонним, центрированным или блочным (justify). Каждый тип несёт свою функцию и коннотации.
Левостороннее выравнивание — универсальный выбор для длинных текстов, сохраняющий равномерные межсловные пробелы. Блочное выравнивание создаёт формальный, академический тон, но требует тщательной работы с расстановкой переносов, иначе возникают «реки» (вертикальные зазоры) в тексте.
Базовая сетка (baseline grid) — система горизонтальных линий, отстоящих друг от друга на величину интерлиньяжа. Все типографические элементы «прибиваются» к этой сетке, создавая единый вертикальный ритм во всём макете.
7. Негативное пространство как инструмент
Негативное пространство (whitespace) — то, чего нет на странице, — настолько же важно, как и то, что есть. Мастерское использование пространства между символами, словами, строками и блоками создаёт «дыхание» в тексте, выявляет структуру и направляет взгляд.
Поля (margins) выполняют несколько функций: обеспечивают психологический комфорт при чтении, предотвращают зрительное слияние текста с краем страницы и создают резерв для заметок. Классические пропорции полей Яна Чихольда основаны на соотношениях, близких к золотому сечению.
Паддинги, марджины и gap между элементами должны быть кратны базовому значению (обычно 4px или 8px в веб-дизайне). Это создаёт внутреннюю ритмическую консистентность во всей системе.
8. Психология чтения и когнитивная нагрузка
Понимание механизмов чтения позволяет принимать более обоснованные типографические решения. Глаз не движется по тексту плавно — он совершает серию саккад (быстрых скачков) и фиксаций (кратких остановок). За одну фиксацию воспринимается группа из 7–9 букв вокруг точки фиксации.
Узнавание слов в большой степени определяется их «словесной формой» — общим контуром слова, создаваемым подъёмами и опусканиями букв. Именно поэтому написание ВСЕГО ТЕКСТА ЗАГЛАВНЫМИ БУКВАМИ снижает скорость чтения: все слова принимают форму прямоугольника, теряя индивидуальную форму.