Увеличьте читабельность текстов, сделав осознанный выбор шрифта

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

Текст - один из важнейших объектов пристального внимания при проведении юзабилити-анализа сайта. У текста многих веб-страниц есть следующие слабые места:

нечитабелен из-за недостаточного контраста между цветом текста и фона или по причине слишком «навязчивого» фона

не может быть изменен по желанию посетителя

сложно читать из-за несовместимости шрифтов

иногда настолько мал, что его невозможно прочесть

при неправильном разбиении на абзацы текст становится трудно воспринимаемым

представленный в виде графики текст не может быть изменен по размеру или прочтен программами голосового синтеза

сложен для восприятия, когда мигает или движется.
Два пути к читабельному тексту

Веб-дизайнер, желающий создать удобный и функциональный сайт, может пойти двумя путями. Самый простой можно выразить в следующей фразе:

Лучше всего вообще не задавать размер и тип шрифта, оставив это на усмотрение посетителя.

Более сложной путь влечет за собой изучение «превратностей» веб-типографики и принятие решения по выбору шрифта для вашего сайта. Для многих дизайнеров контроль над шрифтами обусловлен требованиями создания торговой марки, соответствия фирменному стилю, уместностью определенного шрифта в каждом конкретном случае или просто личными предпочтениями. Контроль над текстом должен преследовать цели повышения «юзабилити» (удобства, функциональности, простоты) сайта; CSS позволяет управлять полями, длинной, шириной, цветом, размером и семейством шрифта — то есть всем тем, что позволяет сверстать текст для достижения максимальной читабельности. Естественно, страница, которую легко читать, очень удобна для посетителя.

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

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

Тем не менее, вы можете, с помощью CSS или уже морально устаревшего тега , снабдить веб-страницу своим «мнением» о том, как она должна бы выглядеть. Далее в этой статье вы узнаете, что пользователи могут изменить практически все ваши настройки шрифтов на свои с помощью настроек браузера. Так и должно быть на удобном веб-сайте.

Почему вообще надо управлять текстом на веб-странице?

Гарнитура шрифта веб-сайта или отдельного документа влияет на наше восприятие его содержания. Поэтому одна страница выглядит строго и серьезно, другая — непринужденно и весело или в стиле техно. Ясно, что оформление сайта детской теле-программы (www.bbc.co.uk/cbbc/) должно отличаться от оформления страницы политических курсов университета (www.ksg.harvard.edu/prg/). Также как и текст «Financial Times» (news.ft.com/home/uk/), если он соответствует своей функции, должен отличаться от текста на «The Tate Modern» (www.tate.org.uk/modern/default.htm).

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

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

Шрифты с засечками против рубленных шрифтов

Традиционно шрифты делились на шрифты с засечками (serif) и рубленные шрифты (sans serif). Шрифты с засечками характеризуются маленькими декоративными элементами у каждой буквы, которые называются засечками. Хорошим примером может служить Times: Times. Рубленные шрифты засечек не имеют. Например: Helvetica.

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

Значение шрифтов с засечками и рубленных шрифтов в контексте веб-дизайна

Рубленные шрифты, по мнению некоторых, выглядят современнее и «круче». С другой стороны, многие считают их искуственными и лишенными жизни. Шрифты с засечками выглядят более традиционно, типично, дружелюбно и знакомо и, как было замечено ранее, они способствуют более легкому восприятию больших объемов текста (историю шрифтов можно прочесть на: www.webreference.com/dlab/9802/sansserif.html).

Этот общий обзор вряд ли даст достаточно адекватное понимание вопроса, но обеспечит основу для применения различных шрифтов при дизайне обычных и веб-документов. Как пишет Дмитрий Кирсанов в своей статье «Согласование шрифтов»:

«… единственной вашей заботой должно быть соотношение между стилем, семантикой и предполагаемым воздействие текста и соответствующей гарнитурой шрифта для него. Нельзя верстать пьесы Шекспира рубленным шрифтом (даже для разнообразия) и использовать ломкие шрифты с засечками для кричащих рекламных объявлений.»
(www.webreference.com/dlab/9802/)

Замечание о читабельности шрифтов с засечками в сети

Стоит заметить, что правило о том, что шрифты с засечками проще для восприятия, неприменимо для интернета. Эксперт юзабилити Якоб Нильсен обращает внимание на то, что применительно к маленьким размерам шрифтов и небольшому разрешению экрана рубленные шрифты удобнее для чтения.

Выбор подходящего шрифта для сайта — непростое дело. Поэтому важно помнить следующее:

Определенные шрифты присутствуют не во всех операционных системах.

Некоторые гарнитуры оптимизированы для вывода на печать, другие — на экран. Созданные для печати (в том числе шрифты с засечками) склонны выглядеть на экране «беспорядочно».

Размер шрифта зависит от разрешения экрана и операционной системы пользователя.

Внешний вид текста зависит от браузера.

Пользователи могут изменить настройки своих компьютеров и браузеров.

Шрифты и операционные системы

Не все операционные системы и даже не все компьютеры с одинаковыми операционными системами имеют один и тот же набор шрифтов. Вместо ожидаемого дизайна, если только не будет выбран присутствующий в большинстве систем шрифт, страница будет показана гарнитурой по умолчанию — обычно это Times или Times New Roman. Тот же Times не так уж и легко воспринимается с монитора, так что ваши мечты об идеально читабельном тексте могут закончиться совсем наоборот.

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

