Top.Mail.Ru
ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
5 сервисов подбора шрифтов для дизайнеров
Делимся списком лучших ресурсов для онлайн-подбора шрифтовых пар, библиотеками шрифтов и полезными советами по их комбинированию в дизайн-проектах.
Веб-дизайн
12167
Любой дизайнер понимает, как важно грамотно подобрать шрифт для своего проекта, будь то лендинг, интернет-магазин или упаковка товара. Удачно подобранные шрифты помогают передать тематику проекта, сформировать нужное настроение и ассоциации у целевой аудитории, а если речь идет о дизайне сайта, то еще и улучшить юзабилити, а также увеличить конверсию.

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

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



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


Существует два базовых правила комбинирования шрифтов:

  1. Правило контрастов
  2. Правило подобия

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

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



Еще один важный момент — выбранные шрифты должны создавать у пользователей похожие ассоциации и настроение, соответствующее тематике проекта:

  • Плавные рукописные шрифты ассоциируются с детьми, романтикой, дружбой, заботой, элегантностью.
  • Чтобы сформировать доверительное отношение и ощущение надежности, подойдут шрифты типа антиквы.
  • Широкие гарнитуры вроде Gotham Book или Syne Extra вызывают чувство спокойной уверенности.
  • Узкие гарнитуры (Compact или Myriad Pro) ассоциируются с интеллектом и собранностью.
  • Для высокотехнологичных тематик хорошо подходят геометрические шрифты типа Fractul и Modernia.
  • Чтобы вызвать ассоциации с успехом и энергичностью, используйте угловатые гарнитуры, к примеру AC Line, Velta, Saira.

Лучшие сервисы для подбора шрифтовых пар и отдельных шрифтов


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

  1. Fontjoy — бесплатный онлайн-генератор шрифтовых пар. Главное достоинство сервиса — понятный и простой интерфейс. Бегунок вверху страницы задает степень схожести шрифтов в паре. Еще можно менять фон и текст, чтобы увидеть, как надпись (название компании или заголовок страницы) будут смотреться на темном и светлом фоне. А еще можно зафиксировать один из шрифтов, нажав на Lock (иконка с замком слева) и подбирать гармоничные сочетания именно для него.

  2. Mixfont — здесь можно подобрать красивые сочетания шрифтов и сразу же посмотреть, как они смотрятся в разных блоках сайта. Для UX/UI-дизайнеров это отличный способ сэкономить время на поиск подходящих гарнитур для всех элементов интерфейса. Здесь можно менять шрифты в паре местами и сохранять понравившиеся сочетания, чтобы не подбирать их заново для каждого проекта.

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


  4. Fontpair — еще один онлайн-генератор шрифтовых пар, работает только с бесплатными шрифтами из библиотеки Google Fonts. Сочетания шрифтов здесь сразу встроены в макеты веб-страниц. А еще для каждого шрифта есть карточки и кратким описанием и рекомендациями по его использованию.
  5. Free Faces — небольшая, но очень эстетичная библиотека шрифтов, где удобно выбирать гарнитуры для своих проектов. Прямо на главной странице можно выбрать нужный шрифт или группу шрифтов. В карточке каждой гарнитуры есть ее подробное описание, тип лицензии, ссылка для скачивания или покупки.



Заключение


В поисках идеальных шрифтов и их сочетаний полагайтесь не только на предложенные нами онлайн-сервисы, но и на собственный вкус. Для этого постоянно прокачивайте насмотренность, сохраняйте интересные комбинации и референсы и не бойтесь смелых экспериментов!
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
Кинетическая типографика в UX/UI-дизайне
Узнайте, как выделиться среди конкурентов и создать по-настоящему запоминающийся интерфейс с помощью кинетической типографики. Что это такое, как, зачем и в каких случаях UX/UI-дизайнерам стоит использовать эту технику.
Веб-дизайн
663
Цвет года 2023: особенности и использование в дизайне
Месяц назад институт цвета Pantone Color Institute назвал главным цветом 2023 года оттенок Viva Magenta. Разбираемся, почему именно этот насыщенный карминово-красный цвет был выбран экспертами и как использовать его в дизайне.
Веб-дизайн
19344
Гештальт-принципы в графическом и UI дизайне
Помимо знания основ композиции, теории цвета, типографики, дизайнеры должны разбираться в психологии человека. Это помогает управлять вниманием пользователя и упрощать восприятие информации. Гештальт-принципы именно об этом.
Веб-дизайн
33302
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!