Шрифтовые композиции: что это такое и как сочетать шрифты

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

Неправильная пара шрифтов превращает дизайн в кашу, правильная — делает макет премиальным. Разбираю правила подбора и примеры.

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

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

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

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

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

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

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

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

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

Плохие пары:

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

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

Гротеск для текста, антиква для заголовков. Оба шрифта сделаны для кириллицы, поэтому русский текст в них выглядит естественно, без «переведённых» букв. Хороший выбор для сайта на русском, когда нужен спокойный, аккуратный вид.

Нейтральный текстовый шрифт и контрастная антиква с тонкими линиями в заголовках. Работает в премиум-нишах: студии, ювелирные бренды, косметология. Важно не делать Playfair слишком мелким — тонкие штрихи на маленьком размере теряются.

Геометрический гротеск в заголовках и гуманистическая антиква в тексте. Пара контрастна по характеру, но не спорит: заголовок звучит современно, текст читается спокойно. Подходит для лендингов и корпоративных сайтов.

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

Рукописный акцент и строгий гротеск. Caveat здесь нужен не для заголовков целиком, а для короткой фразы, подписи или цитаты — иначе страница становится похожей на открытку. Основной текст остаётся у Roboto.

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

Пример для текстового шрифта 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 ₽