Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>1 июн 2024</li>

3 <li>0</li>

4 </ul>Как эффективно и быстро подобрать основной шрифт к заголовку? Сгенерировать в ИИ, обратиться к мировому архиву дизайна или взять готовые решения.

5 Иллюстрация: Gade / Rawpixel / Evan Lee / Unsplash / Annie для Skillbox Media

6 <a>Шрифтовые пары</a> - это два сочетающихся шрифта, которые помогают визуально структурировать информацию на сайте, макете или в брендбуке. Вообще, чтобы ориентироваться в шрифтах и их гармоничных сочетаниях, нужно изучать типографику и её законы, разбираться в типах гарнитур, следить за трендами. Но начинать можно и со специальных сервисов, которые подбирают шрифты и вдохновляют на элегантные типографические решения.

7 Мы собрали семь таких полезных сервиса: библиотеки с готовыми примерами, нейросеть и генераторы сочетаний. В их базах есть и бесплатные шрифты из каталога Google Fonts, и шрифты с платными лицензиями.

8 Подбор шрифтов в генераторе<a>Fontjoy</a>основан на модели машинного обучения - пару создаёт нейросеть по заданному параметру. Несмотря на сложный алгоритм за фасадом, интерфейс выглядит достаточно просто.

9 Преимущество

10 Есть и режим ИИ-генератора, и ручной подбор сочетаний.

11 Особенности

12 <ul><li>Бегунок задаёт правило для подбора шрифта: от сильного контраста до полного сходства.</li>

13 <li>Кнопка-замочек фиксирует шрифты, чтобы генератор их не менял, - это полезно, например, когда начертание основного текста задано заранее, а к нему требуется подобрать заголовок.</li>

14 <li>Все подходящие к заголовку шрифты можно увидеть в формате картотеки и собрать комбинацию вручную.</li>

15 </ul><a>Онлайн-генератор</a>пар на сайте нидерландской словолитни позволяет подобрать сочетания и купить лицензионные шрифты - по одному, небольшим набором или семейством.

16 Преимущество

17 Быстрая "примерка" шрифтов на компактном макете вёрстки.

18 Особенности

19 <ul><li>В отдельный блок вынесен<a>комбинатор кириллических шрифтов</a>. Он позволяет подбирать пары из шрифтов, которые поддерживают кириллицу.</li>

20 <li>В разделе Latin можно изучить и выбрать готовые типографические сочетания: в современном стиле,<a>в швейцарском</a>, классику и другие.</li>

21 <li>Для кириллических шрифтов меню готовых комбинаций нет. Чтобы увидеть, как предлагаемые сочетания выглядят с кириллицей, замените текст в макете на русский, сербский или украинский - некоторые начертания в разделе Latin поддерживают кириллицу. Обратите внимание: функция "копировать - вставить" работает плохо, поэтому текст в этом поле лучше печатать.</li>

22 <li>Ручная подборка сочетаний работает по функции drag-and-drop: "захватывайте" шрифт из обширного списка и "бросайте" его на макет.</li>

23 </ul>Генератор<a>Mixfont</a>моментально подбирает комбинации. Кнопка Get Started открывает "портал" в перебор сочетаний: сервис случайным образом комбинирует больше тысячи шрифтов в сотни тысяч пар.

24 Преимущество

25 В Mixfont можно увидеть, как пары выглядят в разных форматах вёрстки, а также на стандартных компонентах сайтов и приложений: например, в форме логина на сайте или на макете календаря.

26 Особенности

27 <ul><li>Случайный подбор даёт высокую вероятность уникальных комбинаций. С другой стороны, в основе этих сочетаний не лежит теория типографики или фундаментальные законы эстетики: дизайнеру самому нужно оценивать каждую сгенерированную пару с точки зрения вкуса, целесообразности, логики использования.</li>

28 <li>Если кликнуть по названию шрифта вверху страницы, то он зафиксируется, и генератор не будет его менять.</li>

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

30 <li>Кнопки скачивания или покупки нет, но сервис генерирует html-коды и CSS-правила для интеграции шрифтов в сайт.</li>

31 </ul><a>Fontpair</a> - это иллюстрированная библиотека пар и галерея популярных бесплатных шрифтов. Готовые пары здесь встроены в макеты веб-страниц.

32 Преимущество

33 Все шрифты - бесплатные, с опенсорсными лицензиями.