Win 95:
Mac
Unix

Arial*

Helvetica

Helvetica

Times New Roman*

Times

Times

Courier New*

Courier

Courier

Verdana*

Verdana*

Georgia*

Georgia*

Trebuchet*

Trebuchet*

Comic Sans MS*

Comic Sans MS*

MS Sans Serif

Geneva

MS Serif

New York

Chicago

Palatino

Charcoal (1999 onwards)

Times New Roman*

Arial*

* Шрифты поставляются вместе с Internet Explorer для Windows и Mac.

На сайте Роба Коллинса можно найти более подробный список шрифтов Mac, PC и Internet Explorer (www.angelfire.com/al4/rcollins/style/fonts.html).

Многие шрифты плохо выглядят на компьютерных мониторах

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

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

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

Adobe с созданием шрифтов PostScript Type 1 и Apple c технологией Truetype положили начало созданию читабельных шрифтов для вывода на экран. Корпорация Microsoft продолжила общее дело, создав ESQ (Enhanced Screen Quality — улучшенное экранное качество) Truetype шрифты. Microsoft можно поблагодарить и за создание доступного каждому прекрасного набора масштабируемых экранных шрифтов, которые стали основой оформления текстов в сети:

Verdana,

Trebuchet MS,

Georgia,

Arial,

Times New Roman,

Courier New
Символы Verdana и Georgia создаются из геометрических контуров, оптимизированных для вывода на экран. Созданные Мэтью Картером и в последствие оптимизированные Томом Рикнером (Tom Rickner) эти шрифты остаются четкими и читабельными даже при относительно малых размерах. Оптимизация в данном случае означает изменение шрифта, чтобы он выглядел как можно лучше даже на мониторах с маленьким разрешением.

Выбор «безопасных» шрифтов для верстки сайтов

Arial и Times New Roman были тщательно оптимизированы для вывода текстов на экран и поэтому сейчас считаются хорошим выбором для веб-верстки. Times New Roman — хороший шрифт с засечками, который подойдет для веб-документов, предназначенных для последующей печати. С другой стороны, Georgia — прекрасный читабельный шрифт с засечками, предназначенный именно для экранных документов. Arial — наверное самый популярный, и некоторые скажут, что даже слишком популярный, шрифт в веб-верстке. Arial — читабельный шрифт, если только не использовать его маленьких размеров. Verdana — хорошая альтернатива Arial, учитывая большую читабельность при малых размерах инебольшом разрешении экрана.

Выбирая лучший шрифт с точки зрения читабельности и распространенности стоит остановиться на шрифтах, поставляемых с Internet Explorer и другими продуктами Microsoft. Из них лучших выбор — это Verdana (рубленный шрифт) и Georgia (шрифт с засечками), т. к. они специально создавались для мониторов с небольшим разрешением.

Шрифты на практике

Нельзя быть уверенным, что у посетителя вашего сайта обязательно будет установлен выбранный вами шрифт; не все путешествуют по сети с помощью Internet Explorer или используют другие продукты Microsoft. Однако есть пути решения этой проблемы; CSS и тег FONT позволяют указывать список предпочтительных для веб-страницы шрифтов и общий тип шрифта на крайний случай.

Вот пример таблицы стилей:

Body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Я выбрал Verdana, т. к. он читабелен даже при маленьких размерах символов. Но это шрифт Microsoft — он присутствует на компьютерах с Windows 95 и старше. К тому же этот относительно новый шрифт может и не присутствовать на компьютерах с более ранней версией Windows.

Поэтому я указал вторым Arial для тех, у кого нет Verdana и Helvetica (эквивалент Arial на платформе Mac) для пользователей Macintosh, у которых нет Verdana или Arial. В конце концов я указал, что если не будет найдено этих шрифтов, то браузер отобразит текст рубленным шрифтом по умолчанию.

Лучший шрифт для верстки сайтов

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

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

При посещении удобного веб-сайта у пользователя должна быть возможность:

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

Использовать собственную таблицу стилей, если есть такая возможность.

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

Выводы

Получается, что не так уж и сложно выбрать шрифты, удобные для чтения с монитора, если вам известны связанные с этим подвохи и способы обойти их. Просто ограничившись указанием в таблице стилей шрифтов: Verdana, Arial, (рубленные шрифты), Georgia или Times New Roman (шрифты с засечками), вы не поступите так уж плохо. Тем не менее, полезно знать, почему именно эти шрифты хороши для верстки сайтов и что еще можно сделать для повышения доступности сайта, удобства посетителей и читабельности текстов. Пора подытожить все, что вы узнали:

Удостоверьтесь, что вы не делаете ничего, что может помешать посетителям установить свой шрифт (другими словами не используйте тег ).

Используйте таблицы стилей вместо тега для установки свойств шрифта.

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

Шрифт должен соответствовать смысловой нагрузке сайта.

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

Уделите внимание удобству восприятия и читабельности ваших текстов, используя, как уже говорилось, подходящий шрифт. Для большинства ваших посетителей, которые не будут менять настройки браузеров по умолчанию, также обратите внимание на: длину строк, межстрочный интервал (высоту строк), размер шрифта, шрифт по умолчанию, соотношение текста и свободного пространства на странице — все это повлияет на читабельность текста. Важность повышения читабельности текста увеличивается и из-за двух связанных между собой факторов: объема внимания и скорости прочтения и осмысления информации (для веб-страниц эти показатели на 10–20% меньше, чем для печатных документов).