Дизайн
#статьи

Что такое шрифтовые пары и как их подбирать

О способе сделать текст читабельным, а типографику — эффектной.

Иллюстрация: vlada_maestro / shutterstock

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

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

Что такое шрифтовая пара

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

В шрифтовой паре один шрифт считается главным, другой — второстепенным.

Зачем нужны шрифтовые пары

Шрифтовые пары — это инструмент эффективной типографики. Их подбирают, чтобы:

  • Структурировать текст и управлять вниманием зрителя.

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

Название статьи набрано элегантной антиквой из гарнитуры Domaine, а дата, имя автора и категории — аккуратным гротеском Basic Sans
Скриншот: сайт Kitchnn / Skillbox Media
  • Передавать интонацию и настроение.

Контраст или подобие в шрифтах помогает определённым образом «рассказать историю» и не только визуально выделить главное, но и подчеркнуть детали, придать словам и всей текстовой композиции характер — будто добавить в композицию голос.

Надпись гротеском Aeonik выглядит спокойно, а антиква Recife словно ставит акцент на слове «проще»
Скриншот: сайт Flashform / Skillbox Media
  • Создавать эстетику.

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

Изображение: издательство Individuum

Как подобрать шрифтовую пару

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

Есть два простых способа решить эту задачу:

  • Взять пару шрифтов из одной гарнитуры.

Например, Oswald Light для основного текста и Oswald SemiBold для заголовка. У шрифтов в рамках одной гарнитуры одинаковая геометрия, поэтому они точно будут смотреться гармонично.

Шрифты семейства Editorial New в оформлении меню ― потоньше и потолще
Изображение: Lara Martínez Magán & Antonio Lajara / Behance
  • Сочетать два шрифта из разных групп.

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

Mabry Pro для главного сообщения на странице, SangBleu Sunrise для текста ссылки. Для определения шрифтов на сайтах есть простой инструмент — плагин WhatFont
Скриншот: сайт «Подписные издания» / Skillbox Media

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

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

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

  • Пропорции.

Это соотношение ширины и высоты букв: они могут быть вытянутыми и узкими или, наоборот, короткими и широкими.

Узкая и высокая антиква плюс слегка заниженный и расширенный шрифт без засечек
Изображение: Artem Nevsky / Pixel Surplus / Behance
  • Апертура или степень открытости знаков.

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

Скриншот: сайт W hotels / Skillbox Media
  • Толщина букв и наклон текста.

Надписи могут быть набраны тонким или жирным шрифтом, а угол наклона — слабым или явным.

Сочетание наклонного и регулярного шрифтов на обложке книги
Изображение: издательство No Kidding Press
  • Форма и рисунок.

В некоторых шрифтах обтекаемые мягкие линии, в других — много острых углов.

Комбинация из округлых Body Grotesque и Montserrat
Скриншот: сайт «Слой» / Skillbox Media
  • Контрастность.

Это соотношение толщин штрихов, которые образуют букву.

Пара из двух шрифтов, подобных по пропорциям, но с разной контрастностью линий — Lora и Open Sans
Скриншот: сайт «Собака.ru» / Skillbox Media
  • Декоративные элементы.

Буквы могут быть украшены узорами в историческом стиле, или их формы могут напоминать образ известного бренда.

Акцидентный шрифт с характером леттеринга в названии и открытый гротеск в тексте пояснения
Изображение: Helga Korotkova / Behance

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

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

Очень много разных шрифтов на одном развороте — не ошибка, а концепция
Изображение: Benjamin Mira / Joseph Montana / Behance

Когда шрифтовые пары не нужны

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

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

Несколько шрифтов из группы SB Sans Text в дизайне страницы
Скриншот: сайт Edutoria / Skillbox Media

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

Благодаря цвету и размерам шрифты в левой половине страницы выглядят разными, но всё это один Source Code Pro
Скриншот: сайт Language for Geeks / Skillbox Media

Подбор шрифтовых пар: сервисы и инструменты

Есть сервисы, позволяющие автоматически подбирать шрифтовые сочетания онлайн, и библиотеки с готовыми наборами.

Например, в Figma есть готовые пары на основе шрифтов Google Fonts. Подобные подборки делают и другие компании: так, в блоге Adobe Express собраны не только рекомендации, но и готовые шаблоны дизайнов с разными шрифтовыми парами.

Больше интересного про дизайн в нашем телеграм-канале.  Подписывайтесь!

Освойте топовые нейросети за три дня. Бесплатно
Знакомимся с ChatGPT-4, DALLE-3, Midjourney, Stable Diffusion, Gen-2 и нейросетями для создания музыки. Практика в реальном времени. Подробности — по клику.
Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована