О разборчивости и удобочитаемости

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

1. Используемый шрифт достаточно большой, чтобы его можно было читать с различным разрешением браузера. Хотя пользователи имеют в некоторых браузерах (таких как Opera) средства для изменения размера шрифта, вы можете попробовать проверить, что используемые шрифты настраиваются для различного разрешения браузера (http://www.456bereastreet.com/archive/200611/resolution_vs_browser_size_vs_fixed_or_adaptive_width/). Одним из способов сделать это является задание размера шрифтов в процентах (http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_fontsizes.hcsp) или ems, а не высотой в пикселях (для этого используется CSS).

2. Обеспечивается достаточный контраст между фоном и основным текстом. Белый или светлый шрифт на черном фоне для больших кусков основного текста может переутомлять глаза (http://www.456bereastreet.com/archive/200608/light_text_on_dark_background_vs_readability/), однако — если вы хотите это использовать, попробуйте предоставить альтернативный stylesheet, чтобы пользователи могли читать вместо этого темную копию на светлом фоне.

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

4. Исключается растягивание основного текста на всю ширину экрана с помощью текучей компоновки. Попробуйте прочитать параграф, который заполняет все горизонтальное пространство на большом мониторе — вам это быстро надоест, так как приходится использовать и глаза, и поворачивать голову при чтении текста от одной стороны экрана до другой. Просмотрите следующую Web-страницу по удобочитаемости (http://www.bastoky.com/Readability.htm), которая с моей точки зрения является лучшей, что я видела до сих пор, чтобы проиллюстрировать типичную удобную для чтения ширину основного текста (иллюстрация, показанная ниже на рисунке 10.5). Эта страница поясняет также подробно, как люди читают страницу, независимо от того будет ли это Web или печатный материал. Показанное ниже изображение было получено на двадцати-четырех дюймовом экране с разрешением 1920 x 1200. Сравните это изображение с тем, что вы увидите на своем экране, когда перейдете по предыдущей ссылке. Затем проверьте разрешение своего экрана, чтобы увидеть различие. Иногда фиксированная компоновка является хорошим решением, так как она будет определять параметры области основного текста для удобства читателей. Не беспокойтесь обо всем свободном пространстве вокруг этой области основного текста (как на показанном ниже изображении). Создайте спокойный фон, который не отвлекает от дизайна текста, и вы сделаете хорошую услугу для тех, кто владеет большими экранами.

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

Рис. 10.5.  Пример подходящей ширины основного текста, выводимого на большом экране

Последнее, но не менее важное, не забудьте проверить основной текст и заголовки на наличие ошибок правописания и опечаток. Я обнаружила как минимум одну опечатку и несколько ошибок правописания примерно в половине ссылок, которые я предоставила до сих пор для этой лекции. Хотя человеку свойственно ошибаться, доверие к человеку или компании может быть испорчено плохим правописанием и словами, между которыми нет пробелов, или другими проблемами, которые могут быть легко разрешены. Рис. 10.4.  Пример специального шрифта, Jokewood, размером 18 pt

Взгляд на изображения выше показывает, что не все типы шрифта создаются одинаковыми, даже если создаются одного размера в пунктах. Размер в пунктах определяет высоту букв, и некоторые шрифты будут больше при 18 пунктах, чем другие. Существуют также и другие различия, такие как расстояние между буквами и словами, или тот факт, что некоторые гарнитуры шрифтов, такие как Jokewood, не имеют букв нижнего регистра. Но легко можно видеть, что шрифты Jokewood и Staccato было бы трудно читать как основной текст. Эти шрифты могут найти применение в небольшой области, такой как заголовки или в рекламных объявлениях.

Один из моментов для рассмотрения состоит в том, что эти шрифты могут выглядеть по разному во всех браузерах, так как различные браузеры остаются по сути несовместимыми. Вы могли обратить внимание на мой комментарий выше, что "не все браузеры выводят одни и те же шрифты". Причина этой проблемы состоит в том, что не все операционные системы поддерживают одни и те же шрифты. Они могут поддерживать одни и те же шрифты, но вариант, толщина и другие факторы могут представляться по разному в том или ином браузере. В связи с этим для вывода Web-страницы можно использовать базовый шрифт (http://www.upsdell.com/BrowserNews/res_fonts.htm), или просто "serif" или "sans-serif". Можно также использовать базовое имя и имя выбранного шрифта и надеяться на лучшее, так как пользователи в некоторых случаях также имеют возможность изменить шрифт или то, как он выглядит.

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

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

Помня об этом, дизайнеры шрифтов и программисты постоянно пытаются найти способы сделать шрифты более читаемыми и красивыми (http://brainstormsandraves.com/articles/typography/webfonts/). Поэтому принимайте сказанное с некоторой долей критики и пробуйте что-нибудь новое, если считаете, что это будет работать. Достаточно скоро вы обнаружите, получится это или нет, когда протестируете самостоятельно Web-страницу на ряде браузеров (что будет показано дальше в этой лекции).