Во второй части введения в создание доступных текстов для веб я исследую проблему выбора оптимального размера шрифта для верстки текстов, объясняю, почему этот вопрос так актуален и даю несколько полезных советов, которые могут быть приняты вами на вооружение для верстки текстов, легкодоступных посетителям вашего сайта.
«Чем больше, тем лучше. Вы можете использовать любую гарнитуру шрифта, если она достаточно велика», — пишет Дэниел Вил-Харис (Daniel Will-Harris) в статье «Лучшие гарнитуры для вывода на экран». «Шрифты размером в 14 пунктов считаются более разборчивыми и обеспечивающими более быстрое чтение, поэтому они предпочтительней шрифтов в 12 пунктов», — утверждают Майкл Бернард (Michael Bernard), Карина Лао (Corrina Liao) и Мелисса Милс (Melissa Mills) в своем исследовании по определению оптимального шрифта для людей среднего и пожилого возраста.
Приведенные выше цитаты утверждают, что размер шрифта является важным фактором, когда дело доходит до читабельности текста в сети. Более того, в похожей работе «Какой размер и семейство шрифта мне стоит использовать для веб-сайта?» Майкл Бернард и Мелисса Милс делают вывод, что использование большого размера шрифта положительно сказывается на скорости чтения.
Так значит ли это, что вам, как дизайнеру, озабоченному проблемой удобства и доступности сайта, необходимо использовать шрифт большего размера? Здравый смысл подсказывает, что люди с пониженным зрением склонны увеличивать размер шрифта при чтении с монитора. Значит стоит сразу дать им большой размер букв? И не подливают ли масла в огонь результаты исследований, утверждающие, что большой шрифт увеличивает скорость чтения у людей с хорошим зрением? Наверное, все не может быть так просто!? Подумайте над этой цитатой Королевского Национального Института Слепых (The Royal National Institute for the Blind — RNIB):
«Одни предпочитают читать крупный текст в то время, как другие могут читать только мелкий. Большинству требуется высоко контрастная цветовая схема в то время, как некоторые могут читать желтый текст на черном фоне. Для удовлетворения потребностей всех посетителей сайт должен иметь гибкий дизайн, позволяющий каждому выбрать оптимальный для него размер и цвет шрифта.»
(RNIB www.rnib.org.uk/wedo/research/hints.htm)
Хм… RNIB, похоже, не разделяет мнение, высказанное в начале статьи, утверждая вопреки ему, что, несмотря на благие намерения, большой размер шрифта может оттолкнуть некоторых посетителей. Оказывается, есть люди, которым удобнее читать тексты, отображаемые небольшим размером шрифта. Большой размер шрифта не подходит, маленький — тоже. Кажется, нам не из чего выбирать. Что же делать, если хочется быть уверенным в том, что текст на веб-страницах доступен максимально широкой аудитории?
На самом деле из этого положения есть выход. RNIB попадает в точку, говоря о «гибком дизайне», как о ключе к решению проблемы. Выход не в крупном или мелком тексте, а в создании «безразмерного» текста, т. е. в обеспечении посетителя возможностью установить необходимый лично ему размер шрифта. Другими словами, веб-дизайн доступного и удобного текста заключается в том, чтобы не мешать посетителю задать свои собственные предпочтения через настройки браузера.
Как же не стоять на пути посетителя?
Есть два способа передать управление размером шрифта в руки пользователю:
- Даже и не пытаться задать размер шрифта.
- Или определить размер, используя относительные единицы измерения.
Выбрав первый путь, т. е. полностью отказавшись от контроля за размером шрифта, вы ломаете все преграды перед доступностью сайта для посетителя (по крайней мере, относительно текстов), которые вы могли ненароком установить. Но подобный подход также означает, что ваши веб-страницы могут выглядеть не так красиво, как хотелось бы, если они будут отображаться браузером с настройками по умолчанию. Это может привести к тому что, например, заголовки будут выглядеть слишком крупными по сравнению с основным текстом.
Используя относительные единицы измерения, вы получите все преимущества двух подходов: с одной стороны, вы позволите посетителю контролировать размер шрифта, с другой — сами сможете установить размеры, соответствующие вашим эстетическим чувствам. В данном случае, когда пользователь изменит размер шрифта основного текста в своем браузере, пропорционально увеличатся или уменьшатся и все прочие текстовые элементы страницы, при этом текстовые блоки сохранят свои размеры относительно друг друга. Допустим, вы решите, что основной текст страницы должен быть равен 100% от установленного в настройках браузера вашего посетителя, заголовок тогда пусть будет равен 130%, подзаголовок — 120%, а текст в навигационном блоке — 95% и т. д. (Размеры указаны для примера, это не рекомендации.)
Используя относительные единицы, вы признаете, что невозможно предугадать потребности посетителя или тип пользовательского агента (мощные браузеры последнего поколения, текстовые браузеры, мобильные телефоны с доступом в интернет, карманные компьютеры и т. д. — прим. перев.). Если посетитель любит крупный шрифт, у него есть возможность сделать его крупным, просто изменив настройки своего браузера. Вот несколько относительных единиц измерения, благодаря которым пользователи и получат такую возможность:
- em
- проценты
- ключевые слова, такие как «smaller» или «bigger»
Далее я расскажу, как использовать эти единицы измерения на практике, однако сначала считаю нужным рассмотреть несколько других, не менее важных, вопросов.
Во-первых, высказывание Джо Кларка о том, что размер шрифта не так уж и важен для создания удобного и доступного сайта, и не стоит беспокоиться о выборе единицы измерения, если только текст не станет абсолютно нечитабельным из-за своего маленького размера.
Во-вторых, мы рассмотрим доводы против использования абсолютных единиц измерения (например, пунктов) для задания размеров, т. к. это одна из основных проблем удобства использования сайтов, с которой я сталкиваюсь при тестировании доступности сайтов.
Так ли важно использовать строго определенные единицы измерения?
Джо Кларк в своей книге «Создание доступных веб-сайтов» утверждает, что веб-дизайнерам не стоит слишком беспокоиться о том, что может ли посетитель изменить размер шрифта на сайте или нет. Он основывается на собственном определении людей с ослабленным зрением, считая таковыми тех, кто использует вспомогательные компьютерные средства для работы в сети. Дав людям подобное определение, Джо Кларк утверждает, что выбранные дизайнером единицы определения размера шрифта «абсолютно неважны для людей с сильно ослабленным зрением.» (стр. 223), потому что «Удобство пользования сайтом целиком и полностью зависит от адаптивных технологий, используемых посетителем».
Другими словами, неважно, как вы задаете размер шрифта, т. к. посетители с ослабленным зрением все-равно пользуются дополнительными средствами, позволяющими увеличить шрифт, прослушать написанное (так называемые Screen readers — прим. перев.) или перевести текст в шрифт Брайля. Выбором единиц измерения в первую очередь будут затронуты интересы пользователей с «нормальным зрением, которым будет неудобно читать такие специфические страницы.» (стр. 223). Но люди с нормальным зрением не должны быть поводом для беспокойства, т. к. они не страдают от ослабленного зрения и смогут найти выход из положения, созданного веб-мастером.
Аргументация достаточно привлекательна, но, тем не менее, я вижу несколько проблем, связанных с таким подходом:
- Джо Кларк заявляет, что процесс создания доступного сайта должен быть ориентирован на людей с физическими или познавательными недостатками, но я не согласен с этим определением. Даже если мы создаем сайт именно для людей с различными недостатками, данное Джо Кларком определение веб-дизайна и следование ему будет мешать нам впоследствии заниматься широким спектром работ по поддержанию сайта в рабочем состоянии, повторному использованию опубликованной информации и оптимизации страниц для работы с широким кругом устройств для доступа в интернет. Я бы отнес дополнительные вспомогательные технологии, используемые пользователями, к другим средствам доступа в сеть и мне хотелось бы, чтобы мои сайты хорошо работали со всеми этими средствами.
В своей статье «Что такое удобный и доступный веб-сайт?» я рассматриваю для веб-мастеров и менеджеров веб-проектов различные аспекты доступного сайта и даю определение, которое ведет к формулировке практических советов и правил.
Мне, человеку с хорошим зрением, приходилось встречать множество сайтов, где необходимо было увеличивать размер шрифта для удобства чтения текста. Подход, подразумевающий, что я, как посетитель, должен использовать дополнительные программы для увеличения экранного текста, необоснованно ограничивает возможности доступа к веб-сайту и создает проблемы, которые он вообще-то должен решать. - Джо Кларк не принимает во внимание хорошо известное соображение, что подобные ограничения и делают людей «нетрудоспособными», а не их физические недостатки. Например, я «нетрудоспособен», потому что текст на сайте слишком мал, чтобы я смог прочесть его и нет возможности изменить размер шрифта, а не из-за моего пониженного зрения. Уберите ограничение, т. е. позвольте мне изменять размер шрифта, и в данной конкретной ситуации я уже не «инвалид», хотя мое зрение никак не изменилось со времени предыдущей попытки прочесть этой текст.
Главное, что возможность или невозможность изменить размер шрифта зависит от выбора единицы измерения. - По правде говоря, точка зрения Джо Кларка, опровергает мое заявление о необходимости использования относительных единиц для определения размеров шрифта веб-страниц и признает оправданным использование для этих целей пунктов или пикселей. Как вы увидите далее, аргументация против использования пунктов достаточно очевидна. Обосновать отказ от пикселей сложнее, т. к. пиксель — одновременно и абсолютная, и относительная единица измерения в зависимости от браузера и устройства, используемого для просмотра страницы.
Я бы не рекомендовал использование пикселей для задания размеров шрифта веб-страниц, потому что для многих пиксели являются абсолютными единицами, т. е. пользователи не смогут изменить размер шрифта.
Хотя я и не согласен с Джо Кларком по данному вопросу, тем не менее, в целом я разделяю его взгляды на создание доступных сайтов и рекомендую вам его книгу «Создание доступных веб-сайтов».
Следующее утверждение, которое будет рассмотрено и опровергнуто значительно быстрее, — это необходимость использования абсолютных единиц измерения при верстке текста. Оно основывается на заблуждении, что это единственный способ для дизайнера полностью контролировать внешний вид сайта.
Почему не стоит использовать пункты для задания размера шрифта?
Важнейшая проблема доступности сайта при использовании абсолютных единиц измерения размера шрифта обнаруживается, как только дизайнер начинает использовать каскадные таблицы стилей для верстки текстов своих веб-страниц.
Каскадные таблицы стилей вызвали к жизни новое явление — веб-сайты с абсолютно нечитабельными из-за маленького размера шрифта текстами, размер которых не может быть изменен средствами браузера. Подобное явление — прямой результат использования абсолютных единиц измерения, таких как, например, пункты, для установки размера шрифта, а также результат неосведомленности о том, что подобные страницы могут быть нечитабельны на компьютерах некоторых пользователей.
В кратце:
- Использование абсолютных единиц затрудняет или не позволяет многим посетителям изменить размер шрифта на предпочитаемое ими значение.
- Текст может быть абсолютно нечитабелен из-за маленького размера шрифта в зависимости от используемой для просмотра веб-страницы компьютерной системы.
Почему пункты для задания размера шрифта на экране — это плохо?
Данное объяснение предназначено только для настоящих «фанатов» веб-верстки, т. е. для тех, кому обязательно необходимо подробное рассмотрение проблемы «крошечного текста», как я ее называю. Это проблема, о которой в особенности необходимо знать пользователям компьютеров Macintosh.
Ниже вы видите пример того, как выглядит текст размером 9pt(пунктов), 8pt, 7pt и 6pt на PC с разрешением экрана — 96dpi (dots per inch — точек на дюйм).
Рисунок показывает, что только текст размером 6pt опускается ниже порога читабельности. Однако, тот же самый текст на компьютерах Mac выглядит по-другому из-за стандартного разрешения Macintosh в 72dpi.
Ясно видно, что для Macintosh проблемы с читабельностью текста начинаются сразу после отметки в 9pt. Наиболее общий пример — просмотр на компьютере Mac веб-сайтов, созданных на PC, и поэтому часто нечитабельных. Давайте кратко ответим на вопрос: «почему же так происходит?»
Основная причина в том, что для нормального отображения символов верхнего или нижнего регистра необходимо минимум 9 пикселей (есть шрифты, которые справляются с этой задачей, используя меньшее количество пикселей, но они, как правило, отсутствуют на компьютерах пользователей). Текст размером 8pt на Macintosh визуализируется восьмью пикселями, что слишком мало для четкого и разборчивого символа, вне зависимости от вашего зрения.
Подробнее:
- Стандартное разрешение Macintosh — 72dpi.
- 1 пункт — абсолютная единица измерения, равная 1/72 дюйма.
- Следовательно, для Macintosh 1 пункт равен 1 пикселю, т. е. в каждом дюйме на мониторах Mac ровно 72 пикселя.
- Для того, чтобы нормально визуализировать букву(глиф), включая верхний элемент литеры (часть строчной буквы, возвышающаяся над основной строкой — прим. перев.) и подстрочный элемент литеры, необходимо как минимум 9 пикселей.
- Размер шрифта в 8 пунктов означает, что для его визуализации будет использовано только 8 пикселей.
- 8 пикселей недостаточно для четкой визуализации шрифта на мониторах с разрешением в 72dpi (см. пункт 4).
В результате, как мы уже видели, любой текст, заданный абсолютной единицей измерения меньше 9 пунктов (или 9 пикселей), будет нечитабелен на компьютерах Mac с стандартным разрешением.
Стоит ли беспокоиться о пользователях Macintosh? Конечно стоит, учитывая, что около 25 миллионов человек используют Mac. Но еще больше стоит побеспокоиться о том, чтобы ваша страница нормально выглядела на самых различных устройствах с доступом в интернет, независимо от разрешения экрана. Многие подобные устройства, «карманные» компьютеры (PDAs — Personal Digital Assistants), например, проигнорируют ваши таблицы стилей, так что возможно размер шрифта не будет проблемой. Но все же я не считаю это слишком серьезным оправданием использования пунктов для задания размеров шрифта на экране.
Больший дюйм за те же деньги или Почему шрифт размером 8 пунктов читабелен на PC?
Стандартное разрешение PC — 96dpi. DPI расшифровывается как «точек на дюйм (dots per inch)», т. е. у пользователей PC изначально больше пикселей для визуализации текста. Но на экране PC этот очевидный факт лишь отвлекает наше внимание от основного вопроса; не существует соответствия между физическим дюймом и дюймом экранным. Система мер компьютеров PC не привязана к физической системе мер — дюйм для PC в 1,3 раза больше, чем обычный дюйм и дюйм для Macintosh.
Все сводится к тому, что все объекты на мониторах PC примерно в 1.3 больше, чем на Mac, это приводит к разнице в 2–3 пункта между формально одинаковыми размерами шрифтов на этих двух компьютерных платформах. Ирония в том, что нет ничего абсолютного в абсолютных единицах измерения размера шрифта в веб; текст, который хорошо смотрится на одном компьютере, может быть нечитабелен на другом, даже для людей с хорошим зрением.
Исправляем маленький нечитабельный текст
Internet Explorer 5 для Macintosh и Netscape 6 решают проблему несоответствия размеров шрифтов Mac и PC, устанавливая по умолчанию разрешение в 96dpi, как бы имитируя компьютеры PC для пользователей Mac. К тому же, в браузеры последнего поколения были добавлены функции увеличения выводимых на экран страниц, что позволяет обойти преграды, связанные с использованием абсолютных единиц измерения. Это замечательная идея, но она помогает лишь пользователям последних версий браузеров. Даже если все новые браузеры будут обладать подобными возможностями, все равно будут оставаться пользователи более старых версий, так что необходимость использования относительных единиц для задания размера шрифта остается.
Не считая полезных возможностей, которые могут быть или не быть в новых браузерах, отключение таблиц стилей сайта — это единственный способ для многих посетителей прочитать страницы, сверстанные мелким шрифтом, размер которого задан абсолютными единицами. Я полагаю, большинство посетителей не подозревает, что проблема кроется в таблицах стилей и то, что эти стили можно отключить. Скорее всего, они просто уйдут с сайта и будут искать другой источник необходимой информации.
Другие абсолютные единицы
Другие абсолютные единицы измерения, о которых я не упоминал, но которые также не подходят для верстки и отображения текста на экране — это пайки (pc), дюймы (in), сантиметры (cm) и миллиметры. Я не буду тратить время, отговаривая вас от использования каждой из этих единиц. Достаточно будет сказать, что я не рекомендую использовать их, и, если только вам не известны конфигурации компьютеров всех ваших посетителей, эти единицы могут привести к непредсказуемым результатам.
Так почему же тогда CSS позволяет использовать пункты, если они не предназначены для верстки текстов в сети?
Пункты предусмотрены спецификацией CSS для создания альтернативных таблиц стилей для устройств печати в случае, если посетитель захочет распечатать страницу вместо ее просмотра. В случае верстки текстов для печати использование пунктов обоснованно. Зная, что документ A4 стандарта Великобритании имеет размер 8,27 дюйма (21 см) на 11,69 дюйма (29,7 см) и 8½" (21,6 см) x 11" (27,94 см) для США, Канады и Мексики, имеет смысл задание полей, отступов страницы и размера шрифта через дюймы или пункты (пункт — 1/72 дюйма) или через любую другую абсолютную единицу измерения, т. к. в данном случае результат визуализации предсказуем.
Задание размера шрифта относительными единицами измерения
Хорошо. Теперь, если вы поняли, почему необходимо верстать текст, используя относительные единицы измерения вместо абсолютных, давайте рассмотрим возможные пути выполнения поставленной задачи, а именно:
- Использование каскадных таблиц стилей (CSS).
- Использование тега <FONT>.
- Использование html-тегов <BIG> и <SMALL>.
Из вышеперечисленного каскадные таблицы стилей больше всего соответствуют современным стандартам.
Использование каскадных таблиц стилей
Я предпочитаю использовать каскадные таблицы стилей из-за неоспоримых преимуществ: структура документа отделяется от его представления, уменьшается размер страницы и, соответственно, время ее загрузки (особенно из-за отсутствия сотен тегов <FONT>), также на подобных страницах теоретически легче менять дизайн. В CSS размер шрифта определяется свойством font-size и одной из следующих относительных единиц измерения:
- Единицы em, en или ex
- Проценты
- Относительные ключевые слова
- x-height
- Относительные ключевые слова задания абсолютного размера шрифта
- Пиксели (смотрите далее мои доводы против использования пикселей)
Для селектора body можно написать следующее:
body
{
font-size: 1em;
}В этом примере я использовал em — единицу измерения, знакомую всем печатникам. Я буду использовать em во всех последующих примерах по заданию размера шрифта в CSS и при рассказе о возможных проблемах и несовместимостях. В сети 1 em равен 100% размера шрифта родительского элемента. (Заметьте: «родительского элемента», а не «установленного в настройках браузера». Это важный принцип, который необходимо понять, чуть ниже я расскажу о нем подробнее.)
Даже при использовании относительных единиц измерения, остается несколько ловушек, которых необходимо избегать для создания действительно доступных и читабельных текстов в сети. Первый важный вопрос — это принцип наследования свойств в CSS. Понимание иерархической природы HTML и того, как CSS использует это, будет вашим первым шагом к решению потенциальных проблем, связанных с созданием доступных текстов. Несколько примеров сделают мои доводы очевиднее.
Em на практике
Пример 1
body
{
font-size: 1em;
}Если размер шрифта в настройках браузера равен 16pt, а размер шрифта селектора body — 1em, учитывая, что другие элементы не используют свои настройки font-size, то размер текста при отображении в браузере будет равен 16 пунктам, т. е. 100% от настроек браузера.
Пример 2
body
{
font-size: .9em;
}При тех же настройках браузера, если размер текста внутри элемента body установлен в .9em, размер шрифта будет равен 90% от 16pt.
Пример 3
body
{
font-size: .9em;
}
p
{
font-size: .9em;
}Снова учитывая те же настройки браузера, установим размер шрифта селектора body равным .9em и также для селектора p — .9em. Чему теперь будет равен размер текста внутри параграфа? 90% от настроек браузера (т. е. от 16pt) или 90% размера элемента body?
Правильный ответ: 90% от размера body, т. е. 90% от 90% от 16pt. Т. к. параграф (<p>) является дочерним элементом body, то перед применением собственных свойств размера шрифта он наследует и свойства body.
Все, теперь можно переходить к примерам практического использования данных возможностей и к примерам возможных ловушек, которые возникают при непонимании иерархической природы HTML.
Что же такое наследование?
Вот пример наследования — явления, когда дочерний элемент наследует свойства и их значения у родительского элемента:
Сначала исходный код стилевого форматирования текста:
<div style="font-size: 1em;">
<p>Этот параграф установлен внутри элемента div с размером шрифта в 1em, поэтому он должен отображаться размером шрифта, установленным в браузере по умолчанию.</p>
</div>
<div style="font-size: .9em;">
<p>Этот текст находится внутри элемента div с размером шрифта, равным .9em.</p>
<p style="font-size: .9em;">Этот параграф находится внутри элемента div с размером шрифта, равным .9em. Размер шрифта этого параграфа меньше, т. к. собственное свойство font-size этого параграфа также равно .9em.</p>
</div>А вот как это должно выглядеть:
Этот параграф установлен внутри элемента div с размером шрифта в 1em, поэтому он должен отображаться размером шрифта, установленным в браузере по умолчанию.
Этот текст находится внутри элемента div с размером шрифта, равным .9em.
Этот параграф находится внутри элемента div с размером шрифта, равным .9em. Размер шрифта этого параграфа меньше, т. к. свойство font-size этого параграфа также равно .9em.Если ваш браузер не понимает эту разметку, то вы можете посмотреть рисунок, иллюстрирующий наследование в CSS.
Данный пример показывает важность понимания принципа наследования при применении свойств таблиц стилей. Это в свою очередь напоминает нам о том, что правильные веб-страницы — это не набор тегов HTML, а документы, которые размечены в соответствие с определенным набором правил, предназначенных для отражения логической структуры документа.
Краткий обзор других относительных единиц измерения
Относительные ключевые слова
Задать относительный размер шрифта можно, используя ключевые слова «larger» и «smaller». Если вы смиритесь с тем, что никогда точно не узнаете, насколько оформленный таким образом текст будет больше или меньше родительского элемента, тогда можете спокойно пользоваться этим способом. Однако, как считают Чарли, Венди и Джо Петит (Charlie, Wendi, Joe Petitt) из Джейнсвилла (Janesville), создатели сайта Oo Kingdom: «При изменении размера текста в IE могут появляться необъяснимые ошибки», к тому же Netscape 4 (Mac) и IE3 просто проигнорируют эти данные ключевые слова, хотя возможно это не так уж и плохо.
«Smaller» означает, что указанный элемент меньше родительского на один размер. В приведенном ниже примере текст внутри body имеет размер 1em. И если в настройках браузера размер шрифта по умолчанию — 12pt, то параграф со свойством smaller будет равен приблизительно 10pt, т. е. на один размер меньше. Точную величину «одного размера» сложно установить, потому что она зависит от браузера. Вот пример использования ключевого слова smaller:
BODY
{
font-size: 1em;
}
P
{
font-size: smaller;
}Эрик А. Мейр (Eric A. Mayer), автор книги «Каскадные таблицы стилей для профессионалов» («Cascading Style Sheets: The Definitive Guide») издательства OReilly & Associates, указывает на проблемы, связанные с использованием этих ключевых слов. Подобные проблемы свойственны всем относительным единицам измерения, если использовать их, не учитывая иерархическую природу HTML и каскадную — таблиц стилей.
Эрик иллюстрирует это примерами задания размера шрифта внутри ячеек таблиц, например:
TD
{
font-size: smaller;
}Если таблицы вложены одна в другую, как делается на многих сайтах, то текст внутри них будет все меньше и меньше, пока не станет совершенно нечитабельным.
«Если есть вложения таблиц, текст внутри них очень скоро станет неразборчивым. Отдавая предпочтение табличной верстке, будьте предельно внимательны в использовании подобных способов определения размера шрифта. Также необходимо и тщательное тестирование дизайна перед его использованием на сайте.»
Ключевое слово «larger» работает аналогично «smaller», но только постепенно увеличивая размер шрифта. Те же предосторожности необходимы и в данном случае, иначе текст может стать натолько большим, что будет отнимать большую часть экранного пространства.
X-height
Другая относительная единица измерения — это x-height, равная высоте литеры «x» в нижнем регистре. Я не советовал бы вам пользоваться x-height, если только вы не профессионал в типографском деле и точно знаете, как будет отображен текст для посетителя, просматривающего ваш сайт с использованием шрифта, отличного от выбранного вами. Использование пользователем другого шрифта может сделать текст трудно читаемым.
Они относительные, но не так, как мы себе это представляем, Джим: использование ключевых слов задания абсолютного размера шрифта
Ключевые слова задания абсолютного размера (absolute size keywords) пропагандируются многими «смекалистыми» веб-дизайнерами, как окончательный ответ на вопрос: «как же все-таки определять размер шрифта». Несмотря на слово «абсолютный» в названии, это на самом деле относительные единицы; размер шрифта вычисляется относительно установленного в настройках браузера. Назначение этих ключевых слов — заменить систему измерения, изначально реализованную в теге font. Доступны следующие ключевые слова:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Идея этих ключевых слов хороша, и теоретически их можно рекомендовать к использованию, но, к сожалению, есть несколько связанных с этим проблем. Главная — это некорректная поддержка и старыми, и современными браузерами.
Джеффри Зельдман (Jeffrey Zeldman) пишет:
«При правильной и единообразной поддержке эти семь ключевых слов могли бы позволить дизайнерам определять примерные размеры шрифтов без использования пикселей, приводящих к проблемам доступности сайта… Поэтому W3C рекомендует их использование.»
(«Боязнь таблиц стилей 4»)
Великолепно! Я уже готов использовать их вместо em на своем сайте, но в следующем параграфе читаем:
«К сожалению, ключевые слова задания абсолютного размера шрифта непригодны для использования с современными браузерами, т. к., по нашему мнению, только IE5/Mac (и возможно Opera 4) отображают их корректно.»
Неправильная поддержка браузерами — основная помеха для использования ключевых слов задания абсолютного размера шрифта. Если вы готовы потратить время на изучение проблемы и поиск обходных путей, то она несомненно стоит того. Начните с работ Джеффри Зельдмана, Эрика Мейра и Тода Фахнера (Todd Fahrner), в которых они подробно рассматривают этот вопрос. Возможно, в будущем ключевые слова и будут самым верным решением, но не сейчас.
Почему бы не использовать пиксели?
Пиксели — это своеобразный компромисс между абсолютными и относительными единицами. Абсолютность объясняется тем, что если размер текста установлен в 12px, то он уже не изменится, независимо от настроек браузера. Однако физический размер в этом случае будет зависеть от разрешения монитора; на мониторе с маленькой разрешающей способностью глиф размером в 12px будет казаться больше, чем на аналогичном по диагонали экрана, но с более высоким разрешением. Причина этого в том, что чем больше разрешение монитора, тем больше пикселей используется для отображения картинки, которая всегда занимает одно и тоже физическое пространство (размер экрана), поэтому шрифт в 12px с увеличением разрешения визуально будет становиться все меньше и меньше. C этой точки зрения можно утверждать, что пиксели — относительные единицы измерения, зависящие от разрешения экрана.
Так стоит ли пользоваться пикселями для определения размера шрифта? «Дайте мне пиксели или дайте умереть», — восклицает Джеффри Зельдман в своей статье, рассматривающей все за и против точного определения размера шрифта в сети. Он рекомендует пиксели на том основании, что это наиболее совместимое с точки зрения дизайнера средство, доступное на разных компьютерных платформах и браузерах. Джеффри Зельдман признает, что пиксели сделуют невозможным для пользователей многих устаревших и современных браузеров изменение размера шрифта, в особенности это относится к пользователям IE5 и более ранних версий, пользователям всех версий IE Mac младше пятой. Он также замечает, что отсутствие у пользователей Linux шрифта, прописанного дизайнером в таблицах стилей, может привести к жалко выглядящему или неразборчивому тексту. Но Джеффри Зельдман считает указанные недостатки не такими серьезными, как у других единиц измерения, и поэтому останавливается именно на пикселях, как на лучшем из худшего.
Em отметаются автором, из-за отсутствия поддержки браузером Netscape 4 и из-за того, что IE3 интерпретирует em как пиксели (т. е. например, ваши заголовки размером 2em будут отображены двумя пикселями) — «лидер нашего хит-парада» по ошибкам интерпретации CSS.
C точки зрения обеспечения доступности сайта, проблемы, связанные с пикселями, перевешивают проблемы, возникающие при использовании em. Netscape 4, вообще игнорирующий em, — не проблема доступности сайта. Что касается проблемы IE3, то существуют обходные пути, заключающиеся в том, как в html-странице надо ссылаться на файл с инструкциями CSS (например, инструкция @import url("style.css"), которую не понимают Netscape 4, IE4 и ниже, позволит вам скрыть от устаревших браузеров нежелательные для них стили — прим. перев.). Даже если делать выбор с чисто практической точки зрения, при использовании em меньше посетителей будут испытывать неудобства, чем при использовании пикселей, так как доля пользователей IE3 незначительна по сравнению с IE4, IE5 для Windows, Netscape 4 для Mac и PC.
Лучшая относительная единица измерения?
En и проценты полностью идентичны единице em в своих целях и задачах, но я предпочитаю именно em, а не проценты, потому что:
- В типографском деле для задания размера шрифта традиционно использовались em, а не проценты.
- Размер текста проще рассчитать в em, чем в en или ex.
- Em и проценты не взаимозаменяемы при верстке веб-страниц, например, вы не сможете задать в em поле, эквивалентное 10% от ширины страницы.
По указанным выше причинам я использую em для задания размера шрифта, а проценты — для дизайна макета веб-страницы. С этим подходом связаны определенные проблемы, некоторые из которых уже упоминались в данной статье, о других будет рассказано ниже, однако проблемы могут возникнуть при использовании любых единиц измерения. Несмотря на проблемы, использование относительных единиц измерения и соответствие стандартам HTML — лучший способ поддержания совместимости страницы с различными системами и технологиями.
Проблемы, связанные с использованием относительных единиц
Каскадные таблицы стилей дают веб-дизайнерам множество возможностей по оформлению текста — теперь вы можете точно определить размер, цвет, положение текста на странице, поля, высоту строки, т. е. стиль текста. Но не все так хорошо при использовании CSS на практике.
Это нелепо, но каскадные таблицы стилей позволяют легко создавать веб-страницы, содержащие нечитабельный текст. Как было показано ранее, теперь довольно легко задать шрифт, размер которого ниже порога читаемости на некоторых компьютерных системах, или настолько большой шрифт, что он также будет непригоден для чтения. Использование CSS позволяет лишить посетителя возможности самостоятельно изменить размер шрифта на наиболее удобный.
Существуют и другие проблемы, неотносящиеся к теме данной статьи, и поэтому их мы обсуждать не будем. Они могут исходить из любой указанной ниже области:
Теги BIG и SMALL
Тод Фарнер (Todd Fahrner) замечает, что использование HTML-тегов BIG и SMALL приводит к наиболее совместимым и положительным результатам при установке размера шрифта в расчете на браузеры третьей версии и выше («По ту сторону тега FONT: практическое руководство по оформлению текста средствами HTML»). Эти теги очень просты в использовании. Следующий пример показывает, как сделать текст на один размер больше стандартного:
<big>какой-либо текст</big>Аналогично можно сделать текст и на один размер меньше:
<small>какой-либо текст</small> — установка размера шрифта на единицу меньше стандартного значения.За дополнительными примерами посетите сайт Тода Фарнера.
Единственная проблема, которую я вижу в данном подходе, заключается в том, что теги BIG и SMALL не несут логического смысла, только визуальный. Поэтому это не лучшее решение в плане совместимости с будущим веб. Если мы стремимся к отделению данных от представления, эти теги лучше заменить соответствующими стилями CSS. Однако замечу, что BIG и SMALL не являются устаревшими тегами в спецификации HTML.
Определение размера шрифта через тег FONT
Тег font отныне не является часть спецификации HTML 4. Однако, по злой иронии, намного сложнее сделать текст слишком маленьким или большим для чтения, используя font, чем при определении размера в таблицах стилей. Даже если дизайнер сделает весь текст на странице равным 1, т. е. на 40% меньше обычного значения, все равно пользователь сможет изменить эту установку через настройки браузера.
Размер шрифта через тег font устанавливается его атрибутом «size», принимающим в виде значений целые числа от 1 до 7. Например:
<font size="1">Или посредством установки значения, которое больше или меньше значения по умолчанию 3:
<font size="-2">Изменение значения атрибута size на единицу приводит к изменению размера шрифта на 20%.
Проблемы доступности текста, оформленного с помощью тега font, начинаются при задании цвета и гарнитуры шрифта, т. к. эти свойства текста, прописанные в атрибутах тега font, как правило, не поддаются изменению через настройки браузера посетителя.
Основной аргумент против тега font, кроме того, что это устаревший элемент, — сложность отделения данных от представления, что делает код сайта менее переносимым между различными платформами, более дорогим для обслуживания и поддержки, а также увеличивает размер страницы и время ее загрузки.
Доступность сайта снижается и при использовании тегов визуального форматирования для имитации соответствующих ситуации структурных логических тегов. Например, использование font для оформления заголовков большим размером шрифта и жирным начертанием вместо надлежащих в данном случае тегов заголовков.
Попрощайтесь с точными пиксельными макетами, встречайте «гибкий» дизайн
Использование относительных единиц измерения для определения размера шрифта представляет сложность для дизайнеров, привыкших создавать точные пиксельные макеты веб-страниц. Абсолютный контроль над веб-страницей при использовании относительных единиц невозможен; она будет меняться в зависимости от нужд посетителя и физических характеристик устройств вывода информации.
Линейные размеры веб-страницы невозможно предугадать — мониторы различных диагоналей, различные разрешения экрана, различные размеры окон браузера, устройства с маленькими, средними или большими экранами. Непредсказуемость — единственная неизменная истина. Поэтому единственный бесконфликтный выход из сложившейся ситуации в том, чтобы смириться с мыслью, что вы никогда не сможете полностью контролировать внешний вид сайта для ваших посетителей. Отказаться от этого принципа можно лишь при создании веб-сайтов для замкнутых систем вроде локальных сетей, если вы точно знаете размер и разрешение экрана, а также привычки и возможности ваших посетителей.
Огромное количество различных устройств доступа к информации — это главное достоинство сети, основная причина роста и развития интернета. Используйте эту сильную сторону сети себе во благо. Создавайте веб-страницы, которые достаточно гибки, чтобы соответствовать нуждам посетителей и их устройствам доступа. Используйте этот принцип и при задании размера шрифта ваших веб-страниц.
