Що таке шрифти
Шрифт задає тон дизайну: від нього залежить, наскільки легко читається текст, яке враження справляє проєкт і чи запам’ятовується бренд. Нижче — основні види шрифтів і те, де кожен із них доречний.
У щоденній мові «шрифтом» називають будь-яке накреслення літер. Дизайнери розрізняють два поняття: гарнітура — сім’я з єдиним задумом (наприклад, Roboto), а шрифт — конкретне накреслення й розмір (Roboto Bold 16 px). У статті слово «шрифт» вжито в обох значеннях.
Шрифт впливає на читабельність, емоції та брендинг. Times New Roman асоціюється з офіційністю, Futura — з інноваціями, а Comic Sans у діловій пропозиції сприймається як несерйозний.
Основні типи шрифтів
Засічкові шрифти (Serif)
Засічкові шрифти (Times New Roman, Georgia, Garamond) мають штрихи-засічки на кінцях літер. Вони асоціюються з традицією й надійністю, тому їх використовують у книгах, журналах і офіційних документах. Твердження, що засічки «ведуть погляд уздовж рядка», дослідженнями не підтверджене: на читабельність сильніше впливають розмір і міжрядковий інтервал.
Беззасічкові шрифти (Sans-serif)
Беззасічкові шрифти (Arial, Helvetica, Roboto, Inter) мають чистий сучасний вигляд. Вони добре читаються на екранах, тому це основний вибір для сайтів, застосунків і інтерфейсів.
Моноширинні шрифти (Monospace)
Моноширинні шрифти (Courier, Consolas, Fira Code) мають однакову ширину всіх символів. Їх створили для коду й технічної документації, де важливе вирівнювання.
Рукописні шрифти (Script)
Рукописні шрифти (Pacifico, Brush Script, Great Vibes) імітують письмо від руки. Вони додають тепла логотипам, запрошенням і листівкам, але для основного тексту складні для читання.
Декоративні шрифти (Display)
Декоративні шрифти (Lobster, Impact, Bebas Neue) створені, щоб привертати увагу. Їх використовують у заголовках і банерах, а в довгих текстах вони швидко втомлюють очі.
Популярні шрифти у вебдизайні
- Arial: простий і читабельний, встановлений у Windows і macOS.
- Roboto: розроблений Google, має ваги від 100 до 900.
- Inter: створений спеціально для екранів, улюблений у стартапах і технологічних продуктах.
- Open Sans: універсальний шрифт із підтримкою кирилиці.
Де взяти шрифти
- Google Fonts: безкоштовна бібліотека під відкритими ліцензіями, багато шрифтів із кирилицею.
- MyFonts: платні й безкоштовні шрифти для унікальних проєктів.
- FontPair: готові пари шрифтів, наприклад Roboto і Lora.
Будьте обережні з сайтами «безкоштовних шрифтів»: вони часто викладають комерційні гарнітури без дозволу правовласника. Якщо ліцензія не вказана — шукайте шрифт в офіційному джерелі.
Як обрати шрифт
- Мета: засічкові шрифти пасують довгим текстам і документам, беззасічкові — інтерфейсам і коротким повідомленням.
- Аудиторія: молодь охочіше сприймає сучасні беззасічкові шрифти, старша аудиторія цінує класичні форми.
- Читабельність: для вебу — 16–18 px, для друку — 10–12 pt, міжрядковий інтервал — 130–150%.
- Не більше двох шрифтів: один для заголовків, інший для тексту.
- Акценти вагою: для виділення використовуйте товщину шрифту, а не капслок, тіні чи 3D-ефекти.
Контраст і колір тексту
Стандарт вебдоступності WCAG (рівень AA) вимагає контрасту 4.5:1 для звичайного тексту та 3:1 для великого. Перевірити можна в WebAIM Contrast Checker. Світло-сірий текст на білому може виглядати мінімалістично, але для людей із вадами зору він стає бар’єром.
Технічні поради
- Для сайту беріть WOFF2: той самий шрифт, але з меншим файлом. OTF і TTF залишайте для роботи в програмах.
- Перевіряйте кирилицю: літери ї, є, і, ґ мають відображатися коректно. Популярний Lato у Google Fonts кирилиці не має.
- Не зловживайте шрифтами: два файли зазвичай достатньо.
Як підключити шрифти на сайті, налаштувати font-display і preload, читайте в статті Як підключити шрифти на сайті.
Поширені помилки
- Невідповідний шрифт: Comic Sans у серйозному проєкті виглядає несерйозно.
- Дрібний текст: менше 14 px ускладнює читання на смартфонах.
- Низький контраст: блідий текст на світлому тлі стає невидимим для частини людей.
- Шрифт без кирилиці: частина літер відобразиться іншим шрифтом або квадратиками.
- Декоративний шрифт для абзаців: виразні гарнітури добрі в заголовках, але в тексті швидко стомлюють.
Висновок
Обирайте шрифт під мету, аудиторію й мову проєкту, стежте за контрастом і кирилицею. Тоді текст працюватиме на вашу ідею, а не заважатиме їй.
