Як вибрати шрифт для сайту
- Різновиди шрифтів для сайту
- Які шрифти актуальні сьогодні?
- Характер і настрій шрифту
- Шукаємо правильні поєднання шрифтів для сайту
- Корисні інструменти в роботі зі шрифтами
При першому знайомстві з будь-яким сайтом ключову роль грає дизайн.
Шрифт, як його складова, може спростити сприйняття сайту і інформації на ньому для нового користувача або, навпаки, ускладнити.
Дослідження показали, що багато людей не читають текст на сайті цілком, а тільки проглядають (сканують) інформацію.
Результати айтрекінга доводять, що велика частина респондентів під час перегляду веб-сторінок читає інформацію за шаблоном букви F.
Іншими словами, люди звертають увагу на ті написи, які, якщо подумки накреслити латинську букву F, розташовані на двох горизонтальних і однієї вертикальної лініях. Якщо текст в цій області буде читабельним, а інформація правильно структурована за важливістю - користувач з більшою часткою ймовірності вирішить залишитися на сайті. В іншому випадку відвідувач поспішить покинути сторінку і перейти до наступних результатів пошуку.
Різновиди шрифтів для сайту
Перш, ніж перейти до вибору шрифтових поєднань, потрібно знати, з чого вибирати. Всі шрифти діляться на дві основні категорії: рукописні і друковані. Рукописні шрифти мають оригінальний вигляд, серед них є персоналізовані (наприклад, шрифт Кафки, Пікассо, Сезанна). Їх використовують дизайнери для оформлення заголовків, логотипів. В якості основного шрифту для тексту вони не підходять, оскільки ускладнюють читання і сприйняття. Тут естафету у них переймають друковані шрифти. Їх поділяють на три групи:
- Шрифти із зарубками. Вони полегшують читання друкованих видань, візуально окреслюючи рядки. Але в веб-дизайні вони швидше ускладнюють сприйняття і розсіюють увагу читача. Основне призначення таких шрифтів - використання в логотипах, виділення заголовків і важливої інформації на сторінці.
- Рубані. Шрифти нейтрального характеру, без зарубок. Підходять для заголовків, параграфів, основного тексту.
- Декоративні. Вони виглядають оригінально, яскраво. Такі шрифти відмінно підійдуть для молодіжних сайтів і будь-якої тематики, пов'язаної з творчістю. Але застосовувати їх потрібно дуже обережно: текст, написаний декоративним шрифтом, складний для читання. Найчастіше їх використовують для створення логотипів та виділення заголовків.
Які шрифти актуальні сьогодні?
В оформленні сайтів сучасні дизайнери віддають перевагу шрифтів Google Fonts, оскільки:
- вони якісні і прості у використанні;
- з ними не виникає проблем при верстці;
- великий вибір, база шрифтів розширюється, додаються нові;
- будь-який шрифт Google Fonts коректно відображається при відкритті сторінок будь-яким браузером.
Вибираючи шрифти в Google Fonts, важливо перевіряти наявність кириличних символів: вони є приблизно в кожному десятому шрифті.
Але навіть з урахуванням кирилиці для оформлення веб-сторінок підійде далеко не кожен варіант. Розглянемо рейтинг найпопулярніших шрифтів для сайту з Google Fonts в 2018 році:
- Open Sans. Нейтральний і легкий для сприйняття шрифт, зручний для читання, прекрасно поєднується з багатьма іншими (наприклад, Jubilat). Дизайнери «Бізнес Сайт» на базі Open Sans розробляли оформлення сайтів для студії граціозно спорту (http://gracebody.com.ua/), міжнародної платіжної системи (https://tyme.ua/), інтернет-магазину для гоління (https : //buymach.com/).
- Lora. Читабельний і чіткий шрифт. Використовується в різних накресленнях і насиченості як для основного тексту, так і для заголовків і параграфів. Цей шрифт не такий типовий і впізнаваний, як попередній, чим і заслужив прихильність дизайнерів.
- Roboto. Легко читається навіть в маленькому розмірі і прекрасно працює в парі з іншими кириличними шрифтами Google Fonts. Roboto був узятий за основу при розробці веб-студією «Бізнес Сайт» інтернет-магазину «Світ клею» https://mirkleya.com.ua/.
- PT Sans - один з найбільш затребуваних і універсальних шрифтів. Легко читається в розмірі 14-26 пунктів. При відповідному виборі накреслень і розміру підійде для основного тексту і заголовків.
- 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 - таблиця-шпаргалка по сполучуваності шрифтів для веб-дизайнерів.
Якщо хочете заощадити час, замовляйте розробку сайту під ключ, дизайн, редизайн сайту у професіоналів веб-студії «Бізнес Сайт».
Які шрифти актуальні сьогодні?