Похожие статьи

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

Оформление текста с помощью CSS (50%)
Оформление текста — задача на первый взгляд простая, но только на первый взгляд. На деле необходимо учесть множество параметров: гарнитура, размер, цвет шрифта, длина строки, высота строки (интерлиньяж), выравнивание, отступы и поля (свободное пространство)… Итак, сверстаем текст, который удобно читать…

Всегда в курсе последних новостей (40%)
Сегодняшнюю статью я решил посвятить обзору нескольких новостных сайтов сети. Почему? Исходя из целей экономии. «Это как?», — наверное, спросите вы. Очень просто. Вы же платите за интернет и, скорее всего, немалые деньги, значит пора начать экономить на газетах :)…

Автор: Jim Byrne
www.mcu.org.uk
Оригинал статьи

Перевод: Земсков Юрий
www.ComputerLibrary.info

Дата публикации 21-04-2003 20:00
Статья просмотрена 22972 раз

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

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

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

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

  • не может быть изменен по желанию посетителя
  • сложно читать из-за несовместимости шрифтов
  • иногда настолько мал, что его невозможно прочесть
  • нечитабелен из-за недостаточного контраста между цветом текста и фона или по причине слишком «навязчивого» фона
  • при неправильном разбиении на абзацы текст становится трудно воспринимаемым
  • представленный в виде графики текст не может быть изменен по размеру или прочтен программами голосового синтеза (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-систем.

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).

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

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

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

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

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

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

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

Использование тега FONT

Для тех, кто все еще оформляет текст, использую FONT, предыдущий пример должен выглядеть так:

<FONT FACE="Verdana, Arial, Helvetica">Просто текст</FONT>

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

  • Стоит избегать использования параметров тега FONT «color» и «face», т. к. посетители не смогут изменить ваши настройки визуального представления текста своими. Это также может вызвать проблемы у людей, страдающих дальтонизмом.
  • Если вы используете FONT для задания размера шрифта, пишите FONT size= +1 или FONT size= -1, но не size = 1. Установка такого размера сделает шрифт слишком мелким для чтения посетителями сайта (хотя если они разбираются в настройках браузера, то смогут изменить этот параметр).
  • Многие дизайнеры используют FONT для задания заголовков, вместо предназначенных для этого тегов заголовков. Это делает страницу менее доступной для использующих текстовые или речевые браузеры, т. к. нарушается логическая разметка страницы. (Тоже самое происходит и при замене стандартных элементов HTML CSS стилями)

Посмотрите что еще плохого в теге FONT, чтобы осознать почему это тег не должен быть главным способом задания атрибутов текста.

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

Дизайнерам, использующим font или basefont для задания размера шрифта на странице. Эти теги позволяют задавать размер шрифта в относительных величинах от 1 до 7; 1 — наименьший размер, 7 — наибольший, 3 — нормальное значение (размер шрифта в браузерах по умолчанию). Каждый следующий размер на 20% больше предыдущего.

Почему бы не использовать изображения?

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

Самое главное в том, что подобные страницы рассчитаны не на всех пользователей:

  • Рисунки нельзя легко увеличить, их размер остается неизменным, независимо от настроек браузера.
  • Невозможно изменить цвет или контраст для улучшения читабельности.
  • Если к рисунку не добавлен атрибут 'ALT', то пользователь браузера с выключенным отображением графики не заметит его.
  • Использование графики вместо текста уменьшает количество полезной информации в структуре страницы. Заголовок верстается с помошью тега <hn>, заголовок-рисунок — нет. Использование тега <hn> в коде страницы играет важное значение для пользователей речевых браузеров, т. к. на основе этого тега делается анализ страницы и самой важной информации на ней.

Использование графики вместо текста также имеет и другие недостатки:

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

