Использование шрифтов

Если проанализировать сайты на предмет используемости шрифтов —  скорее всего вы увидите, что чаще всего встречается шрифт ARIAL размером 12 пикселей — и это самый рекомендуемый во всех руководствах по usability. 

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

Шрифт , используемый на сайте, должен быть подобран так, чтобы посетитель мог воспринимать текст с максимальным для него комфортом. Шрифты должны быть стандартными, типа Tahoma, Verdana, Arial, Time New Roman. Эти шрифты корректно читаются всеми браузерами

Что касается типов шрифта, то для интернета используются шрифты без засечек. Наиболее популярными являются Verdana и Arial. А вот наиболее популярными для печати являются шрифты с засечками Times New Roman и Geogia.

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

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

Times New Roman – прекрасно подходит для печати. Удобство восприятия на экране резко снижается при выборе размера меньше 12. Традиционный шрифт. Не используется профессионалами для отображения на экране.

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

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

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

Не стоит использовать текст, написанный заглавными буквами. Такой текст трудночитаем, буквы сливаются и затрудняю прочтение.

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

Четыре основные рекомендации при использовании шрифта:

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

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

Сочетание цветов	Уровень удобочитаемости
Черный текст на белом фоне	Высокий: самый высокий контраст и самый высокий уровень зрительного восприятия
Синий текст на белом фоне	Высокий: высокий уровень зрительного восприятия, если пользователь различает темно-синий цвет
Черный текст на сером фоне	Средний: уровень зрительского восприятия от среднего до высокого, в зависимости от оттенков и насыщенности цветов
Белый текст на синем фоне	Низкий: сложно читать, поскольку текст приглушается темным фоном
Серый текст на белом фоне	Низкий: самый низкий контраст и самый низкий уровень зрительного восприятия
Белый текст на сером фоне	Низкий: низкий контраст и низкий уровень зрительного восприятия
Красный текст на синем фоне	Очень низкий: сочетание ярких цветов создает эффект «дрожания» текста, утомляющий зрение
Красный текст на черном фоне	Очень низкий: сочетание ярких цветов создает эффект «дрожания» текста, утомляющий зрение

 

Использование правильной ширины

Ширина строки с текстом тоже, оказывается, может влиять на удобство чтения текста. Если строка оказывается длиннее 75 символов, то читателю сложнее перейти на следующую строку.

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

Идеальной длинной считается в 60 символов, это конечно может создать некоторые проблемы при верстке или редактировании шаблона.

Ширина строчек текста должна быть примерно не более 700px.

Особенно стоит обратить внимание на эту проблему в настоящее время когда широко стали распространены широкоэкранные мониторы, а параметр ширины многих сайтов выставлен в 100% т. е. они растягиваются на всю ширину и читать текст на таких мониторах крайне не удобно.

Жирный шрифт в этом случае вызывает ощущение тяжеловесности, массивности, надежности товара. А тонкий подчеркивает его изящность, точность.

 

Правильная высота строки

Использование текста с высотой строчки меньше 130%, приводит к непривлекательному виду и усложняет чтение тем, что сложнее переводить взгляд от строчки к строчке.

Но с другой стороны, высота, используемая в редакторах, которая 200% отделяет строчки слишком далеко, что выглядит не очень презентабельно.

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

Абзацы. Тут нет каких-то жестких ограничений по размеру и количеству, но всегда хочется сделать текст не просто информативным, но и красивым. Чтобы, например, на скриншоте смотрелся ровными прямоугольниками и не кучей битого кирпича. Поэтому желательно делать абзацы примерно одинакового размера, по 450-600 символов. Слишком большие абзацы плохо воспринимаются из-за той же ленивой природы пользователя, слишком короткие выглядят «грязно».

 

Выравнивание текста по левому краю

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

Выравнивание текста по левому краю увеличивает скорость чтения, т. к. ровный левый край помогает найти начало новой строки.

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

И еще субъективное мнение: браузеры пока плохо справляются с выравниванием текста по ширине — из-за того, что они не умеют переносить текст, возникают слишком заметные промежутки между буквами и словами, что производит иногда просто отталкивающее впечатление. Хотя, при достаточно мелком шрифте и длинных строках это не так бросается в глаза. Но такой текст уже труднее читать.

Подзаголовки. Тексты длиннее 1,5-2 тысяч знаков нужно делить на подзаголовки. Дело в том, что пользователь не читает тексты в прямом смысле слова, а просто просматривает в поисках нужной информации. Подзаголовки экономят время и позволяют быстрее найти то, что нужно. Конечно, всегда можно воспользоваться поиском по странице с помощью Ctrl-F, но далеко не все «юзеры» настолько продвинуты, чтобы знать такие тонкости.

Шрифтовые выделения. В арсенале копирайтера есть три вида выделения основных мыслей текста: полужирное написание, курсив и ПРОПИСНЫЕ БУКВЫ. Полужирное выделение используется для обозначения главного слова абзаца, его тематики, курсив традиционно обозначает главную мысль автора, а прописные буквы используются для резюмирования и привлечения внимания. Не рекомендуется использовать прописные буквы слишком часто — это на языке шрифта обозначает крик и наводит на мысли о вменяемости автора. Попробуйте прочесть этот фрагмент: