15 сервисов для подбора шрифтовых пар

Автор:

Диана Сиддикви

IT-копирайтер, переводчик, контент-менеджер.

Шрифт является важной частью дизайна – правильно подобранный шрифт может сделать сайт более удобным для пользователей, кроме того, хороший читаемый шрифт способен украсить любой графический проект. Но при подборе шрифтов нужно учитывать множество нюансов, особенно, когда в проекте используются более двух различных начертаний. Если дизайнер считает, что в работе необходимо использовать более одного шрифта, то он должен помнить, что ему придется потратить много времени для поиска гармонично сочетающихся между собой гарнитур. Можно ли как-нибудь ускорить этот процесс? Да, можно, если использовать инструменты и сервисы для подбора шрифтовых пар. С помощью этих инструментов можно очень быстро определиться с основным шрифтом и сразу же найти шрифт, который будет являться дополнительным. Большинство этих инструментов очень просты в использовании, однако они не гарантируют, что предложенные варианты шрифтов идеально впишутся в ваш проект. В этом вопросе дизайнер должен в значительной мере полагаться на собственный опыт и вкус и использовать веб-сервисы для подбора шрифтовых пар как проверочный инструмент.

GOOGLE TYPE

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

TYPE GENIUS

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

JUST MY TYPE

Сервис Just My Type предлагает всего несколько тщательно подобранных шрифтовых пар, но это действительно хорошо сочетающиеся шрифты, которые идеально подходят друг другу. Создатель сервиса Дэниэл Эден предупреждает, что его выбор не должен влиять на окончательное решение дизайнера. Типографика это все же искусство и в вопросе выбора шрифтов нужно доверять своему вкусу.

BLENDER

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

FONT COMBINATOR BY TYPOTHEQUE

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

TYPE CONNECTION

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

FONT PAIR

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

TYPE WOLF

На сайте Typewolf.com можно найти множество интересных шрифтовых пар, которые украсят любой дизайн. Все примеры носят рекомендательный характер, окончательный выбор остается все же за дизайнером. Выбор шрифтовых пар невелик, но зато на сайте можно найти множество подборок с советами по выбору шрифтов, к примеру, там есть подборки с альтернативами таким популярнейшим семействам, как Helvetica или Futura.

TYP.IO

Инструмент Typ.io поможет выбрать основной шрифт и быстро найти ему подходящую пару. Выбор шрифтов не очень большой, однако сервис показывает, как шрифты сочетаются между собой, что позволяет быстро сделать правильный выбор.

FONT COMBINATOR

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

ADOBE TYPEKIT

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

TYPESPIRATION

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

FONT IN USE

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

THE ART OF COMBINING FONTS

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

THE ART OF MIXING TYPEFACES

Сервис The Art of Mixing Typefaces это своеобразная шпаргалка для дизайнеров, позволяющая быстро найти подходящие друг другу шрифты. Пользоваться шпрагалкой очень просто – выбираете шрифт по вертикальной оси и затем смотрите, с каким шрифтами его можно использовать.

На этом все, спасибо за внимание!

Источник

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

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

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

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

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

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

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

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

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

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

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

Кроме шрифтов, из теории нас еще внезапно интересует нейробиология, которая прямо говорит, что на картинке люди проще всего различают что-то выделяющееся – на этапе зарождения человечества это помогало нам различить желтого льва в зеленых кустах, а теперь помогает различить красное «СКИДКА 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

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

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

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

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

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

Тезисно:

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