Введение в оформление текстов для веб

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

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

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

Но как и у любого героя, у текста есть и потенциальные отрицательные черты:

• не может быть изменен по желанию посетителя
• сложно читать из-за несовместимости шрифтов
• иногда настолько мал, что его невозможно прочесть
• нечитабелен из-за недостаточного контраста между цветом текста и фона или по причине слишком «навязчивого» фона
• при неправильном разбиении на абзацы текст становится трудно воспринимаемым
• представленный в виде графики текст не может быть изменен по размеру или прочтен программами голосового синтеза (TTS)
• сложен для восприятия, когда мигает или движется

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

Два пути к читабельному тексту

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

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

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

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

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

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

«Вы всегда можете получить то, что хотите, но если постараетесь, то возможно это будет то, что вам нужно», Mick Jagger.

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

Гарнитура шрифта веб-сайта или отдельного документа влияет на наше восприятие его содержания. Поэтому одна страница выглядит строго и серьезно, другая — непринужденно и весело или в стиле техно. Ясно, что оформление сайта детской теле-программы (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

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

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

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

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

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

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

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

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

Замечания, которые возможно изменят ваше желание контролировать шрифты на сайте

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

• Определенные шрифты присутствуют не во всех операционных системах.
• Некоторые гарнитуры оптимизированы для вывода на печать, другие — на экран. Созданные для печати (в том числе шрифты с засечками) склонны выглядеть на экране «беспорядочно».
• Размер шрифта зависит от разрешения экрана и операционной системы пользователя.
• Внешний вид текста зависит от браузера.
• Пользователи могут изменить настройки своих компьютеров и браузеров.

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

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

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

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

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

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

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

Шрифты для печати наносятся (на бумагу) по своим векторным макетам, поэтому такие шрифты легко масштабируются. Первое поколение таких шрифтов плохо выглядело на мониторах с низким разрешением, т. к. последним не хватало пикселей, чтобы отобразить утонченность и стиль, определенный в векторных макетах. Разрешение компьютеров Mac составляло 72dpi (точек на дюйм), а Windows PC — 96dpi, тогда как у печатных материалов разрешение, как правило — 1200dpi и более.

В попытке разрешить эту проблему, такие пионеры разработки шрифтов для веб, как, например, Чак Бигелау (Chuck Bigelow) (создавший экранный шрифт Pellucida, как эквивалент печатного Lucida), разработали растровые экранные шрифты. Основой этих шрифтов послужила квадратная пиксельная решетка мониторов. В таких шрифтах каждый символ представлен группой пикселей и тщательно обработан дизайнером для оптимальной читабельности и четкости.

Компания Apple быстро приняла это нововведение, чтобы улучшить читабельность текста с монитора. В колонке шрифтов Mac нашей таблицы их можно легко опознать по названиям — большинство растровых шрифтов названы в честь городов: Geneva (растровый вариант Helvetica), New York (Times) , Monaco (Courier). В Windows растровые шрифты легко определить по их характерным красно-белым иконкам в системной папке шрифтов. В Windows растровые шрифты используются в основном для отображения названий папок и файлов, а также ярлыков.

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

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

За пределами этой статьи стоит оставить подробной рассказ об истории шрифтов и о том, как все изменилось с того времени (эту информацию можно получить здесь: www.dotprint.com/graphics/graphi26.htm), можно лишь смело заявить о том, что сейчас уже мало кто из веб-мастеров знает разницу между экранными шрифтами и шрифтами для печати. Большинство современных шрифтов, используемых в сети, прекрасно масштабируются, хорошо выглядят на экране и вполне прилично — на бумаге. Причина этого заключается в общем курсе на создание геометрических шрифтов (основанных на векторах), учитывая низкую разрешающую способность мониторов. Корпорация Microsoft сильно способствовала увеличению читабельности текстов в веб, поручив Мэтью Картеру (Matthew Carter) создание шрифтов, которые были бы оптимизированы для компьютерных мониторов и для веб-мастеринга.

Мэтью Картер, создатель шрифтов Verdana и Georgia, четко выразил свое мнение относительно экранных шрифтов:

«В кругу последователей графического дизайна люди судят о шрифтах только при их выводе на печать.

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

Мэтью Картер, создатель шрифтов Verdana и Georgia.
www.webreview.com/1997/11_07/webauthors/11_07_97_10.shtml

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) эти шрифты остаются четкими и читабельными даже при относительно малых размерах. Оптимизация в данном случае означает изменение шрифта, чтобы он выглядел как можно лучше даже на мониторах с маленьким разрешением. «Хорошо оптимизированные шрифты достигают уровня старых растровых шрифтов, при этом сохраняя скорость и пониженные требования к оперативной памяти, свойственные шрифтам на основе контуров.» (Введение в оптимизацию: www.microsoft.com/typography/hinting/hinting.htm).

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

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

Стоит помнить, что даже эти шрифты должны быть установлены на компьютерах пользователей. Упомянутые выше шрифты от Microsoft поставляются вместе с Windows 95 (и более поздними версиями этой ОС), многие из них также идут в комплекте с Microsoft Word (самым популярным текстовым редактором, занимающим 90% этой ниши в мире PC и Mac). Также эти шрифты есть в дистрибутиве Internet Explorer 3 и старше.

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

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

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

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