Типографика для начинающих: как сочетать шрифты и выстроить иерархию

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

Типографика — это не просто выбор красивого шрифта

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

Поэтому вопрос «какие два шрифта сочетать» возникает слишком рано. Сначала нужно понять содержание, носитель, язык, роли текста и условия чтения.

Шаг 1. Назначьте текстовые роли

Выпишите все типы текста до оформления. Для простой страницы или афиши обычно хватает четырёх-пяти ролей.

Роль	Задача	Что должно отличаться
Заголовок	Сообщить главный смысл	Размер и насыщенность
Подзаголовок	Уточнить обещание	Меньший размер, спокойнее контраст
Основной текст	Передать содержание	Удобная строка и устойчивый ритм
Подпись	Дать контекст	Компактность без потери читаемости
Акцент	Выделить действие или термин	Один повторяемый приём

Если две роли выглядят почти одинаково, объедините их. Если одна роль оформляется каждый раз по-разному, система распадается.

Одна гарнитура или шрифтовая пара

Начните с одного семейства. Regular подойдёт для основного текста, Medium или Semibold — для заголовков, Italic — для редких смысловых выделений. В словаре Google Fonts гарнитура определяется как дизайн набора связанных шрифтов: это родство и помогает сохранять согласованность.

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

Как проверить шрифт до начала работы

• Кириллица: проверьте не только название шрифта, а реальный русский абзац.
• Символы: введите цифры, знак рубля ₽, кавычки «», длинное тире —, №, знаки процента и валют.
• Начертания: убедитесь, что нужные веса существуют, а не синтезируются программой.
• Лицензия: проверьте, разрешено ли коммерческое использование, публикация в вебе или передача исходников.
• Носитель: оцените шрифт в реальном размере на телефоне, экране или пробной печати.

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

Как выстроить типографическую иерархию

Используйте минимальное число параметров. Сначала размер, затем насыщенность, затем пространство. Цвет и верхний регистр оставьте для отдельных задач. В Material Design типографические стили также получают устойчивые роли, а не случайные размеры на каждом экране.

Проблема	Слабое решение	Рабочее решение
Заголовок не виден	Добавить тень и яркий цвет	Увеличить масштаб и отделить пространством
Подпись путается с текстом	Сделать её очень светлой	Уменьшить размер умеренно и сохранить контраст
Много уровней	Для каждого выбрать новый шрифт	Сократить роли и повторять одну шкалу

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

Настройте строку, интервалы и выравнивание

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

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

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

Проверяйте три уровня расстояний: между строками, между абзацами и между смысловыми блоками. Отступ между разными группами должен быть заметно больше, чем внутри одной группы. Для длинного текста обычно надёжнее выравнивание по левому краю; выключка по ширине требует внимательной работы с переносами и пробелами.

Связь размера, веса, интервалов и пространства с визуальной иерархией подробно разбирается в руководстве Interaction Design Foundation.

Три типовых разбора до и после

1. Одна гарнитура. Было: заголовок, текст и подпись одного размера. Стало: заголовок крупнее и насыщеннее, подпись компактнее, между ролями появились устойчивые интервалы.
2. Контрастная пара. Было: два похожих гротеска, различие незаметно. Стало: основной текст остался нейтральным, а второй шрифт используется только в крупных заголовках.
3. Декоративный конфликт. Было: рукописный заголовок, фигурный подзаголовок и ещё один шрифт в кнопке. Стало: один характерный акцент и спокойная система для всего остального.

Показывая такой разбор в дизайн-кейсе, объясняйте не только выбранные гарнитуры, но и роли, ограничения носителя и результат проверки.

Где применять систему

Одни и те же принципы работают в интерфейсе, плакате и публикации, но параметры меняются. На слайде текст читают с расстояния, поэтому полезна отдельная проверка типографики в презентации. В длинной статье важнее ритм абзацев и длина строки, а в карточке — ясный первый акцент.

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

Чек-лист типографики перед сдачей

• Роли текста можно назвать, и каждая оформлена одинаково?
• Главный заголовок заметен без цвета и эффектов?
• В шрифте есть качественная кириллица, цифры, ₽, кавычки и тире?
• Лицензия соответствует способу использования?
• Строку удобно читать в целевом размере и на целевом устройстве?
• Интервалы внутри группы меньше, чем между группами?
• Нет лишних гарнитур, начертаний и способов выделения?

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

Вопросы и ответы

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

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

• Можно ли сочетать два шрифта без засечек?

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

• Как проверить поддержку кириллицы?

  Наберите реальный русский абзац, цифры и набор символов: ₽, №, «», —, %. Проверьте все нужные начертания в целевой программе и размере.

• Нужно ли задавать один межстрочный интервал для всех текстов?

  Нет. Он зависит от гарнитуры, размера, ширины строки и роли. Настраивайте его на реальном тексте, сохраняя повторяемость внутри одной роли.

По теме