10 лучших инструментов сопряжения шрифтов для веб-дизайнеров

Опубликовано: 2021-02-24

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

Как мы подробно объяснили в нашем блоге «Руководство по сочетанию шрифтов для веб-дизайнеров + 30 удивительных примеров», существует целая наука о сочетании шрифтов вместе. Они должны хорошо сочетаться с вашим брендом, создавать желаемый контраст, не следуя противоположным принципам дизайна, и создавать общее ощущение текучести и гармонии.

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

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

Ознакомьтесь с ними ниже и добавьте понравившиеся в закладки!

1. Фонджой

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

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

2. Тип соединения

Если вы ищете причудливый, забавный инструмент, чтобы попрактиковаться в сочетании шрифтов и узнать, как шрифты работают вместе, вы его нашли! Type Connection была создана Аурой Вайнер как дипломный проект и описывает себя как «типографическую игру для свиданий». И это действительно так!

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

После того, как система проанализирует и оценит каждую из этих «дат», вы получите обратную связь о том, является ли это совпадение плохим, средним или отличным и почему.

Деталь, которая лично мне нравится? К каждому шрифту прилагается небольшое описание, соответствующее его «личности». В общем, Type Connection — отличный образовательный инструмент для изучения сочетания шрифтов и понимания его принципов.

3. Типотека

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

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

4. Тип Google

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

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

5. Пара шрифтов

Если вы ошеломлены количеством доступных шрифтов Google, инструмент, который сужает их до красивых комбинаций, — это именно то, что вам нужно. FontPair был запущен Хейденом Миллсом как способ помочь людям соединять бесплатные шрифты с открытым исходным кодом вместе, и он до сих пор обновляется еженедельно.

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

6. Тип.ио

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

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

7. Канва

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

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

8. Микшрифт

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

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

9. Тип волк

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

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

10. Типоспирация

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

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