Як заощадити час при виборі шрифтів, де знайти "типографічне" натхнення і яку допомогу може принести нейромережа?
Ілюстрація: Gade / Rawpixel / Evan Lee / Unsplash
Шрифтові пари - це два шрифти, що поєднуються між собою, які допомагають візуально структурувати інформацію на сайті, макеті або в брендбуку. Щоб орієнтуватися в шрифтах та їх гармонійних поєднаннях, потрібно вивчати типографіку та її закони, розумітися на типах гарнітур, стежити за трендами.
Існують і спеціальні веб-сервіси, які підбирають шрифти та надихають на елегантні типографічні рішення. Ми зібрали сім таких платформ: три генератори та чотири бібліотеки. Перші дозволяють безкоштовно створювати поєднання, по-друге можна подивитися готові пари. В основі сервісів можуть бути безкоштовні Google Fonts, і авторські шрифти з платними ліцензіями.
Fontjoy
Підбір шрифтів у генераторі Fontjoy заснований на моделі машинного навчання – пару створює нейромережу за заданим параметром. Незважаючи на складний алгоритм, інтерфейс користувача виглядає досить просто.
Перевага
Є і режим генератора, і ручний вибір поєднань.
Особливості
Бігунок задає правило для підбору шрифту: від сильного розмаїття до повної схожості.
Кнопка-замочок фіксує шрифти, щоб генератор їх не змінював, — це корисно, наприклад, коли зображення основного тексту задано заздалегідь, а до нього потрібно підібрати заголовок.
Всі шрифти, що підходять до заголовка, можна побачити у форматі картотеки і зібрати комбінацію вручну.
Typotheque
Онлайн-генератор пар на сайті нідерландської словолітні дозволяє підібрати поєднання та купити ліцензійні шрифти - по одному, невеликим набором або сімейством.
Перевага
Швидка «примірка» шрифтів на компактному макеті верстки.
Особливості
В окремий блок винесено комбінатор кириличних шрифтів. Він дозволяє підбирати пари з накреслень, адаптованих під цей алфавіт.
У розділі Latin можна вивчити та вибрати готові типографічні поєднання: у сучасному стилі, у швейцарському, класику та інші.
У розділі кирилиць шрифтів меню готових комбінацій немає. Щоб побачити, як пропоновані поєднання виглядають з кирилицею, замініть текст у макеті на російську чи українську — деякі зображення в розділі Latin підтримують кирилицю. Зверніть увагу: функція «копіювати — вставити» працює погано, тому текст у полі, що редагується, краще написати.
Ручна добірка поєднань працює за функцією drag-and-drop: "захоплюйте" шрифт із великого списку та "кидайте" його на макет.
Mixfont
Генератор Mixfont вмить підбирає комбінації. Кнопка Get Started відкриває «портал» у перебір поєднань: сервіс випадково комбінує більше тисячі шрифтів у сотні тисяч пар.
Перевага
У Mixfont можна побачити, як пари виглядають у різних форматах верстки, а також на стандартних компонентах сайтів та програм: наприклад, у формі логіна на сайті або на макеті календаря.
Особливості
Завдяки випадковому підбору висока ймовірність унікальних комбінацій. З іншого боку, в основі цих поєднань не лежить теорія типографіки чи фундаментальні закони естетики: дизайнеру самому потрібно оцінювати кожну пару з точки зору смаку, доцільності, логіки використання.
Якщо клацнути по назві шрифту вгорі сторінки, то він зафіксується, і генератор не змінюватиме його.
Ввести свій текст замість демонстраційного не можна. А щоб з'ясувати, чи підтримує шрифт кирилицю, що вам сподобався, знадобиться його гуглити.
Кнопки завантаження чи покупки немає, але сервіс генерує html-коди та CSS-правила для інтеграції шрифтів у сайт.
Fontpair
Fontpair – це ілюстрована бібліотека пар та галерея популярних безкоштовних шрифтів. Готові пари тут вбудовані в макети веб-сторінок.
Перевага
Усі шрифти – з безкоштовної бібліотеки Google Fonts.
Особливості
Макети веб-сторінок показують, як готові комбінації виглядають "у бою". Вони ж служать референсами або джерелами натхнення — наприклад, готова картка покаже, як виглядає пара Raleway та Nunito Sans на лендингу HR-стартапу.
Під кожною ілюстрацією пари є два поля, що редагуються — в них можна ввести свій заголовок і текст. Там же – кнопка для скачування обох шрифтів.
Невеликі візитки в галереї популярних Google-шрифтів демонструють варіанти зображення і дають короткі поради щодо використання. Наприклад, візитка Comfortaa нагадує, що він «дружній», а напис на картці Bebas Neue попереджає, що не варто використовувати його в тілі тексту.
Typespiration
Typespiration - невелика бібліотека готових макетів, ресурс для типографічного натхнення на основі безкоштовних шрифтів Google. Тут до пар відразу підібрані колірні схеми. Ці готові комбінації можна використовувати у своєму дизайні або брати їх за основу для власних рішень.
Перевага
Усі комбінації без ліцензійних та авторських обмежень їх можна вільно використовувати.
Особливості
Поєднання шрифтів показано на класичному тексті про швидку лисицю та ліниву собаку. Текст лише англійською, і відредагувати його не можна.
У картці кожного макету є прямі посилання на шрифти в Google Fonts, де їх можна вивчити та завантажити. Колірні схеми позначені HEX-кодами.
За передплату на сайті надсилають безкоштовну pdf-книгу з 25 готовими типографічними комбінаціями. У цьому збірнику лише шрифтові пари, заголовки та тексти — без колірних схем та демонстраційних компонентів.
Макети карток зі шрифтовими парами за фільтром «оранжевий колір».
Fonts In Use
Fonts In Use – публічна бібліотека графічного дизайну та дуже великий архів світової типографіки. Цей проект для будь-якого дизайнера — підручник із застосування шрифтів та їх комбінацій у всіх галузях. Тут немає генератора пар — лише велика база типографічних рішень справжніх дизайнерських завдань.
Перевага
Шрифти та їх комбінації показані на реальних продуктах – виданнях, етикетках, упаковках, лендингах, марках, обкладинках музичних альбомів.
Особливості
Всі дизайнерські продукти проіндексовані за темами, форматами, назвами, типами, періодами. Також можна шукати шрифти за студіями та авторами: наприклад, в архіві є роботи Іллі Рудермана та Юрія Остроменцького.
До Fonts In Use варто звертатися за референсами та натхненням;
Використовуйте архів для дослідження: наприклад, вивчайте прицільно, які комбінації підходять для дитячих товарів.
Приклади графічних робіт із шрифтом Graphik та парами до нього.
Adobe Fonts
Бібліотека Adobe Fonts належить до платного пакету Adobe Creative Cloud. Він дає доступ до 20 000 шрифтів і дозволяє в один клік інтегрувати їх у всі програми Adobe.
Перевага
Якщо є підписка Adobe Creative Cloud, то додатково не потрібно купувати шрифти.
Особливості
Окремого інструменту для комбінації шрифтів у Adobe Fonts немає, однак у розділі «Рекомендації» наведено приклади пар. Незручність у тому, що фільтр на них не поставити — щоб знайти підходящу, доведеться перегортати картки окремих шрифтів і шрифтових сімейств.
Зверніть увагу: не до всіх родин підібрані пари. Але чим більша родина, тим вища ймовірність, що в його картці знайдуться рекомендації щодо поєднань.
У розділі «Набори шрифтів» є тематичні комбінації: добірки об'єднані за завданнями, настроями, сценаріями використання. Наприклад, зі шрифтів пакету для ретроглемпінгу можна зібрати пари або тріади для оформлення блогу про подорожі.
Adobe Fonts пропонує поєднувати шрифт Ethnocentric з Termina, Forma або Grenadine для оформлення тексту у стилі «мета».