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

Что такое шрифтовая пара и зачем она нужна

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

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

Чтобы этого избежать, специалисты используют шрифтовые пары — комбинацию из двух гарнитур (наборов букв и знаков с единым стилем и рисунком), которые дополняют друг друга.

Главное правило типографики: контраст или подобие

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

Принцип контраста 

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

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

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

Принцип подобия

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

Плюс в том, что такие варианты точно сочетаются друг с другом, так как построены по единой геометрической сетке. Иерархия в этом случае устанавливается не через акцент, а через размер и толщину. 

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

ЧИТАЙТЕ ТАКЖЕ:

Как распознать шрифт с картинки: способы и онлайн-сервисы

Удачные схемы сочетания шрифтов

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

1. Антиква. Гарнитуры с засечками на концах штрихов. Засечки создают невидимую линию, которая помогает взгляду скользить по тексту. Сейчас их чаще всего используют для того, чтобы передать статусность и традиционность. 
2. Гротеск. Шрифт без засечек. У этих букв, наоборот, нет никаких декоративных элементов. Поэтому они хорошо подходят для интерфейсов, сайтов и мобильных приложений. Также гротескные шрифты хорошо читаются на экранах с разным разрешением. 
3. Акцидентные гарнитуры. Декоративные, рукописные, трафаретные или готические формы. В этом случае главная задача — передать эмоцию. Обычно их применяют только для заголовков в крупных размерах. 

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

Формула №1. Антиква + гротеск

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

Формула №2. Гротеск + гротеск

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

Формула №3. Акцидент + гротеск

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

Формула №4. Одно семейство 

Выбирайте одну гарнитуру с большим набором сочетаний для всего текста. Иерархия выстроится за счет разницы в насыщенности линий и размере букв. 

Шесть правил сочетания шрифтов

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

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

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

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

Проверяйте читабельность в мелком кегле. Текст должен распознаваться без усилий со стороны пользователя. Уменьшите масштаб макета и посмотрите на буквы. Если просветы между буквами сливаются в темное пятно, лучше заменить гарнитуру. 

Учитывайте контекст проекта. Форма букв транслирует смыслы. Финансовому приложению подойдут строгие линии и закрытые формы знаков. Бренду детской одежды лучше использовать округлые буквы с мягкими формами. 

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

Как дизайнеру подобрать шрифты

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

Шаг 1. Соберите вводные данные. Когда к вам приходит клиент с задачей, важно собрать всё, что потребуется для работы. Узнайте его сферу, конкурентов, характер продукта, позиционирование и желаемый результат. Также помните, что если вы нашли понравившийся вариант, то сразу проверяйте, доступен ли он на кириллице, есть ли у него дополнительные начертания и цифры. 

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

Шаг 3. Подберите пару для абзацев. Найдите нейтральный шрифт для основного набора. Для этого можно пойти по правилам, о которых мы говорили в блоке «Удачные схемы сочетания шрифтов». После этого выберите абзац текста и сверстайте его выбранным шрифтом. Проверьте, удобно ли читать символы на светлом и темном фоне, уступает ли текст заголовку и получается ли сохранять фокус на смысле материала. 

Шаг 4. Настройте шкалу размеров. Пропишите строгие значения для всех элементов интерфейса. Зафиксируйте отдельные показатели для компьютерной и мобильной версий сайта. Укажите точные параметры кегля для заголовков первого и второго уровня, основного массива текста, подписей к кнопкам и мелких сносок. Внесите эти данные в дизайн-систему.

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

Где подбирать шрифтовые пары

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

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

Fontjoy. Сервис анализирует геометрию букв и самостоятельно подбирает контрастные варианты. Вы можете выбрать шрифт заголовка или основного текста, нажать кнопку «Сгенерировать», и второй шрифт система подберет сама. 

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

Font Squirrel. Здесь вы найдете все гарнитуры с открытой лицензией для коммерческого использования. 

Adobe Fonts. База предлагает тысячи вариантов для подписчиков Adobe. Также вы можете получить файлы без скачивания, если работаете в экосистеме продукта. 

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

WhatTheFont. Алгоритм распознает буквы на картинке и выдает название гарнитуры. Система определяет как печатные, так и рукописные варианты. 

Главное о работе со шрифтами

1. Шрифтовая пара — технический инструмент навигации. Она выстраивает маршрут пользователя по странице и помогает усваивать информацию.
2. Есть два правила для сочетания шрифтов: контраст, когда берут два абсолютно разных варианта, или подобие, где используют шрифты из одного семейства. 
3. Есть четыре стандартных схемы для сочетания шрифтов: антиква + гротеск, гротеск + гротеск, акцидент + гротеск, одно семейство шрифтов. 
4. Важные правила для работы: не сочетайте более двух шрифтов в проекте, контролируйте высоту строчных знаков, не объединяйте похожие формы, проверяйте читабельность в разном формате, учитывайте продукт и проверяйте, работает ли шрифт на кириллице. 
5. Чтобы дизайнеру подобрать шрифты, нужно: собрать вводные от клиента, сначала подобрать шрифт для заголовка, а уже потом для основного текста, зафиксировать размеры и проверить результат. 
6. Подобрать шрифты можно на сайтах Google Fonts, Fontjoy, Font Squirrel, TypeScale и других. 

FAQ