Шрифти в дизайні: як обрати і поєднувати

Крок 1

Визначте, для чого шрифт

Шрифт обирають не «за красою», а під роль у макеті. Довідник Google Fonts Knowledge наводить простий приклад: вигадливий рукописний шрифт може чудово виглядати в логотипі, але навряд чи підійде для основного тексту. Спершу дайте відповідь на три питання:

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

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

Крок 2

Розберіться з базовими типами

Для старту вистачить чотирьох груп. Із засічками (serif) — літери мають маленькі «поперечки» на кінцях штрихів, часто асоціюються з класикою й книжками. Без засічок (sans serif) — нейтральні й поширені в інтерфейсах. Моноширинні — усі знаки однакової ширини, їх беруть для коду й технічних даних. Акцидентні (display) — виразні шрифти для великих заголовків, але не для абзаців. Від типу залежить тон макета ще до того, як людина прочитає хоч слово.

Крок 3

Перевірте шрифт до того, як закохатися

Google Fonts Knowledge радить пройтися чек-листом, перш ніж брати шрифт у роботу. Для початківця найважливіше:

• •кирилиця: у Google Fonts є фільтр за мовою; перевірте українські літери ґ, є, і, ї та апостроф;
• •накреслення: щонайменше звичайне, курсив і жирне; що більше насиченостей, то легше будувати ієрархію;
• •розбірливість: порівняйте велику «I», малу «l» і цифру «1», щоб вони не зливалися;
• •ліцензія: шрифти Google Fonts безкоштовні й дозволені для комерційного використання, а платні шрифти мають власні умови — читайте їх до здачі проєкту.

Крок 4

Поєднуйте шрифти обережно

Спершу спитайте себе, чи потрібен другий шрифт узагалі. Google Fonts Knowledge формулює правило так: додавайте другий шрифт, лише якщо він може зробити те, чого не може основний, наприклад дати курсив, якого немає, чи змінити тон для цитат і даних. Головна складність — знайти шрифт, достатньо відмінний, але не надто. Коли вагаєтеся, поєднуйте шрифт із засічками та без засічок або беріть шрифти з однієї суперсім'ї. Приклади пар із кирилицею в Google Fonts:

• •Roboto і Roboto Slab;
• •Noto Sans і Noto Serif;
• •IBM Plex Sans і IBM Plex Serif;
• •Nunito і Nunito Sans.

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

Крок 5

Налаштуйте читабельність

Навіть добрий шрифт можна зіпсувати набором. Butterick's Practical Typography дає орієнтири, від яких зручно відштовхуватися:

• •довжина рядка — у середньому 45–90 знаків разом із пробілами;
• •міжрядковий інтервал для основного тексту — 120–145% від розміру шрифту;
• •основний текст — 10–12 пунктів у друці та 15–25 пікселів на екрані;
• •великі літери — для коротких фрагментів до одного рядка, а не для абзаців.

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