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

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

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

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

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

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

Вот 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
Как повысить конверсию сайта? Формы обратной связи



13 комментариев:

  1. спасибо большое!
    пригодилось!

    ОтветитьУдалить
  2. Не мог не отписаться, мне как дизайнеру и веб разработчику с большим стажем - статья не понравилась. Это мое ИМХО но, возможно это будет вам полезно:

    Шрифты:
    Хорошо сделанный сайт должен использовать подключаемые шрифты в css, а как альтернативу - брать из списка безопасных шрифтов.
    Кстати, ваше комбинирование шрифтов с засечками и без на сайте - плохой тон. Да и вообще от шрифтов с засечками на сайте надо либо избавляться либо использовать крайне осторожно.

    Сочетания цветов - из раздела китайских сайтов и начала развития веба. Если уж говорить о сочетаемости цветов, то есть от адоба веб приложение - Adobe Kuler.

    Надеюсь, что смог направить вас в нужную сторону. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Коллега, я полностью поддерживаю ваш комментарий. Эта статья действительно устарела лет на -дцать, когда чем больше блестящих, вырвиглазных и движущихся элементов огромного размера было больше - тем было лучше.
      Некоторым не надо иметь специального образования, чтобы понимать - что красиво, а что выглядит конкретно плохо, вызывающе и пошло. Тут дела обстоят не так хорошо.

      Удалить
    2. Ангелика, спасибо за комментарий! Я бы еще раз обратил внимание не только на субъективный взгляд, а на данные статистики конкретного сайта и А/Б тестирование, которые показывают, что чем проще компоновка и читабельнее текст, тем лучше для конверсии.

      И есть просто психология восприятия цвета от которой никуда не денешься.

      В данной статье нету ничего о графических элементах - я в них не очень хорошо понимаю и не готов комментировать. Здесь речь идет только о тексте.

      Удалить
  3. Александр, спасибо за комментарий!

    Тут вопрос постановки задачи - если рисуется красивый "Дизайнерский" сайт, я полностью согласен с вашей точкой зрения.

    Если нужна отдача от инвестиций в сайт - лучше воспользоваться опытом моих ошибок, который описан в статье.

    К сожалению, по статистике лучшую конверсию дают далеко не самые красивые сайты.

    А по шрифтам с засечками на этом сайте - у меня к ним историческая личная привязанность, но зоопарк шрифтов это всегда минус, нужно будет поправить, спасибо! :-)

    ОтветитьУдалить
  4. Все, сдался!
    Взял более читабельный шаблон и поменял шрифт на Verdana. Georgia конечно красив, но не подошел для текстов с большим количеством цифр - полная фигня получается.

    ОтветитьУдалить
  5. Сейчас верстаю свой сайт (новая редакция, старый весь сделан в "вердане"), хочу для текста применить "Academy Italic", он курсивный, а для меню "Pump", уж очень красив. Как Вы думаете, стоит ли менять "вердану", т.к. сайт по своим запросам в ТОП 5 в гугле.

    ОтветитьУдалить
  6. Кстати, Вы с Georgia не ушли, цифра 5 отображается в нижнем регистре.

    ОтветитьУдалить
  7. Да, вернулся на Georgia - с ней глубина просмотра выше. Что касается других шрифтов - почему бы не попробовать, главное что бы глубина просмотра и время на сайте не упала, причем для всех основных типов устройств и браузеров

    ОтветитьУдалить
  8. Для этого придумали html5 шаблон , скачал и там все понятно и без всяких инструкций

    ОтветитьУдалить