Какой шрифт лучше выбрать для сайта? Пример из жизни

Есть ряд важных правил по выбору правильных шрифтов и цветов для сайта. О них забывают многие, очень многие, "креативные" дизайнеры. А заказчики сайтов эти правила зачастую не знают.

Результат почти всегда получается удручающим. 

С одной стороны, "дизайнерский" сайт выглядит довольно красивым.
Но, странное дело! 

Клиенты не звонят, посетители на сайте заходят и стараются уйти как можно быстрее.

В чем же причина?

Часто, причина кроется в элементарных ошибках в выборе шрифтов.

Вот 3 простых правила выбора шрифтов для сайта

 и один "горький" пример из жизни:

1. Используйте безопасные шрифты. 

Что это такое?

Для большинства кириллических шрифтов операционной системы Windows нет аналогов в Mac OS и Linux\Unix системах. 

Это приводит к непредсказуемым результатам вывода текста в различных браузерах.

Близкие соответствия в других системах есть только для следующего списка безопасных шрифтов из Windows:

• Arial Black
• Arial
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Все! 

Остальными шрифтами лучше вообще не пользоваться на сайте.

Последние данные опросов пользователей показали, что наиболее комфортным для основного текста на сайте является шрифт Verdana.

В этом блоге используется шрифт Georgia, который так же высоко оценивается пользователями, но имеет своеобразный вывод цифр: 1234567890, не очень подходящий для бизнес сайтов.

2. Используйте контрастные, читаемые варианты сочетаний цветов. 

Можно ограничиться стандартным вариантом Черного текста на Белом фоне.

Или воспользоваться еще более контрастными "рекламными" сочетаниями цветов :

• черный текст на желтом фоне
• синий текст на белом фоне
• белый текст на синем фоне
• зеленый текст на белом фоне
• красный текст на белом фоне

Кстати! Черный текст на белом фоне только шестой по степени контрастности. Сюрприз?

Но! Никогда не ведитесь на стандартный дизайнерский вариант:

Серый текст на сером фоне. 

Он призван подчеркнуть красивые дизайнерские картинки, и отвлечь внимание от чтения текстов на сайте.
Часто такой прием применяется дизайнерами не осознанно, но в интернете полно сайтов с серыми текстами на сером фоне. О результатах такого использования серого ниже в примере из жизни.

3. Используйте шрифт достаточно большого размера. 

Не заставляйте читателя страдать, разбирая что же написано на сайте. 

Минимально приемлемый размер шрифта - 10 пунктов, а лучше от 12 до 16 пунктов.

---------------------------------------------------------------------------------------------------

А теперь, обещанный пример из практики:

Берем Корпоративный сайт. Красивый, наполнен осмысленными и тематическими текстами, содержит много полезной, а часто даже уникальной информации.
Но!
Посетители просматривают всего 2.4 страницы и проводят на сайте чуть больше  минуты!!!

И еще контент-менеджеры жалуются, что у них начинает болеть голова во время работы с этим сайтом.

При этом, основной текст на сайте был написан шрифтом 8 пунктов, темно серым цветом на светло сером фоне. примерно как в этом куске текста. Вроде ничего страшного, но приглядитесь чуть дольше... 

прочитали?

Поставили эксперимент - увеличили размер шрифта до 10ки, тон фона осветлили до белого, а текст сделали чисто черным.

Результат изменения поведения посетителей на картинке:

Просмотры выросли до 2.8 страницы на посетителя, а время до 1.8 минуты!
И усталость от сайта пропала.

Общий рост эффективности сайта составил  30%.

И это, всего лишь из-за выбора правильного размера шрифта и цвета текста! 

Вот такое вот простое улучшение  "Usability" за счет правильного выбора шрифтов для сайта! 

Верстку, кстати, при этом менять не пришлось. Все вписалось в старый дизайн.

---------------------------------------------------------------------------------------------------

Вывод:

Следуйте 3м правилам выбора шрифтов для сайта из этой статьи и Вы избавитесь от  неприятных неожиданностей с Вашим сайтом.


Еще статьи по теме usability

Как посетители видят веб сайт? 15 интересных фактов.

Как удержать посетителя на сайте?

Как повысить конверсию сайта? Формы обратной связи