34 Особенности

35 <ul><li>Макеты веб-страниц показывают, как готовые комбинации выглядят "в бою". Они же служат референсами или источниками вдохновения - например, готовая карточка покажет, как смотрится пара Raleway и Nunito Sans на лендинге HR-стартапа.</li>

36 <li>Под каждой иллюстрацией пары есть два редактируемых поля - в них можно ввести свой заголовок и текст. Там же - кнопка для скачивания обоих шрифтов.</li>

37 <li>Небольшие визитки в галерее популярных Google-шрифтов демонстрируют варианты начертания и дают короткие советы по использованию. Например, визитка<a>Comfortaa</a>подсказывает, что он "дружелюбный", а надпись на карточке<a>Bebas Neue</a>предупреждает, что не стоит использовать его в теле текста.</li>

38 </ul><a>Typespiration</a> - небольшая библиотека готовых макетов, ресурс для типографического вдохновения на основе бесплатных Google Fonts. Здесь к парам сразу подобраны цветовые схемы. Эти готовые сочетания можно брать использовать в своём дизайне.

39 Преимущество

40 Все комбинации без лицензионных ограничений, их можно свободно использовать.

41 Особенности

42 <ul><li>Сочетания шрифтов показаны на классическом тексте про быструю лису и ленивую собаку. Текст только на английском языке, и отредактировать его нельзя.</li>

43 <li>В карточке каждого макета есть прямые ссылки на шрифты в Google Fonts, где их можно изучить и скачать. Цветовые схемы обозначены HEX-кодами.</li>

44 </ul><ul><li>За подписку на сайте высылают бесплатную pdf-книгу с 25 готовыми типографическими комбинациями. В этом сборнике только шрифтовые пары, заголовки и тексты - без цветовых схем и демонстрационных компонентов.</li>

45 </ul>Макеты карточек со шрифтовыми парами по фильтру "оранжевый цвет".<a>Fonts In Use</a> - публичная библиотека графического дизайна и очень большой архив мировой типографики. Этот проект для любого дизайнера - учебник по применению шрифтов и их комбинаций во всех областях. Здесь нет генератора пар - только внушительная база типографических решений реальных дизайнерских задач.

46 Преимущество

47 Шрифты и их комбинации показаны на реальных продуктах - изданиях, этикетках, упаковках, лендингах, марках, обложках музыкальных альбомов.

48 Особенности

49 <ul><li>Все дизайнерские продукты проиндексированы по темам, форматам, названиям, типам, периодам. Также можно искать шрифты по студиям и авторам: например, в архиве есть работы Ильи Рудермана и Юрия Остроменцкого.</li>

50 <li>К Fonts In Use стоит обращаться за референсами и вдохновением - например, когда клиент заказывает "<a>царский дизайн</a>лендинга".</li>

51 <li>Используйте архив для исследования: например, прицельно изучайте, какие комбинации подходят<a>для детских товаров</a>.</li>

52 </ul>Примеры графических работ со шрифтом Graphik и парами к нему.Библиотека<a>Adobe Fonts</a>входит в платный пакет Adobe Creative Cloud. Он даёт доступ к 20 000 шрифтов и позволяет в один клик интегрировать их во все приложения Adobe.

53 Преимущество

54 Если есть подписка Adobe Creative Cloud, то дополнительно покупать шрифты не потребуется.

55 Особенности

56 <ul><li>Отдельного инструмента для комбинации шрифтов в Adobe Fonts нет, однако в разделе "Рекомендации" собраны примеры пар. Неудобство в том, что фильтр на них не поставить - чтобы найти подходящую, придётся пролистывать в том числе карточки отдельных шрифтов и шрифтовых семейств.</li>

57 <li>Обратите внимание: не ко всем семействам подобраны пары. Но чем крупнее семейство, тем выше вероятность, что в его карточке найдутся рекомендации по сочетаниям.</li>

58 <li>В разделе "Наборы шрифтов" есть тематические комбинации: подборки объединены по задачам, настроениям, сценариям использования. Например, из <a>шрифтов пакета для ретроглэмпинга</a>можно собрать пары или триады для оформления блога о путешествиях.</li>

59 </ul>Adobe Fonts предлагает сочетать шрифт Ethnocentric с Termina, Forma или Grenadine для оформления текста в стиле "мета".<a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>