top of page

9 трендових поєднань шрифтів

Здається, що тренди в типографіці змінюються швидше, ніж в інших сферах.


Довгий час дизайнери сайтів вибирали виключно шрифти без засічок. Але такий підхід безнадійно застарів!


На сьогоднішній день існує безліч різноманітних шрифтів, які відкривають перед нами набагато більше можливостей: ми можемо комбінувати їх, створювати цікаві дизайн-проекти та візуал.


Ми розглянемо трендові поєднання шрифтів із прикладами. Тут ви знайдете цілу добірку різних гарнітур та гарних рішень.


Що таке шрифтова пара?

Шрифтова пара — поєднання різних шрифтів у певному проекті. Хоча тут і використовується термін “пара”, може йтися про будь-яку кількість.


Хороша комбінація - зазвичай не більше 2 або 3 гарнітур - повинна бути гармонійною, але досить контрастною. Найчастіше шрифти передають схожий настрій та доповнюють один одного. І тут вони привертають увагу користувачів до повідомлення, але з змагаються між собою.


Будь-яке поєднання повинно включати лише один незвичайний, екстравагантний або шрифт, що викликає. Такий підхід дозволить зробити типографіку читабельною та збалансованою.


1. Рукописний акцент у поєднанні з будь-яким іншим шрифтом

Один із актуальних дизайн-трендів — використовувати фотографії та відео, які виглядають автентично та викликають емоції. Таку ж мету має й типографіка. Рукописні акценти чудово поєднуються практично з будь-яким іншим стилем типографіки та дозволяють зробити дизайн особливим.


На сайті, скріншот якого представлений вище, рукописний шрифт анімований таким чином, щоб користувачам здавалося, що хтось пише слова в режимі реального часу. Це посилює ефект, який створюється за допомогою розміщення рукописного шрифту поверх основного. (Ми не часто зустрічаємо подібні рішення!)


Інтерфейс виглядає ще унікальнішим завдяки невеликим намальованим акцентним штрихам, які з'являються, коли відвідувач наводить курсор миші на той чи інший пункт навігації.


Насправді дизайнер використовує тут 3 шрифти: шрифт із засічками для заголовків та ключових слів, рукописний акцентний шрифт та шрифт без засічок для пунктів меню.


2. Один шрифт із градієнтом

Ще один тренд — поєднання одноколірного тексту та тексту з градієнтною заливкою, набраних одним і тим самим шрифтом.


Раніше важко було уявити, що шрифт з градієнтом може стати популярним елементом дизайну, проте цей ефект тепер зустрічається всюди. Дизайнери використовують його для великого тексту, кнопок, з анімацією та без неї.


У прикладі вище градієнт нагадує рідину, яка плавно перетікає з однієї літери до іншої.


Найчастіше подібна заливка застосовується для великих або великих букв, але цей сайт - приклад того, що вона може виглядати ефектно і в комбінації з тонким, маленьким шрифтом. Результат виглядає делікатніше і не перевантажує дизайн.


3. Шрифт із засічками для заголовка + шрифт без засічок для другорядних елементів

Цей тренд є повною протилежністю традиційному підходу: використовуйте для заголовка шрифт із засічками, а для другорядних текстових елементів — великі літери та шрифт без засічок.


Ця шрифтова пара буде ефективною, якщо інтерфейс включає велику типографіку та мінімальну кількість слів та фраз. Слід пам'ятати, що текст, який складається з великих літер, важко читати, якщо його забагато.


Спробуйте застосувати цей прийом до короткого заголовка та другорядного тексту, що займає один рядок, як у прикладі. Уважно вибирайте слова та шрифт, щоб великі літери не виглядали занадто масивно. Тут підійде звичайне (regular) чи середнє (medium) зображення.


Крім того, це рішення найкраще працює, коли темний шрифт розміщується на світлому фоні. У цьому випадку відвідувачам буде найпростіше побачити та прочитати текст.


4. Контурний шрифт + шрифт із заливкою

Один із головних трендів у сучасній типографіці — контурні шрифти. Здається, вони всюди!


Поєднання прозорого шрифту та фонового зображення, як у прикладі вище, може виглядати незвичайно та ефектно. Перше, що впадає у вічі, — контурний шрифт, але літери із заливкою також відіграють важливу роль.


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


Використовуйте контурний шрифт у поєднанні із заповненим, щоб відвідувачам було простіше прочитати текст. Зазвичай можна обійтися одним шрифтом, що дозволяє створити ефект "інь та янь".


Для найважливіших слів вибирайте шрифт із заливкою, а контурний залиште для додаткового тексту. (Дотримуйтесь цього правила, навіть якщо контурний шрифт займає в дизайні більше простору.)


