Одна из распространенных проблем юного дизайнера – это выбор шрифтов. Ведь их так много и все они удивительно прекрасные. Часто хочется использовать сразу все, но если понимать главные принципы подбора шрифтовой пары, то процесс пройдет быстрее, а сам проект – гармоничнее.
Рассказываю, что такое шрифтовые пары и как с ними играть, чтобы не проигрывать.
Что такое шрифтовая пара и для чего нужна
Шрифтовая пара — это два шрифта, которые используют в дизайне для оформления текстов на одном пространстве: для заголовка и основного текста, интерфейсных элементов, таких как ссылки, подписи на кнопках, пункты в меню.
Шрифт для заголовков считается главным, а для основного текста — второстепенным.
Шрифтовая пара нужна для того, чтобы:
- структурировать текст и управлять вниманием зрителя
- передавать интонацию и настроение
- создавать эстетику
Пример из реального кейса
Рассмотрим пример главного экрана, где дизайнер работал с типографикой и подобрал, на его взгляд, удачные шрифты, передающие посыл компании:
На первый взгляд, за счет соблюдения правил композиции, кажется, что все неплохо. Но если присмотреться, то становится очевидно, что со шрифтами здесь не все гладко.
Основные недочеты, которые можно выделить сразу:
1. Шрифтовая часть логотипа не сочетается с графическим изображением (трактор очень “плотный”, а вот текст тонкий).
2. В проекте используется аж 3 шрифта, что негативно влияет на консистентность.
3. Шрифтовая пара выглядит не гармонично – заголовок и основной текст из двух разных вселенных, у них нет ни одной общей черты.
4. Текст на кнопке набран акцентным шрифтом, но из-за большого перепада ширины линий в тексте, он плохо читаем в маленьком размере.
Чтобы моментально улучшить типографику, достаточно заменить основной шрифт и остановиться на использовании только двух гарнитур.
Начинающим дизайнерам я всегда советую брать один шрифт для всех текстовых элементов на сайте, а чтобы добиться контрастности, достаточно выделять заголовки более жирным начертанием.
Берем шрифт из заголовка и используем его везде и вуаля:
Учимся подбирать шрифтовую пару
Есть два простых способа подбора шрифтовой пары:
1. Взять пару шрифтов из одной гарнитуры.
2. Сочетать два шрифта из разных групп.
А также четыре принципа:
Что еще важно для шрифтовой пары?
Еще один из важнейших принципов, который поможет в работе с типографикой – это принцип схожести. В данном случае, речь о заголовках. Для выразительности и эффектности типографики важно, чтобы заголовки были едино стилизованы и выделялись от основного текста.
Обрати внимание, как на скриншоте Яндекс.Афиши четко выделяются заголовки – ориентироваться в полотне информации становится легче, потому что контрастные заголовки устанавливают порядок важности информации, что позволяет пользователю найти то, что ему нужно.
Где искать шрифтовые пары
Сервисы, которые помогут на первых парах сгенерировать удачные шрифтовые пары под твой проект:
https://fontjoy.com/ – позволяет подобрать шрифтовую пару, основываясь либо на принципе схожести, либо на принципе контраста.
https://www.mixfont.com – сервис генерирует рандомные шрифтовые пары и показывает сразу их в деле
https://www.fontpair.co/all – сайт с тысячей вариацией шрифтовых пар, которые наглядно отображаются в сочетании
Fontpair — плагин Figma, который подбирает шрифтовые пары из Google Fonts
Accidently Great Font Pairings — плагин, который генерирует шрифтовые пары от Google Fonts
Soroka — еще один полезный плагин Figma, который умеет подбирать шрифтовые пары
Интерактивная таблица сочетаний кирилических шрифтов – бесплатный сайт содержит более сотни удачных сочетаний русских шрифтов. Таблицу можно скачать и использовать как шпаргалку во время работы.