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

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

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

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

Но, странное дело! 

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

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

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

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

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

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

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

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

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

Близкие соответствия в других системах есть только для следующего списка безопасных шрифтов из 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 интересных фактов.

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

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


Опубликовано

в

от

Комментарии

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

  1. Аватар пользователя e
    e

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

  2. Аватар пользователя Tim Tchervyakov
    Tim Tchervyakov

    Приятно слышать.

    Спасибо!

  3. Аватар пользователя Александр
    Александр

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

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

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

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

    1. Аватар пользователя Astromeridian
      Astromeridian

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

    2. Аватар пользователя Unknown
      Unknown

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

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

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

  4. Аватар пользователя Tim Tchervyakov
    Tim Tchervyakov

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

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

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

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

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

  5. Аватар пользователя Tim Tchervyakov
    Tim Tchervyakov

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

  6. Аватар пользователя netotded
    netotded

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

  7. Аватар пользователя netotded
    netotded

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

  8. Аватар пользователя Tim Tchervyakov
    Tim Tchervyakov

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

  9. Аватар пользователя Unknown
    Unknown

    Спасибо

  10. Аватар пользователя Геннадий
    Геннадий

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

  11. Аватар пользователя Кирилл Герусов ✔ (Votix.ru)
    Кирилл Герусов ✔ (Votix.ru)

    Поставил на своём блоге Arial 16px #333 и не парюсь. По-моему, это самое удобное для чтения сочетание размера и цвета.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *