Шрифтовые пары – как подобрать шрифт

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

Шрифтовая пара – это что

Начнем с теории. Шрифт – это конкретный способ отображения букв. Шрифты категоризируются десятками различных способов, но мы выделим два «житейских»: красивый, но сложно читать; попроще выглядит, легко читать.

Конечно, существуют некрасивые и сложночитаемые шрифты, но они нас не интересуют вовсе; красивые и легкочитаемые шрифты же в природе встречаются крайне редко. 

Кроме шрифтов, из теории нас еще внезапно интересует нейробиология, которая прямо говорит, что на картинке люди проще всего различают что-то выделяющееся – на этапе зарождения человечества это помогало нам различить желтого льва в зеленых кустах, а теперь помогает различить красное «СКИДКА 50%» на белом фоне. Если сложить два этих кусочка теории, то придем к ряду выводов:

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

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

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

Все последующие шрифты, которые мы встретим в жизни, мы сравниваем с «основным», и чем они ближе – тем проще нам читать текст. Поэтому шрифты с засечками, например, нам проще читать – в школе такие шрифты не применяются.

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

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

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

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

К выбору шрифтовой пары нужно подходить ответственно.

Правила комбинирования

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

• Засечки. Этот элемент часто составляет ту самую разницу между шрифтами в паре.
• Декоративные элементы. Узоры, росчерки и другие необязательные элементы. Сильно привлекают внимание, сильно затрудняют чтение.
• Толщина/курсив. Самый простой способ дифференциации шрифтов, в некоторых случаях достаточно взять один и тот же шрифт, но в двух вариациях: обычный и толстый/курсивный.
• Пропорции. Высота, ширина. Желательно, чтобы выделяющийся шрифт в целом был больше «основного».
• Апертура. То, насколько знаки открыты. Здесь можно поэкспериментировать.
  
  
• Контрастность. То, насколько хорошо буквы различимы. Чем больше округлости – чем меньше контрастности. Лучше выбирать шрифты с высокой контрастностью, с низкой контрастностью стоит экспериментировать очень осторожно.
• Форма букв. Здесь – полная свобода выбора, для каждой буквы придумали сотни тысяч форм.

Если вы не совсем уверены в том, правильно ли составлена шрифтовая пара, пользуйтесь правилом «до 50% различий»: минимум 4 из 7 признаков у шрифтов должны быть одинаковыми. Например, у двух шрифтов одинаковые: контрастность, пропорции, апертура, форма букв. При этом различаются: засечки, декоративные элементы, курсив.

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

Примеры комбинаций

10 хороших шрифтовых пар:

1. Source Sans Pro & Times New Roman.
   
   
   
2. Raleway & Merriweather.
   
   
   
3. PT Sans & PT Serif.
   
   
   
4. Playfair Display & Raleway Thin.
   
   
   
5. Oswald & Old Standard TT.
   
   
   
6. Oswald & Montserrat Extra Light.
   
   
   
7. Open Sans & Source Sans.
   
   
   
8. Noir Pro & Playfair Display.
   
   
   
9. Nexa Bold & Crimson Pro.
   
   
   
10. Neue Helvetica & EB Garamond Medium.
    
    
    

Обзор сервисов для подбора шрифтов

Adobe Fonts

Большой сборник шрифтов, которым пользуются многие дизайны сайтов. Из минусов – проблематично подобрать пару, если у вас есть один конкретный шрифт. Из плюсов – есть два раздела, из которых можно смело брать любую шрифтовую пару и сразу же использовать. Первый раздел – это «Рекомендации», в котором собраны примеры идеальных сочетаний шрифтов. Увы, кроме хороших шрифтовых пар в этом разделе находятся еще и одиночных шрифты, то есть вам придется долго и упорно искать то, что вам нужно. Поиска тоже нет.

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

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

FontsInUse

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

Чем хорош: работа всех пар видна на примере.

TypeSpiration

Проект, который подбирает бесплатные удачные сочетания шрифтов. Хорошую комбинацию можно найти в том числе по фильтру: указываете лидирующий понравившийся шрифт, и сайт подбирает к нему хорошую пару «обычного» шрифта (или наоборот). Кроме того, вам предлагают выбрать цвета шрифтов – то есть вы прямо на этом сайте можете подобрать основные параметры для создания дизайна сайта или печатной продукции.

Еще из приятного – на главной странице сайта вы можете указать свою почту, и вам на нее пришлют PDFку с 25-ю готовыми вариантами красивых шрифтовых пар (с удачными цветами). Если у вас нет особого желания самостоятельно мучаться с хорошим вариантом – можете взять готовый отсюда.

Чем хорош: поиск по ключам; выбор цвета текста; можно найти пару любому шрифту из базы.

FontPair

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

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

Чем хорош: все шрифты – бесплатные.

MixFont

Случайный генератор шрифтовых пар. Нажимаете на кнопку в центре экрана – сайт автоматически генерирует вам веб-страничку, на которой используются два случайных шрифта. Страничка – довольно подробная, то есть вы увидите применение этих шрифтов в разных ситуациях. Если не понравилась – нажмите на «Swap», и сайт выдаст вам новую пару.

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

Чем хорош: можно наткнуться на уникальное сочетание.

FAQ

За шрифты надо платить?

Не за все. Есть шрифты бесплатные, есть – платные. Бесплатные обычно распространяются крупными вендорами, вроде Гугла, платные же распространяются дизайнерами-одиночками и небольшими компаниями. Обычно на любом сайте, где можно получить шрифт, прописаны условия использования и цена, если шрифт – платный.

Что делать, если у шрифта нет кириллицы?

Грустно вздохнуть и идти дальше. По сути своей шрифт – это набор картинок, и эти картинки подставляются на место числового значения букв в нужных местах. То есть в шрифте каждая отдельная буква нарисована дизайнером, и если дизайнер не нарисовал кириллические буквы – значит, их нет (и, вероятно, не будет). Поищите какую-нибудь замену или попробуйте составить другую шрифтовую пару.

Подведем итоги

Тезисно:

• Шрифтовая пара – это пара из двух шрифтов, которая используется для предоставления контента.
• Идея шрифтовой пары – в том, что есть «завлекающий» и «основной» шрифты, завлекающий шрифт используется для заголовков, основной – для предоставления основного контента.
• Завлекающий шрифт должен быть необычным – тогда за него с большей вероятностью зацепится глаз. Основной шрифт должен быть наиболее удобным и привычным, чтобы читатель не устал читать.
• Шрифтовые пары подбираются по определенным критериям. Общее правило: у двух шрифтов должно быть более 50% общего, но при этом должно быть несколько явных различий.
• Существуют сервисы для генерации шрифтовых пар. Сами сервисы – бесплатные, часть сервисов составляет пары исключительно из бесплатных шрифтов. Если вы не чувствуете уверенности в подборе пар – доверьтесь этим сервисам.