Аудит от независимых экспертов

поможет выявить проблемы на вашем сайте


 

 
 
 

Шрифт и текст на сайте

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

Тип шрифта может подчеркнуть причудливость или серьезность сайта, а с помощью надписей разных размеров и цвета можно выделить содержимое страницы. 

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

Звучит примитивно? Вовсе нет, есть немало правил и рекомендаций по использованию шрифта и оформления текста в сети. В статье собраны основные из них.

Четыре основные рекомендации при использовании шрифта:
  • Используйте широко распространенные шрифты размером не меньше 10.
  • Избегайте использования слишком насыщенного фона.
  • Применяйте черный шрифт на белом фоне.
  • Сведите к минимуму использование изменяющихся, художественных и графических надписей.
  • Не следует использовать сглаживание (anti-aliasing) для шрифта размером меньше 12 пикселей.

Характеристики популярных шрифтов

Название шрифта

Удобочитаемость на экране

Характеристика


Arial

Воспринимается хорошо только при соответствующем размере. Не следует использовать шрифт размером меньше 10.

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


Comic Sans MS

Нестандартные формы букв значительно осложняют чтение при любых размерах шрифта.

Приятный, молодежный, забавный и неформальный. Не подходит для использования на серьезных и профессиональных сайтах.


Georgia

Из набора шрифтов «с засечками» лучше всего подходит для использования в сети. Лучше всего воспринимается на экране при размере шрифта не меньше 10.

Традиционный шрифт, но немного более современный и удобный для восприятия на экране, чем Times New Roman.


Impact

В основном используется при печати. Крайне плохо воспринимается на экране при любых размерах.

Жирный шрифт. Не подходит для набора блоков текста. Можно использовать только для отдельных заголовков.


Times New Roman

Прекрасно подходит для печати. Удобство восприятия на экране резко снижается при выборе размера меньше 12.

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


Trebuchet MS

Хорошо воспринимается только при соответствующем размере. Не следует использовать шрифт размером меньше 10.

 

Современный, простой с четким контуром.


Verdana

Наиболее удобный шрифт для восприятия на экране. Хорошо воспринимается практически при любых размерах.

Современный, простой, профессиональный. Рекомендуется для написания основного текста веб-страниц, удобочитаемость которого особенно важна. Большинство пользователей отдают предпочтение именно этому шрифту.


Контраст текста и фона

Сочетание цветов

Уровень удобочитаемости

Черный текст на белом фоне

Высокий: самый высокий контраст и самый высокий уровень зрительного восприятия

Синий текст на белом фоне

Высокий: высокий уровень зрительного восприятия, если пользователь различает темно-синий цвет

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

Средний: уровень зрительского восприятия от среднего до высокого, в зависимости от оттенков и насыщенности цветов

Белый текст на синем фоне

Низкий: сложно читать, поскольку текст приглушается темным фоном

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

Низкий: самый низкий контраст и самый низкий уровень зрительного восприятия

Белый текст на сером фоне

Низкий: низкий контраст и низкий уровень зрительного восприятия

Красный текст на синем фоне

Очень низкий: сочетание ярких цветов создает эффект «дрожания» текста, утомляющий зрение

Красный текст на черном фоне

Очень низкий: сочетание ярких цветов создает эффект «дрожания» текста, утомляющий зрение


Три правила создания текстов для веб:
  • Не употребляйте жаргонных слов или профессиональных терминов. Терминология, бытующая в пределах вашей организации или области знаний, не всегда знакома заказчикам ваших товаров. Простые слова могут показаться безвкусными и неоригинальными, но зато они понятны.
  • Не используйте аббревиатур или акронимов. На правительственных веб-сайтах находится особенно много аббревиатур. По всей видимости, их создатели считают, что пользователям известен их смысл.
  • Избегайте сарказма, игры слов и избитых клише, которые не слишком понятны пользователям веб и раздражают их. Люди приходят на ваш сайт за информацией, а не для того, чтобы упражняться в остроте своего ума. Не забывайте, что веб является всемирной системой и идиоматические выражения не всегда одинаково воспринимаются во всех странах.
Форматирование текста
Стандартные методы:
  • Выделение ключевых слов.
  • Короткие и понятные заголовки.
  • Маркированные и нумерованные списки.
  • Короткие абзацы.
  • Наиболее важная фраза на веб-странице должна присутствовать в первых двух строках текста.
Семь главных принципов создания списков:
  • Используйте вертикальные списки при наличии четырех или более элементов в списке. Для более коротких списков это необязательно.
  • Перед списком добавляйте пояснительное предложение, описывающее элементы списка. Оно не должно быть таким же объемным, как описание элемента. Каждый пункт списка должен заключать в себе ответ на вопрос, поставленный во вводном предложении к этому списку.
  • Используйте идентификаторы для выделения элементов списка.
  • Не делайте большого отступа между маркером (символ, выделяющии пункт списка) и текстом. При наличии больших отступов текст сложнее читать, поскольку приходится переводить взгляд на большее расстояние.
  • Используйте похожее строение фраз для каждого пункта списка.
  • Не применяйте списки слишком часто. Иначе они утратят свою эффективность.

 
Голосов: 9
Баллы рейтинга: 44

Кирилл Макаров пишет:
23.03.2011 03:00
Отличный анализ, надо бы наш шрифт на Verdany заменить.
fessdew пишет:
23.03.2011 03:34
Спасибо=) А про вердану даже поговорка есть - "Сомневаешься, каким шрифтом писать? Используй Verdana!"=)
maximvar пишет:
24.03.2011 11:32
А мне Arial больше нравится, всё аккуратно, с Verdana будет заниматься больше места...
Гэми пишет:
23.03.2011 09:18
Отличная статья. Таблицы сделаны просто супер. Прямо настольное руководство по юзабилити шрифтов.
Сергей Анатольевич пишет:
23.03.2011 15:34
Отличнешая и полезнешая статья!
Сергей Иванов пишет:
23.03.2011 18:40
Качественная статья. Почти все, что нужно знать новичку о шрифтах. Будет продолжение про способы выделения (болд, италик, подчёркивание, разряжение и т.д.), художественного украшения? :-)
Гэми пишет:
23.03.2011 20:02
Да, кстати, это было бы очень и очень полезно.
fessdew пишет:
24.03.2011 01:47
Ну раз статья вызвала интерес у многих опытных аудиторов, придется писать развернутое продолжение)
Гэми пишет:
27.03.2011 14:19
Я в аудитах начинаю ссылаться иногда на Вашу статью. Только вот форма наша ссылки автоматически укорачивает. Не спрячешь под анкор аккуратно.
Ждем продолжения с нетерпением.
maximvar пишет:
23.03.2011 22:00
Познавательная статья, спасибо.
Eternal пишет:
23.03.2011 22:32
Многое понял из вашей статьи , спасибо !!!
rami пишет:
24.03.2011 08:35
да  спасибо   я все поняла
Надежда Дмитриевна пишет:
24.03.2011 08:53
впечатляет примерчики в таблице при помощи данных шрифтов, сразу видно наглядный пример, действительно все так и есть
Валерий пишет:
25.03.2011 13:42
Спасибо за статью. Можно использовать как настольную для аудита. И всегда под рукой!
NickAndTass пишет:
03.04.2011 17:29
Все "по полочкам", спасибо!
Феликс пишет:
13.06.2011 17:35
Хорошая статья.
Франса пишет:
18.12.2012 08:34
Все очень понятно написано, нет ничего лишнего. Спасибо
Jamesphemi пишет:
24.04.2017 18:51
заказать продвижение интернет магазина логин скайпа pokras7777