Правила типографики: полное руководство по шрифтам и оформлению текста

Что такое типографика и зачем она нужна

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

Роберт Брингхёрст, автор книги «Основы стиля в типографике», сравнивает работу типографа с упаковкой товара: хорошая упаковка дополняет продукт, не перетягивая внимание на себя. Именно поэтому юридические документы традиционно набирают антиквой — шрифтом с засечками, ассоциирующимся с надёжностью, а детские книги — гротесками с крупным, открытым рисунком знаков.

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

Краткая история: как типографика стала языком дизайна

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

От Гутенберга до Variable Fonts: хронология в 6 точках

1440: Иоганн Гутенберг создаёт наборный текст с подвижными литерами. Шрифт Textura копировал почерк монастырских писцов — конец монополии церкви на книгопроизводство.

XV в.: Альд Мануций (Венеция) вводит курсив и точку с запятой — книга стала карманной, текст сжатым.

XVI в.: Клод Гарамон создаёт антикву Garamond, которую верстают уже пять веков. Гарнитура в дизайне той эпохи задала стандарт читабельного книжного набора.

1919–1933: Школа Баухаус формулирует функционализм. Герберт Байер разрабатывает Universal — шрифт без заглавных, предельно рациональный.

1984: Apple и PostScript дают масштабируемые шрифты без потери качества — кегель в шрифте перестаёт зависеть от физического размера литеры.

Сегодня: Variable Fonts (переменные шрифты) — один файл вместо десятков начертаний; все варианты насыщенности, ширины и наклона в одном файле.

Словарь типографики: ключевые термины

Прежде всего — разграничим базовые понятия. Гарнитура — это концепция и семейство знаков (например, Helvetica), а шрифт — конкретный файл с заданными параметрами (Helvetica Bold 12pt). Одна гарнитура включает начертания: Light, Regular, Bold, Italic, Condensed, Extended. Глиф — визуальное представление одного символа; капитель — прописные буквы, совпадающие по высоте со строчными.

Кегль, интерлиньяж, кернинг, трекинг: конкретные числа

Размер шрифта измеряется в пунктах: 1 пт = 1/72 дюйма — стандарт полиграфии. В чём измеряется шрифт в вебе — в пикселях (px). Стандарт основного текста на экране: 16px; в печати — 10–12pt.

Интерлиньяж по формуле Брингхёрста: коэффициент 1.2–1.5 от кегля. При кегле 16px оптимальный межстрочный интервал — 19–23px, то есть 120–145% от кегля. Для крупных заголовков коэффициент снижается до 1.0–1.1, для мелкого текста — увеличивается до 1.5–2.0.

Кернинг правит конкретные пары знаков (AV, Ta, Wa) — это ручная работа, особенно в логотипах и заголовках. Трекинг действует иначе: равномерно по всему тексту. В заголовках часто применяют отрицательный трекинг (буквы ближе), в мелком тексте — положительный.

Семь базовых принципов типографики

Базовые правила типографики в дизайне сводятся к семи принципам. Они работают только в комплексе: иерархия без контраста слабее вдвое.

1. Иерархия. H1 = 2–2.5× от основного кегля; H2 = 1.5–1.8×; сноски = 0.8–0.9×. Размер сообщает читателю, что важно, а что второстепенно.
2. Контраст. Антиква в основном тексте + гротеск в заголовках — классический приём. Контраст создаёт напряжение и направляет взгляд.
3. Выравнивание. Для кириллицы стандарт — левый край. Выравнивание по ширине требует аккуратной настройки переносов, иначе появляются «реки» — цепочки пробелов внутри строк.
4. Близость. Заголовок располагается ближе к своему абзацу, чем к предыдущему блоку. Иначе структура рассыпается.
5. Повторение. Все H2 — одного стиля, все цитаты — одного формата. Нарушение повторения создаёт визуальный хаос.
6. Ритм. Чередование абзацев, списков, цитат и подзаголовков даёт тексту дыхание.
7. Белое пространство. Пустота — активный элемент, а не пробел. Поля, отступы и интервалы дают содержанию место для восприятия.

Технические нормы: интервалы и переносы

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

Межбуквенный интервал, интерлиньяж и правила переноса

Межбуквенный интервал (трекинг) для гротесков — 0.1–0.2 от кегля (при 30px шрифта → 3px интервала); для антиквы — 0.2–0.3. Больший интервал у антиквы компенсирует визуальную плотность засечек.

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

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

Типографика в веб-дизайне: платформы и шрифты

Правила типографики в веб-дизайне опираются на три типа шрифтов. Системные (Arial, Segoe UI) — быстро подгружаются, но выбор ограничен. Веб-шрифты через Google Fonts и Adobe Fonts дают гибкость и эстетику, но требуют дополнительного HTTP-запроса. Variable Fonts — оптимальный вариант: один файл содержит все начертания гарнитуры. Material Design и Human Interface Guidelines (HIG) задают платформенные стандарты соответственно для Android и iOS.

Как выбрать шрифт: критерии и таблица гарнитур

Правила типографики при выборе шрифтов строятся на двух базовых принципах: антиква (шрифт с засечками) — для длинного печатного текста, гротеск — для экранов и интерфейсов. Засечки направляют взгляд вдоль строки и помогают при чтении больших объёмов; гротески читаются чётче на низком разрешении экрана.

Каким шрифтом печатают книги — как правило, антиквой: Garamond, Palatino, Times New Roman. Начертание символов определяет восприятие не меньше, чем сам кегль.

Правило трёх: не более трёх гарнитур в одном проекте, иначе внимание читателя рассеивается, а проект теряет стилистическую целостность.

Правила русской типографики: тире, кавычки и пробелы

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

Строчные (маленькие) и прописные (заглавные) буквы используются по правилам орфографии: заглавные и строчные буквы расставляются по правилам — прописные начинают предложение, имена собственные и аббревиатуры. В заголовках злоупотребление ПРОПИСНЫМИ замедляет чтение: сплошной заглавный регистр воспринимается медленнее строчного.

Правила типографики применяются везде, где есть текст: веб, печать, интерфейсы, упаковка. Освоить современные инструменты — оформление текста, работу со шрифтами, основы веб-дизайна — можно в рамках программ дополнительного профессионального образования. В федеральном проекте «Активные меры содействия занятости» доступны курсы «Графика и веб-дизайн: от идеи до реализации» и «Веб-графика: создание дизайна в графических редакторах» — онлайн, с нуля, без отрыва от основной занятости. Смотрите каталог доступных программ.

Часто задаваемые вопросы

Что такое типографика простыми словами?

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

Чем гарнитура отличается от шрифта?

Гарнитура — семейство знаков с единым дизайном (например, Helvetica). Шрифт — конкретный файл с заданными параметрами: Helvetica Bold 12pt. Одна гарнитура включает десятки шрифтов разных начертаний.

В чём измеряется размер шрифта?

В полиграфии размер шрифта измеряется в пунктах: 1 пт = 1/72 дюйма. Для веба единица — пиксели (px). Стандарт основного текста на экране: 16px; в печати — 10–12pt.

Что такое интерлиньяж и как его рассчитать?

Интерлиньяж — расстояние между базовыми линиями строк. Оптимум: 120–145% от кегля. При кегле 16px — 19–23px. По формуле Брингхёрста: коэффициент 1.2–1.5 в зависимости от размера шрифта.

Сколько шрифтов использовать в одном дизайне?

Не более трёх гарнитур. Больше — внимание рассеивается, проект теряет целостность. Все гарнитуры должны быть стилистически связаны: например, антиква в тексте + гротеск в заголовках.

Чем тире отличается от дефиса?

Длинное тире (—) — знак пунктуации между частями предложения (Alt+0151 в Windows). Дефис (-) — служебный знак: сложные слова и переносы. Использовать дефис вместо тире — одна из самых частых ошибок в русских текстах.

Какие правила типографики применяются в веб-дизайне?

Основные: кегль 16px для основного текста, интерлиньяж 1.5–1.6, длина строки не более 70 знаков на десктопе. Variable Fonts (переменные шрифты) заменяют несколько файлов одним и ускоряют загрузку страницы.

Где изучить типографику: книги и материалы

Пять ключевых источников: Роберт Брингхёрст «Основы стиля в типографике» (изд. Дмитрий Аронов), Эрик Шпикерман «О шрифте», Эмиль Рудер «Типографика. Руководство по мастерству», Ян Чихольд «Новая типографика», материалы и лекции Владимира Ефимова по кириллическому шрифту.