Типографіка на сайті: як шрифти впливають на довіру клієнтів
Чому один шрифт викликає довіру, а інший — сумнів, як обрати й налаштувати безкоштовні шрифти з Google Fonts і які поєднання працюють у різних нішах.
Зміст статті
У 2012 році газета The New York Times провела непомітний експеримент. Понад 45 тисяч читачів прочитали той самий абзац і відповіли, чи вірять написаному. Текст був однаковий. Відрізнялося лише одне — шрифт. І один із шести шрифтів переконував помітно краще за інші.
Який саме — розповім нижче. Спершу розберімося, чому шрифт узагалі впливає на рішення клієнта, які шрифти обирати для сайту, як налаштувати навіть найпростіший шрифт так, щоб він виглядав дорого, і де шукати поєднання, які вже перевірені дизайнерами. А в кінці — добірка безкоштовних шрифтів для 8 ніш.
Чому шрифт впливає на довіру
Відвідувач не читає сайт — спершу він його сканує. За перші секунди мозок оцінює, чи виглядає компанія надійною, ще до того, як людина прочитала хоч одне речення. І шрифт — одна з перших речей, які формують це враження.
Стенфордська лабораторія переконливих технологій у масштабному дослідженні довіри до сайтів проаналізувала відгуки понад 2,6 тисячі людей. 46% коментарів про довіру стосувалися зовнішнього вигляду сайту: дизайну, макета, шрифтів, кольорів. Керівник дослідження Бі Джей Фогг підсумував це так: люди судять про надійність за тим, як сайт виглядає.
Шрифт — це голос вашого бренду. Клієнт «чує» його раніше, ніж читає слова.
- Читабельність = повага. Якщо текст важко читати, людина відчуває, що про неї не подумали.
- Послідовність = порядок. Однакові шрифти й розміри по всьому сайту сигналізують: у компанії все під контролем.
- Відповідність = чесність. Шрифт має «говорити» тим самим тоном, що й бізнес. Юридична фірма з мультяшним шрифтом виглядає несерйозно, дитячий центр із суворим — холодно.
Пастка «незвичайного» шрифту
Найпоширеніша помилка, яку я бачу на сайтах малого бізнесу, — бажання виділитися за рахунок шрифту. Рукописний заголовок, декоративні завитки, «технологічний» шрифт для пекарні. Здається, що це робить бренд особливим. Насправді:
- Текст важче читати — людина витрачає зусилля й швидше йде.
- Шрифт не асоціюється з брендом — він просто «гарний», але нічого не говорить про вас.
- Немає кирилиці або українських літер — замість «ї», «є», «ґ» з’являються символи з іншого шрифту, і текст виглядає зламаним.
- Сайт повільніше завантажується — декоративні шрифти часто важкі.
Ще один аргумент на користь читабельності — дослідження Брауна та Adobe, опубліковане у 2022 році: швидкість читання тих самих людей у «найшвидшому» і «найповільнішому» для них шрифті відрізнялася на 35% — без втрати розуміння тексту. Шрифт буквально змінює, скільки людина встигне прочитати, перш ніж ухвалить рішення.
Один, максимум два шрифти
Відкрийте сайти великих брендів — і ви помітите, що там рідко буває більше двох шрифтів. Це не обмеженість, а дисципліна:
- Один шрифт — найпростіший і найнадійніший варіант. Ієрархію створюють розмір, насиченість (вага) і колір. Цей сайт, до речі, зроблений на одному шрифті — Golos Text.
- Два шрифти — один для заголовків (з характером), другий для тексту (максимально читабельний). Класика — поєднання шрифту із засічками та без.
- Три й більше — сайт починає виглядати як колаж, бренд розмивається, а сторінки довше завантажуються.
Кожен новий шрифт на сайті — це ще один голос у розмові з клієнтом. Коли говорять усі одразу, не чути нікого.
І найважливіше: ті самі шрифти мають бути всюди — на сайті, у соцмережах, презентаціях, комерційних пропозиціях і на візитках. Так бренд стає впізнаваним.
Google Fonts: безкоштовна основа для будь-якого бренду
Щоб мати якісну типографіку, не обов’язково купувати шрифти. Google Fonts — бібліотека з тисячами безкоштовних шрифтів під відкритою ліцензією: їх можна використовувати на сайті, у рекламі, соцмережах і друкованих матеріалах без оплати.
Як обрати шрифт за 5 хвилин
- Відкрийте fonts.google.com і у фільтрі мови (Language) оберіть кирилицю або українську.
- У поле попереднього перегляду введіть свій реальний текст — назву компанії, заголовок сайту.
- Обов’язково перевірте українські літери: напишіть «Їжак ґанок єнот і їжа». Якщо якась літера виглядає «чужою» — шрифт не підходить.
- Подивіться, скільки накреслень (ваг) має шрифт: для сайту бажано хоча б 3 — звичайний, середній і жирний.
- Перевірте шрифт на малому розмірі (14–16 px) і на екрані телефону.
Pinterest: як підглянути готові поєднання
Обрали шрифт, але не знаєте, з чим його поєднати й як він виглядатиме в реальному дизайні? Тут на допомогу приходить Pinterest — величезна база референсів від дизайнерів з усього світу.
- Шукайте за назвою шрифту англійською: «Montserrat font pairing», «Playfair Display typography», «Manrope website design».
- Додавайте нішу: «dental website typography», «law firm website fonts», «beauty salon branding fonts».
- Зберігайте референси в окрему дошку — це готовий бриф для дизайнера.
- Звертайте увагу не лише на шрифти, а й на розміри, інтервали й кількість повітря навколо тексту.
Сама сторінка шрифту в Google Fonts теж підказує поєднання — розділ з популярними парами показує, з якими шрифтами його використовують найчастіше.
Секрет: як зробити простий шрифт «дорогим»
Ось що відрізняє професійний сайт від аматорського з тим самим шрифтом. Шрифт можна налаштувати — і саме налаштування дають той «дорогий» вигляд, який люди приписують дизайну.
Приклад із цього сайту: заголовки набрані шрифтом Golos Text з міжлітерним інтервалом −5% і міжрядковим близько 1,0. Той самий безкоштовний шрифт без налаштувань виглядав би значно простіше.
Результат експерименту: який шрифт переконав найкраще
Повернімося до експерименту Еррола Морріса для The New York Times. Читачам показували текст одним із шести шрифтів: Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans і Trebuchet. Переможцем став Baskerville — класичний шрифт із засічками. Люди трохи частіше погоджувалися з твердженням, набраним саме ним.
Чесно: різниця була невеликою, а сам Морріс визнавав, що це не строгий науковий експеримент. Але висновок цілком практичний — класичний, спокійний і добре знайомий шрифт викликає більше довіри, ніж «веселий» чи незвичний. Саме тому банки, юристи й медичні клініки так часто обирають стримані шрифти.
Добірка безкоштовних шрифтів для 8 ніш
Усі шрифти нижче — з Google Fonts, безкоштовні для комерційного використання й підтримують кирилицю. Перед вибором усе одно перевірте українські літери на своєму тексті.
- Універсальні рятівники на будь-яку нішу: Inter, Manrope, Montserrat, Golos Text, Onest. З ними складно помилитися.
- Шрифти з характером (Unbounded, Playfair Display, Cormorant Garamond, Prata) — лише для великих заголовків, не для абзаців.
- Рукописні (наприклад, Caveat) — максимум для одного-двох акцентів, ніколи для основного тексту.
Шрифти і швидкість сайту
Кожен шрифт і кожне накреслення — це окремий файл, який браузер має завантажити. Тому:
- обмежтеся 1–2 шрифтами та 2–3 вагами;
- підключайте лише потрібні набори символів (латиниця + кирилиця);
- розміщуйте файли шрифтів на своєму сервері — так сайт не залежить від сторонніх сервісів і швидше завантажується;
- налаштуйте показ тексту одразу, поки шрифт ще завантажується, щоб сторінка не була порожньою.
Чек-лист типографіки сайту
- Не більше двох шрифтів на сайті.
- Шрифт підтримує кирилицю та літери «ї», «є», «ґ», «і».
- Шрифт відповідає тону бізнесу.
- Основний текст — 16–18 px, міжрядковий інтервал 1,4–1,6.
- Великі заголовки — щільніші: зменшений міжлітерний і міжрядковий інтервал.
- 2–3 ваги на весь сайт.
- Достатній контраст тексту з фоном.
- Ті самі шрифти в соцмережах, презентаціях і документах.
- Сайт перевірено на телефоні.
Висновок
Типографіка — це не про «гарні літери», а про довіру. Читабельний шрифт, що відповідає характеру бізнесу, один-два шрифти на весь бренд і грамотні налаштування інтервалів роблять сайт професійним навіть на безкоштовних шрифтах. А «незвичайність» залиште ідеям і текстам — там вона працює на вас.
Якщо хочете, щоб шрифти, кольори й тексти працювали разом, — почніть зі статті «AI для текстів сайту» або подивіться приклади моїх робіт.