Зверніть увагу: незалежно від того, в якому обсязі в дизайні використовується контурний шрифт, він завжди матиме меншу візуальну вагу, ніж заповнений. З цієї причини багато дизайнерів додають в інтерфейс удвічі більше тексту з прозорою заливкою і, отже, заповнені слова мають максимальний вплив на відвідувачів.


Ще одна приємна особливість зазначеної шрифтової пари - вам потрібно знайти лише один підходящий шрифт, що включає обидва стилі. Це значно полегшує роботу з типографікою.


5. Великий шрифт із засічками + великий шрифт без засічок

Великі шрифти виглядають красиво, особливо у поєднанні один з одним. Зараз у тренді комбінація великих шрифтів із засічками та без. Цей варіант виглядає особливо ефектно, якщо дизайнер додає третій рядок меншого розміру, набраний першим або другим шрифтом із пари.


Так створюється вражаючий ефект багатошарової типографіки. При цьому ви можете використовувати у проекті мінімальну кількість шрифтів.


Пам'ятайте, що контрастне поєднання шрифтів – це самостійний дизайнерський прийом, тому зведіть до мінімуму інші ефекти, якщо ви вибрали цю техніку.


Нарешті, придивіться до якогось сучасного шрифту з товстими та тонкими штрихами. Це додасть дизайну додаткову елегантність та витонченість.


6. Експериментальний шрифт + нейтральний шрифт без засічок

Експериментальні шрифти користуються популярністю. (І тут ми справді можемо проявити фантазію.)


Комбінуйте незвичайні декоративні шрифти з нейтральними шрифтами без засічок. Шукайте варіант із середнім накресленням (medium) та середньою висотою літер.


Не використовуйте занадто тонкі або вузькі шрифти, оскільки вони можуть відволікати користувачів від експериментального шрифту. Шукайте варіанти з літерами подібної форми. У цьому випадку декоративний шрифт допоможе зробити типографіку, як і дизайн, що запам'ятовуються.


7. Величезний шрифт без засічок + менший шрифт без засічок

Коли справа доходить до пошуку відповідних шрифтів, ви навряд чи зупинитеся на комбінації двох варіантів без засічок різного розміру: більшого і меншого. Однак такий підхід дозволяє створити багатошарову типографіку, яка відіграє роль одночасно художнього та інформаційного елемента дизайну.


І хоча це звучить трохи шалено, результат може вийти абсолютно приголомшливим.


Хитрість у тому, щоб вибрати прості шрифти, зробити кількість великого тексту мінімальною та використовувати в інтерфейсі прості візуальні рішення.


Дизайнер сайту вище відмінно впорався із завданням: яскраве тло, величезна назва (“Oh”) та простий текст, який інформує відвідувачів про призначення та цілі сайту, розміщений поверх великого напису.


8. Поєднання різних стилів одного шрифту без засічок

Іноді вам взагалі не обов'язково підбирати шрифтову пару. Просто використовуйте кілька стилів одного шрифту, і ви досягнете потрібного ефекту.


Це досить популярний підхід, оскільки він дозволяє створити простий сприйняття сайт, всі текстові елементи якого гармонійно поєднуються.


Як зробити все правильно? Додайте в інтерфейс комбінацію найбільш контрастних стилів, щоб різниця між шрифтами була очевидною. Ви не помилитеся, якщо використовуєте поєднання жирного (bold) або наджирного (black) і звичайного (regular) або тонкого (light) контурів.


9. Яскравий шрифт + стримані акценти

Іноді тренд полягає не в поєднанні конкретних типів шрифтів, а в тому, щоб досягти певного відчуття, яке виникатиме при взаємодії з типографікою. Зараз ми часто зустрічаємо наступну комбінацію — основний яскравий, оригінальний шрифт та шрифт спокійніший (наприклад, рукописний).


Відмінний приклад - сайт Arts District Kitchen. Основний заголовок набраний масивним брусковим шрифтом з цікавими лініями та формами. Літери мають сильний характер. Крім того, вони виглядають грубувато та пофарбовані в незвичайний колір – все це робить дизайн екстравагантним та оригінальним.


При цьому для слова "with" (с) було обрано простий рукописний шрифт. Цей маленький акцент привертає увагу до типографіки та повідомлення бренду загалом. Ще одна перевага? Стриманий рукописний шрифт не виглядає надто жіночним і робить брендинг узгодженим, адже він також використовується у логотипі компанії.


Висновок

Пошук відповідної шрифтової пари – веселе заняття. Граючи з різними комбінаціями, ви можете додавати нові значення у свої дизайн-проекти.


Просто пам'ятайте про деякі “золоті правила” роботи зі шрифтами:

  • Не використовуйте більше 2-3 шрифтів

  • Шукайте шрифти, які доповнюють один одного за стилем

  • Завжди вибирайте хоча б один читабельний шрифт


Джерело: designshack.net

bottom of page