Як вибрати шрифт для сайту

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

Як люди читають в інтернеті

Дослідження «Як люди читають в інтернеті», опубліковане американською компанією Nielsen Norman Group у 2020 році, говорить про те, що люди віддають перевагу скануванню сторінок очима, перш ніж вирішують прочитати текст уважно. Сканування відбувається за різними паттернами, але майже завжди погляд читаючого ковзає по заголовках.

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

Різновиди шрифтів для сайту

Перш ніж переходити до вибору шрифтових поєднань, потрібно знати, з чого вибирати. За способом написання шрифти поділяються на рукописні та друкарські. Рукописні шрифти мають оригінальний вигляд, серед них є персоналізовані (наприклад, шрифт Кафки, Пікассо, Сезанна). Їх використовують дизайнери для оформлення заголовків, логотипів. Як основний шрифт для тексту вони не підходять, оскільки ускладнюють читання та сприйняття. Тут естафету у них переймають друкарські шрифти. Їх поділяють на три групи:

1. Шрифти з зарубками. Вони полегшують читання друкованих видань, візуально окреслюючи рядки. Але у веб-дизайні вони скоріше ускладнюють сприйняття та розсіюють увагу читача. Основне призначення таких шрифтів – використання в логотипах, виділення заголовків та важливої інформації на сторінці.
2. Рубані. Шрифти нейтрального характеру, без зарубок. Підходять для заголовків, параграфів, основного тексту.
3. Декоративні. Виглядають оригінально, яскраво. Такі шрифти чудово підходять для молодіжних сайтів та будь-якої тематики, пов’язаної з творчістю. Але застосовувати їх потрібно дуже обережно: текст, написаний декоративним шрифтом, складний для читання. Найчастіше їх використовують для створення логотипів та виділення заголовків.

Які шрифти актуальні в 2020-х

В оформленні сайтів дизайнери використовують шрифти, зібрані в колекції Google Fonts.

• Колекція обширна і включає лише якісні безкоштовні шрифти.
• З ними не виникає проблем при верстці — легко підключити бібліотеку і підтягувати з неї будь-який шрифт.
• Бібліотека Google Fonts підтримує різні види сортування вмісту.

У Google Fonts є шрифти для латиниці, кирилиці, ієрогліфічного письма, івриту та арабської. Знаходити потрібні зручно за допомогою фільтрів, а відібрати топові можна в один клік — обравши сортування за популярністю.

Рейтинг найпопулярніших шрифтів Google Fonts початку 2020-х виглядає так:

1. Roboto. Легко читається навіть у маленькому розмірі та чудово працює в парі з іншими кириличними шрифтами Google Fonts.
   
Roboto був взятий за основу при розробці веб-студією «Бізнес Сайт» інтернет-магазину «Світ клею».
2. Open Sans. Ще один універсальний шрифт для довгих текстів і заголовків. Читається в будь-якому розмірі, аж до найменшого, годиться для банерів, презентацій, рекламних креативів.
3. Montserrat. Охайний шрифт в урбаністичному стилі, ідеально підходить для використання в рекламі. Його козир — читабельність. Виглядає він також досить представницько, щоб знайти йому місце в заголовку.

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

Характер і настрій шрифту

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

• Гумористичні замальовки, оформлені гарнітурою Times, визнали смішними на 10% більше читачів, ніж при оформленні Arial.
• Текст, надрукований Baskerville, порівняно з тим же самим, надрукованим Comic Sans, визнали більш переконливим.

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

Якщо в цій парі з’єднати суперечливі одна одній гарнітури, увага читача зосередиться на самих шрифтах, а не на змісті сторінки. Наприклад, якщо заголовок виконано у Franklin Gothic (елегантний, солідний, мужній стиль), а основний текст у Souvenir (легковажний, грайливий), у результаті вийде суперечливе поєднання, яке заважає гармонійному сприйняттю статті. А якщо замінити шрифт заголовка на Futura Bold, картина повністю зміниться: ці два шрифти доповнять один одного завдяки схожості елементів і не створять зайвого напруження.

Вплив шрифтів на конверсію і SEO: Аналіз і приклади

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

1. Вплив на конверсію
   Читабельність і зручність сприйняття — це одні з головних факторів, що впливають на конверсію сайту. Дослідження показують, що користувачі швидше приймають рішення на сайтах, де текст легко читається і візуально привабливий.
   Наприклад, A/B тестування на сайті електронної комерції може продемонструвати, що простий перехід з одного шрифту на інший, більш читабельний, може збільшити конверсію на 10-20%. Причина цього в тому, що користувачам легше сприймати інформацію, вони швидше знаходять потрібні товари і легше орієнтуються по сайту.

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



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

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

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



