1. Різновиди шрифтів для сайту
2. Які шрифти актуальні сьогодні?
3. Характер і настрій шрифту
4. Шукаємо правильні поєднання шрифтів для сайту
5. Корисні інструменти в роботі зі шрифтами

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

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

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

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

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

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

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

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

Які шрифти актуальні сьогодні?

В оформленні сайтів сучасні дизайнери віддають перевагу шрифтів Google Fonts, оскільки:

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

Вибираючи шрифти в Google Fonts, важливо перевіряти наявність кириличних символів: вони є приблизно в кожному десятому шрифті.

Але навіть з урахуванням кирилиці для оформлення веб-сторінок підійде далеко не кожен варіант. Розглянемо рейтинг найпопулярніших шрифтів для сайту з Google Fonts в 2018 році:

1. Open Sans. Нейтральний і легкий для сприйняття шрифт, зручний для читання, прекрасно поєднується з багатьма іншими (наприклад, Jubilat). Дизайнери «Бізнес Сайт» на базі Open Sans розробляли оформлення сайтів для студії граціозно спорту (http://gracebody.com.ua/), міжнародної платіжної системи (https://tyme.ua/), інтернет-магазину для гоління (https : //buymach.com/).
2. Lora. Читабельний і чіткий шрифт. Використовується в різних накресленнях і насиченості як для основного тексту, так і для заголовків і параграфів. Цей шрифт не такий типовий і впізнаваний, як попередній, чим і заслужив прихильність дизайнерів.
3. Roboto. Легко читається навіть в маленькому розмірі і прекрасно працює в парі з іншими кириличними шрифтами Google Fonts. Roboto був узятий за основу при розробці веб-студією «Бізнес Сайт» інтернет-магазину «Світ клею» https://mirkleya.com.ua/.

4. PT Sans - один з найбільш затребуваних і універсальних шрифтів. Легко читається в розмірі 14-26 пунктів. При відповідному виборі накреслень і розміру підійде для основного тексту і заголовків.
5. Ubuntu. М'який шрифт, викликає прихильність до себе відвідувача сторінки. Використаний в дизайні сайту веб-студії https://www.site2b.com.ua/, де забезпечив читабельність тексту маленького розміру і легке сприйняття заголовків.

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

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

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

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

Характер шрифтів особливо важливо враховувати при створенні поєднань заголовок + текст.

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

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

Приблизно 90% користувачів не звертають уваги на шрифт, який використовується на сайті.

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

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

Зробити це правильно допомагають такі правила:

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

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

Використання попередніх поєднання шрифтів за допомогою онлайн-сервісів:

• Google Type http://femmebot.github.io/google-type/: велика кількість шрифтових пар, підібраних дизайнерами.
• Type Genius https://www.canva.com/font-combinations/: вводите основний шрифт і отримуйте відповідну пару.
• Font Combinator https://www.typotheque.com/fonts/fedra_serif_display, простий у використанні сервіс, дозволяє вибирати і гарнітуру і тип шрифту для заголовків і основного тексту серед гармоніюють між собою варіантів.
• Font Pair https://fontpair.co/: підбирайте шрифтову пару по вступним характеристикам і завантажуйте їх на свій комп'ютер.
• The Art of Mixing Typefaces https://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html - таблиця-шпаргалка по сполучуваності шрифтів для веб-дизайнерів.

Якщо хочете заощадити час, замовляйте розробку сайту під ключ, дизайн, редизайн сайту у професіоналів веб-студії «Бізнес Сайт».