Удобство чтения текста остается одной из актуальных проблем в Web. Сайт может быть хорошо структурирован, удобен, грамотно спроектирован – но если пользователи не смогут нормально читать представленную на его страницах информацию, то он никогда не станет эффективным.
Правильное текстовое оформление и подбор цветовой гаммы являются важнейшей составляющей качественного визуального дизайна. В связи с этим необходимо помнить о четырех основных рекомендациях применения шрифтов:
- используйте широко распространенные шрифты размером не меньше 10 px. Меньший текст будет сложно читать, поскольку мелкие буквы трудноразличимы. Кроме того, такие символы обычно расплываются на экране, особенно в тексте жирного или курсивного начертания;
- избегайте слишком насыщенного фона. Яркие цвета вообще следует применять очень осторожно – во-первых, от них быстрее устают глаза, во-вторых, главная задача фона – не поразить пользователя своей оригинальностью, а создать комфортные условия для работы с текстом;
- отображайте шрифт черным цветом на белом фоне. Такое сочетание наиболее привычно нашему глазу и потому оптимально при больших объемах текста;
- сведите к минимуму использование изменяющихся, художественных и графических надписей.
Все приведенные рекомендации направлены на снижение усталости посетителя при работе с контентом сайта.
Классификация шрифтов в HTML
В HTML принята упрощенная классификация шрифтов:
- serif – текстовые пропорциональные шрифты с засечками;
- sans-serif – текстовые пропорциональные шрифты без засечек;
- monospace – моноширинные шрифты
- cursive – декоративные шрифты имитирующие рукописный текст;
- fantasy – разнообразные декоративные шрифты.
Serif
Шрифт Serif (с засечками) использовался на протяжении веков в печатных изданиях – книгах, газетах и журналах. Он имеет выступы у основания и вверху символов - засечки. Сами по себе, засечки у шрифта представляют собой небольшие палочки, росчерки, черточки на концах букв. Известно множество типов засечек, которые отличаются друг от друга по форме, размеру и начертанию.Как правило, шрифты с засечками лучше подходят для сплошных текстовых блоков. Засечки — это не только декоративные элементы. Они играют важную роль в восприятии шрифта, поскольку помогают глазу отделить один знак от другого и выявить отдельные буквы. Засечки помогают создать пространство между буквами, что делает текст более читабельным.Более того, засечки создают ощущение линий вдоль текста, которые помогают читателю следовать по тексту. Это очень облегчает восприятие и создает ощущение стройности текстовых строк. Они упорядочивают горизонтальную текстуру шрифта.
Если вы планируете в дальнейшем печатать или использовать текст как печатный материал, (например, PDF-файл), выбирайте шрифт с засечками. На бумаге такой текст будет читаться очень легко.
Sans-serif
Шрифт Sans-serif (без засечек) является простым и ясным, а также не имеет выступов вверху и у основания, в отличие от шрифта с засечками. Шрифты без засечек выражены менее отчетливо, они труднее читаются. Обычно их используют для заголовков, документов и подписей к изображениям. Простота шрифтов без засечек делает их более удобными для чтения на компьютере.Шрифты без засечек эффективны в качестве заголовков для общего текста или текста с техническим содержанием. Такой шрифт также можно охарактеризовать как холодный и безличный.
Monospace
Шрифт Monospace (моноширинный) является простым способом форматирования текста. Он хоть и ограничен в возможностях, зато не требует знания специальных языков разметки и программного обеспечения, легко воспроизводится на различных устройствах.
Его применяют:
- в средах разработки и редакторах исходного текста программ. Благодаря использованию моноширинных шрифтов упрощается выравнивание строк, позволяющее лучше ориентироваться в коде;
- Интерфейсе командной строки и эмуляторах терминала. В них кроме форматирования вывода моноширинный шрифт вместе с псевдографикой даёт возможность пользоваться расширенным текстовым интерфейсом пользователя;
- Технической литературе моноширинным шрифтом выделяют любой компьютерный текст — не только блоки исходного кода, но и ключевые слова языков программирования, вводимую в программу информацию и так далее;
- Для отображения символов восточноазиатских шрифтов, которые являются моноширинными по своей природе.
Cursive
Шрифт Cursive (курсивный) своим начертанием имитирует рукописный текст. Он является сильным средством выделения и служит для привлечения внимания пользователя к важной информации.
Fantasy
Шрифт Fantasy (декоративный) используется для усиления впечатления от дизайна сайта. За редким исключением, такой шрифт трудночитаемый, и потому применяется для отображения коротких текстовых сообщений, заголовков, надписей и так далее.
Безопасные WEB-шрифты
Основываясь на шрифтах Windows (которые присутствуют и в других операционных системах) можно представить следующий список «безопасных» web-шрифтов:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Все эти шрифты можно смело использовать при создании web-сайта: вероятность их поддержки любой из операционных систем близка к 100%.
Несколько вариантов безопасных шрифтов из Google Web Fonts:
Cuprum
Переработанная и дополненная версия шрифта Cuprum, автором которого является Иван Гладких, более известный как Джованни Лемонад.
Open Sans Condensed
Гуманистический шрифт Open Sans без засечек разработан Стивом Маттесоном (Steve Matteson). Является достаточно популярным благодаря своей дружелюбности, открытости и удобочитаемости.
PT Sans Narrow
PT Sans основан на русских шрифтах с засечками образца второй половины 20-го века, но в то же время имеет отличительные черты современного гуманистического дизайна.
Yanone Kaffeesatz
Является первым законченным шрифтом своего автора. Мы можем увидеть Yanone Kaffeesatz на упаковках продуктов по всему миру.
Ubuntu Condensed
Ubuntu Condensed является шрифтом семейства Ubuntu, имеет достаточно плотное размещение символов и доступен только в regular начертании.
Rajdhani
Семейство шрифтов Rajdhami разработано для использования в заголовках и отображения других размеров текста на экране. Его первый выпуск включает в себя пять шрифтов.
Размера шрифта для сайта.
Если основной шрифт на сайте слишком мелкий, пользователям приходится напрягать зрение, чтобы прочесть нужный текст. Разумеется, далеко не каждому пользователю захочется это делать, поэтому сайт с мелким шрифтом многие посетители закроют как можно быстрее.
Однако не только рост показателей отказа на сайте может стать результатом использования очень мелкого шрифта. Из-за слишком маленького шрифта сайт может даже оказаться ниже своих конкурентов по важным тематическим ключевым словам (при прочих равных условиях) в связи с тем, что в настоящее время поисковые системы активно борются с неудобным представлением контента на сайтах.
Например, поисковая система Google считает мелкий шрифт на сайте серьезным препятствием для посетителей и рекомендует веб-мастерам использовать достаточно крупные шрифты, чтобы пользователям не приходилось вглядываться в чересчур мелкий шрифт или прибегать к увеличению масштаба страницы. При этом особенное внимание веб-мастеров Google обращает на мобильных посетителей сайтов.
Дело в том, что даже если на экране стационарного ПК или же ноутбука шрифт выглядит достаточно крупным, то это не означает, что и на мобильных устройствах (планшетах, смартфонах) он будет удобным для чтения. Ведь размер шрифта обычно устанавливается веб-мастерами в пикселях, размеры которых зависят от размера экрана устройства и его разрешения, и в результате один и тот же по размеру шрифт на большом экране читается удобно, а на маленьком — нет.
Подбор базового размера шрифта.
Google рекомендует использовать в качестве базового размер шрифта в 16 пикселей CSS (одна из единиц измерения размера шрифтов), поскольку именно таким размером отображаются шрифты в браузерах по умолчанию, когда веб-мастер не задает никаких значений для размера шрифта в теле страниц сайта или же в файлах CSS. При этом шрифты меньше или больше базового на сайте Google советует задавать в относительных единицах, к примеру, в процентах, чтобы при автоматическом масштабировании страниц сайта для отображения на разных устройствах изменение масштаба шрифтов выполнялось максимально корректно.
Следует отметить, что при разработке веб-дизайна не только размер шрифта имеет важное значение, но и количество разных используемых шрифтов. В большинстве книг по юзабилити интернет ресурсов говорится, что оптимально использовать 3 разных шрифта на сайте. Если их больше, дизайн смотрится слишком негармонично.
Настройка высоты строки.
Устанавливайте высоту строки (line-height) больше значения по умолчанию примерно в 1.4em (т. е. 140% от стандартного) – это значительно улучшит удобочитаемость текста. Поскольку высота строки связана с ее длиной, то чем длиннее строка, тем больше должен быть интерлиньяж.
Цветовая схема.
Не следует использовать на сайте шрифты более чем трех или четырех разных цветов. В противном случае, ресурс будет выглядеть слишком пестрым, неупорядоченным, неструктурированным и непрофессионально оформленным. Также не стоит применять текст, написанный одними заглавными буквами, - они будут сливаться и затруднят чтение.
Немного теории. Существуют две полярные цветовые схемы: позитивная (черный текст на белом фоне) и негативная (белый текст на черном фоне). В целом, и та, и другая схема обладают хорошей читабельностью, хотя иногда говорят, что негативная схема слегка замедлит чтение из-за того, что способствует рассеянию внимания читателя.
Какая цветовая схема наиболее оптимальна?
Наиболее приемлемым и удобным для чтения был и остается черный текст на белом фоне. В целом для оформления текста рекомендуются темные цвета, для оформления фона – холодные и ненасыщенные. Если использовать белый шрифт на черном фоне, то его контрастность будет такой же, как у черного шрифта на белом фоне. Но, вместе с тем, в первом случае удобочитаемость текста будет значительно ниже, особенно при выборе шрифтов малых размеров – в частности, белые края букв кажутся размытыми. Для того чтобы избежать подобного эффекта, необходимо применять шрифт размером не менее 12 пикселей. Вообще, если нельзя обойтись без оформления фона темным цветом, лучше выбрать не черный цвет, а какой-нибудь другой темный оттенок. Несмотря на то, что это немного снизит контрастность, эффект размытых краев букв будет существенно ниже.
Необходимо избегать комбинирования схожих цветов, например, серого шрифта на белом фоне. Низкий контраст приводит к чрезмерному напряжению зрения и быстро утомляет пользователя. Следует также осторожно использовать сочетания ярких оттенков: фиолетовых и желтых, синих и красных, черных и красных. Яркие цвета будут довольно контрастны, но их сочетание вызывает эффект "дрожания" текста на экране, что значительно осложняет его восприятие. Запомните: самый высокий контраст и самый высокий уровень зрительного восприятия – у черного текста на белом фоне.
Сам фон лучше всего воспринимается в светлых, пастельных, спокойных тонах, без рисунков, узоров и водяных знаков. Делайте его однотонным, применяя различные приемы затухания или градиента.
Для удобочитаемости очень важна подобранная контрастность. Черный шрифт на белом фоне очень сильно напрягает глаза. Гораздо лучше выглядит темно-серый шрифт на светло-сером фоне.
Некоторые распространенные цветовых сочетаний в порядке постепенного ухудшения восприятия их пользователем:
- синий на белом;
- черный на желтом;
- зеленый на белом;
- черный на белом;
- зеленый на красном;
- красных на желтом;
- красный на белом;
- оранжевый на черном;
- черный на пурпурном;
- оранжевый на белом;
- красный на зеленом.
Кстати, с точки зрения привлечения внимания лучше воспринимаются черные буквы на желтом фоне, зеленые и красные — на белом. Здесь особенно подходит красный цвет — как самый раздражительный для глаз.