3. Вплив на SEO
   Шрифти впливають на SEO насамперед через поведінкові фактори. Google та інші пошукові системи враховують такі метрики, як час на сторінці, рівень відмов і кількість переглядів сторінок на одного користувача. Всі ці показники можуть покращитися при використанні зручних для читання шрифтів.
   Наприклад, якщо сайт має високий рівень відмов (користувачі залишають сайт одразу після завантаження сторінки), це може сигналізувати пошуковим системам про низьку якість контенту, що призведе до погіршення позицій у видачі.

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

   Деякі декоративні або нестандартні шрифти можуть значно збільшити час завантаження сторінки через великий розмір файлів або необхідність підключати зовнішні бібліотеки.

   Щоб уникнути цього, важливо використовувати веб-оптимізовані шрифти, такі як ті, що представлені в Google Fonts, які спеціально розроблені для швидкого завантаження і мінімального впливу на продуктивність сайту.

Приклади та статистика

• A/B тести: Компанії, які проводять A/B тести, часто виявляють значний вплив зміни шрифтів на ключові метрики. Наприклад, одна відома компанія збільшила конверсію на 14% просто замінивши декоративний шрифт на більш простий і зручний для читання. Це підтверджує гіпотезу, що користувачі швидше виконують цільові дії на сайті, коли шрифт не відволікає їх увагу від основного контенту.



• Дослідження Nielsen Norman Group: Дослідження показали, що використання шрифтів з високим контрастом і чіткими лініями підвищує сприйнятливість тексту і покращує показники залучення користувачів, що в кінцевому підсумку веде до вищих показників часу на сайті і конверсії.
• Дані Google: В дослідженнях Google зазначається, що сайти з добре оптимізованими шрифтами і високою швидкістю завантаження отримують перевагу в пошуковій видачі порівняно з конкурентами, які використовують складні і важкі шрифти.

Шукаємо правильні поєднання шрифтів для сайту

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

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

Завдання дизайнера — пропрацювати всі ці фактори, витримуючи дрес-код тематики сайту.

Секрети правильного підбору шрифтів для сайту від дизайнерів

• Не використовуйте більше 3 шрифтів для оформлення сайту. Більша кількість відволікатиме увагу відвідувачів. До того ж, на підвантаження шрифтів потрібно більше часу, а навіть частки секунди уповільнення швидкості завантаження сторінки негативно позначаються на ефективності пошукового просування і лояльності користувачів.
• Стежте за читабельністю. Коли текст не читається, все інше — не важливо, просто міняйте шрифт. Щоб користувач не покинув сторінку в перші ж секунди після переходу, важливо переконатися, що текстовий контент легко читається і обрані правильні параметри: колірне поєднання, розмір, написання і т.д.
• Використовуйте типографіку логічно. Для цього застосовуються різні гарнітури або той самий шрифт, але з різними параметрами насиченості, розміру, написання. Але так, щоб у виборі була логіка — заголовки не були менші підзаголовків, а основний текст не зливався з підкладкою. Це допомагає відвідувачеві зорієнтуватися на сторінці.
• Стежте за поєднанням шрифтових пар і змінюйте при виникненні найменших сумнівів. Класичні варіанти: шрифт із зарубками + рубаний, поєднання шрифтів різного класу, контрастна насиченість шрифту в заголовку і в основному тексті, поєднання шрифтів різної тональності, яскраве + нейтральне. Оцінити гармонійність типографіки можна прийомом «бокового зору»: направити погляд лівіше або правіше тексту, щоб сприймати картинку в цілому, не читаючи текст.

Корисні інструменти в роботі зі шрифтами

Підберіть вдале поєднання шрифтів для сайту за допомогою онлайн-сервісів:

• Google Type: велика кількість шрифтових пар, підібраних дизайнерами.
• Type Genius: введіть основний шрифт і отримайте відповідну пару.
• Font Combinator, простий у використанні сервіс, дозволяє вибирати і гарнітуру, і тип шрифту для заголовків і основного тексту серед таких, що гармоніюють між собою.
• Font Pair: підбирайте шрифтову пару за обраними в фільтрі характеристиками і завантажуйте їх на свій комп’ютер.
• The Art of Mixing Typefaces – таблиця-шпаргалка по поєднуваності шрифтів для веб-дизайнерів.

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

Замовляйте прототип, дизайн, редизайн сайту або повний цикл розробки сайту під ключ у професіоналів у «Бізнес Сайт». Заповніть форму заявки, ми передзвонимо, проконсультуємо, складемо і надішлемо персональну комерційну пропозицію з привабливими умовами.