Возможно некоторые из проблем будут решены с внедрением формата масштабируемой векторной графики (SVG — scalable vector graphics), но на данный момент использование изображений с текстом вместо собственно самого текста — не очень хороший выбор. (www.w3.org/Graphics/SVG/Overview.htm8)

Использование embedded (внедренных) шрифтов

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

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

  • Internet Explorer и Netscape используют две разные, несовместимые технологии. Internet Explorer применяет Embedded OpenType, а Netscape — TrueDoc.
  • Embedded шрифты не работают в старых версиях браузеров (до Internet Explorer 4 или Netscape 4.0).
  • Внедренные в страницу шрифты увеличивают время ее загрузки.
  • Проблемы безопасности — пользователи могут украсть встроенный в страницу шрифт.
  • До сих пор существуют нерешенные проблемы, связанные с авторским правом и лицензированием шрифтов.

Поддержка этой технологии уже не совершенствуется в новых версиях браузеров, Netscape 6 не поддерживает embedded шрифты, видимо компания Netscape решила отказаться от использования этой технологии. Подробную информацию о внедрении шрифтов в веб-страницы можно найти по адресу: builder.cnet.com/webbuilding/pages/Authoring/Typography/ss01.html

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

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

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

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

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

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

Выводы

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

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

Часть вторая: «Доступность текста в сети — определяем размер шрифта для верстки».


Рекомендуемые ссылки:

Похожие статьи

Свойство CSS float: обтекание рисунка текстом и врезка к статье (38%)
Свойство CSS float определяет обтекание одного элемента другим. С его помощью на сайте можно реализовать обтекание рисунка текстом или, например, врезку к статье. Рассмотрение float: на этих примерах и будет целью данной статьи…

Из пустого в порожнее: статьи по веб-дизайну (37,04%)
Ситуация с новыми оригинальными материалами по веб-дизайну в Рунете просто ужасающая. И, если интересных зарубежных публикаций в сети вполне хватает, а дела с переводными статьями обстоят еще куда ни шло, то русскоязычных авторов явно настиг творческий кризис…

Обман в обмене ссылками (36,67%)
На фоне стремительно растущего числа каталогов, заблокированных поисковыми системами, все больше внимания веб-мастера стали уделять прямому и перекрёстному обмену ссылками. Еще вчера твой сайт после прогона по белым каталогам имел ИЦ равный 500 и более 1000 обратных ссылок, а сегодня Яндекс устроил новую чистку. И сайт двукратно снизил свои…

Дайте вашим посетителям текст (36,36%)
Исследования показали, что интернет-сайты кардинальным образом отличаются от печатных изданий. В чем заключаются эти отличия, как они влияют на поведение пользователей, каким должен быть правильный контент-проект — ответы на все эти вопросы вы найдете в данной статье…

Сравнение удобства пользовательских интерфейсов CMS на русскоязычном рынке (36,04%)
В русскоязычном Интернете имеется немало материалов со сравнениями различных CMS (систем управления содержанием), но мне ни разу не попадалось сравнение usability пользовательских интерфейсов CMS. И это странно, потому как удобство использования продукта напрямую связано с эффективностью его использования. Это один из важнейших критериев…

← Раздел «Вебмастеру: Юзабилити» | Комментарии (40) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Доступность имеет значение Недавно я стал счастливым обладателем мобильного телефона со встроенным веб-браузером. Можно долго распространяться о том, как далеко вперед шагнули технологии. Но заметка о другом. В первый же день пользования «мобильным интернетом» стала понятна истина, к которой прежде я относился с иронией. И звучит эта истина так: «Доступность сайта имеет значение»…

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

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

Доступность текста в сети — определяем размер шрифта для верстки Во второй части введения в создание доступных и читабельных текстов для веб автор исследует проблему выбора оптимального размера шрифта для верстки текстов в сети, объясняет, почему этот вопрос так актуален и предлагает несколько полезных советов, которые могут быть приняты вами на вооружение для верстки текстов, легкодоступных посетителям вашего сайта…

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

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