Главная страница статей --> Программирование, заработок, оболочки

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

Источник: linuxcenter.ru

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

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

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

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

  • не может быть изменен по желанию посетителя
  • сложно читать из-за несовместимости шрифтов
  • иногда настолько мал, что его невозможно прочесть
  • нечитабелен из-за недостаточного контраста между цветом текста и фона или по причине слишком «навязчивого» фона
  • при неправильном разбиении на абзацы текст становится трудно воспринимаемым
  • представленный в виде графики текст не может быть изменен по размеру или прочтен программами голосового синтеза (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:MacUnix
Arial*HelveticaHelvetica
Times New Roman*TimesTimes
Courier New*CourierCourier
Verdana*Verdana*
Georgia*Georgia*
Trebuchet*Trebuchet*
Comic Sans MS*Comic Sans MS*
MS Sans SerifGeneva
MS SerifNew 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% меньше, чем для печатных документов). Эти вопросы будут рассмотрены в третьей части «Оформления текстов для веб».



Похожие статьи:
- Маленькие и бесполезные софтины
- Небаннерные методы рекламы партнерских программ
- Quintessential Player или не Winamp-ом единым…
- Создание сайта с помощью фреймов
- Программы для работы с help-файлами
- Пиринговые сети
- NetPromoter: новые возможности профессиональной интернет-статистики
- «Легкий» сайт
- Интернет-глупости
- Следи за собой, будь осторожен…
- Верстка таблиц
- Arachnophilia — редактор для веб-мастера и программиста
- Веб-хостинг: кто, где, когда и почему


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.002]