Шрифтовые композиции: правила сочетания шрифтов в дизайне

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

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

Хорошая композиция: глаз легко сканирует страницу, иерархия понятна, текст читается без напряжения.

Плохая композиция: глаз мечется, непонятно, что главное, текст утомляет.

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

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

Исключение: брендинг с акцидентным шрифтом (акцидентный — декоративный, с характером, для красоты) для логотипа + два шрифта для интерфейса.

Шрифты должны отличаться по характеру, а не только по размеру.

Хорошие пары:

• Геометрический гротеск (Montserrat) + гуманистический шрифт с засечками (Merriweather). (Гротеск — шрифт без засечек-«хвостиков» на буквах. Геометрический — из ровных линий и кругов. Гуманистический — мягкий, округлый. Засечки — маленькие «ножки» на концах букв, как у Times New Roman.)
• Современная антиква (Playfair Display) + нейтральный гротеск (Inter). (Антиква — шрифт с засечками.)
• Рукописный (Caveat) + строгий гротеск (Roboto)

Плохие пары:

• Два похожих гротеска (Arial + Helvetica) — не видно разницы
• Два акцидентных шрифта (Bebas Neue + Oswald) — конкуренция за внимание
• Декоративный + декоративный (Lobster + Pacifico) — визуальный шум

Иерархия строится не разными шрифтами, а весом (толщиной букв) и размером одного шрифта.

Пример для текстового шрифта Inter:

• H1: Inter Bold, 32px
• H2: Inter SemiBold, 24px
• H3: Inter Medium, 20px
• Body (обычный текст): Inter Regular, 16px
• Caption (подписи под картинками): Inter Regular, 14px

Один шрифт, пять уровней иерархии. Чисто и понятно.

Текстовый шрифт проверяется на размере 14–16 пикселей (пиксель — точка на экране; 14–16 — размер обычного текста на сайте). Если буквы сливаются, глаз устаёт — шрифт не подходит для длинных текстов.

Признаки хорошего текстового шрифта:

• Открытые формы букв (a, e, c)
• Достаточная высота строчных букв
• Различимые символы (I, l, 1 не путаются)
• Межбуквенное расстояние не слишком плотное

Примеры надёжных текстовых шрифтов: Inter, Roboto, Open Sans, Source Sans Pro, PT Sans.

Каждый шрифт имеет много начертаний (вариантов толщины): Thin, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black. Использовать все — ошибка.

Стандартный набор:

• Regular (для текста)
• Medium или SemiBold (для подзаголовков)
• Bold (для заголовков)

Остальные начертания — только если есть конкретная задача (Thin для декоративных элементов, Black для акцентов).

Композиция 1. Минимализм

• Заголовки: Inter Bold
• Текст: Inter Regular
• Акцент: Inter Italic (Italic — курсив, наклонный)

Один шрифт, три начертания. Чисто, современно, универсально.

Композиция 2. Классика

• Заголовки: Playfair Display Bold
• Текст: Source Sans Pro Regular
• Акцент: Playfair Display Italic

Контраст антиквы и гротеска. Элегантно, подходит для премиум-брендов.

Композиция 3. Технологичность

• Заголовки: Space Grotesk Bold
• Текст: Inter Regular
• Код: JetBrains Mono Regular

Современный гротеск + моноширинный. Для IT-продуктов и стартапов.

Композиция 4. Дружелюбие

• Заголовки: Nunito Bold
• Текст: Nunito Regular
• Акцент: Caveat (рукописный)

Скруглённый гротеск + рукописный. Для детских проектов, образовательных платформ.

Ошибка 1. Пять разных шрифтов

Результат: визуальный хаос, непонятно, что главное.

Исправление: сократить до двух шрифтов.

Ошибка 2. Заголовки и текст одного размера

Результат: нет иерархии, глаз не знает, с чего начать.

Исправление: заголовки минимум на 4–8 пикселей крупнее текста.

Ошибка 3. Декоративный шрифт для длинного текста

Результат: читать невозможно, пользователь уходит.

Исправление: декоративный только для коротких заголовков.

Ошибка 4. Игнорирование межстрочного расстояния

Результат: текст слипается, читать тяжело.

Исправление: line-height (межстрочное расстояние) 1.5–1.7 для текста, 1.2–1.3 для заголовков.

Ошибка 5. Несовместимые стили

Результат: шрифты спорят, дизайн выглядит случайным.

Исправление: подбирать пары по контрасту характеров.

Три проверки:

1. Распечатать макет в чёрно-белом: если иерархия читается без цвета — композиция работает.
2. Уменьшить до 50%: если заголовки всё ещё выделяются — размеры подобраны правильно.
3. Показать кому-то на 5 секунд: если человек запомнил главный элемент — иерархия сработала.

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

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

Полный курс: веб-дизайн от новичка до профи за 390 ₽