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

Раздел: Новые медиа

Статья посвящена актуальным проблемам типографики в веб-дизайне. Автор подробно останавливается на использовании шрифтов во Всемирной сети Интернет, способах их внедрения в веб-страницу. Рассматривается роль веб-стандартов в реализации типографических правил оформления текста. Делается вывод о значении технологий в веб-типографике и том пути, который ей еще предстоит пройти.

Как и многие другие понятия, связанные с оформлением веб­сайтов, термин “веб-типографика” (англ. web typographics) переводит на веб-почву привычное понимание типографики как искусства и ремесла оформления текста, визуальной интерпретации последне­го, если отталкиваться от формулировки, данной Р. Брингхерстом (Брингхерст, 2006: 20). В сферу ведения веб-типографики можно включить использование в веб-дизайне шрифтов как таковых и реализацию в нем типографических правил оформления текста.

Шрифты, применяющиеся при оформлении веб-страниц, оче­видно, следует отнести к экранным шрифтам. Экранные шрифты создавали задолго до начала эпохи Интернета для ориентированных на отображение текстовой информации экранных устройств, от компьютерных мониторов до банкоматов. Чтение с экрана не аналогично чтению с бумажного листа; экранные шрифты особым образом оптимизируются для просмотра на устройстве, обладаю­щем низкой разрешающей способностью. Производители цифро­вых шрифтов, как правило, внедряют в файл шрифта специальные инструкции — так называемые “хинты” (от англ. hint — “подсказ­ка”), которые управляют переводом геометрических контуров в понятный экранным устройствам растр. Производители операци­онных систем в свою очередь смягчают негативное воздействие низкого разрешения на рисунок шрифта с помощью технологий экранного сглаживания, таких, как ClearType в Windows и Quartz в Mac OS X (впрочем, эти технологии могут быть отрегулированы или вовсе отключены пользователем). Ввиду разнообразия аппа­ратных и программных конфигураций веб-дизайнеры повсеместно сталкиваются с проблемой различной отрисовки одного и того же шрифта. При этом само сглаживание может оказать негативное влияние на удобочитаемость текста на низких кеглях; многие экранные шрифты проектируются таким образом, чтобы обойти это препятствие.

Ограничения, налагаемые операционными системами, также сыграли свою роль в формировании нынешней типографической картины Всемирной сети. Ее основой стали так называемые “web-safe fonts” — шрифты, присутствующие в доминирующих на рынке операционных системах. Их число весьма невелико — около двад­цати. Сюда входят такие часто встречающиеся на веб-страницах шрифты, как Verdana, Arial, Times New Roman и Courier New. Не­смотря на то что “канон” таких шрифтов частично расширяется их вариантами и копиями, распространяемыми с различными ОС, уже на протяжении многих лет его состав сохраняет устойчивость. Это вызвано тем обстоятельством, что включенные в список “без­опасных” шрифты в основном удовлетворяют запросам дизайне­ров и пользователей в многоцелевом наборе гарнитур. Особенно это касается текстовых шрифтов; так, Verdana была разработана дизайнером Мэттью Картером специально для мелкокегельного компьютерного набора и как следствие идеально подошла для тек­стовой информации, публикуемой в Cети и составляющей огром­ную долю информационного наполнения Всемирной паутины.

Тем не менее проблема использования не входящих в “канон” шрифтов всегда стояла остро. Прежде всего это относится к таким элементам оформления, как заголовки или кнопки. За без малого два десятка лет истории веб-дизайна было найдено немало способов внедрения нестандартных шрифтов на страницу. Эти способы за­действовали весь потенциал доступных им веб-технологий. В идеале такой способ должен реализовывать все качества стандартного, присутствующего в поставке операционной системы шрифта: ми­нимальное влияние на время загрузки страницы, легкость процесса внедрения, неограниченность пользовательского взаимодействия с текстом (например, копирования), доступность для посетителей с ограниченными физическими возможностями, прозрачность кон­тента для поисковых систем, масштабируемость и кросс-браузерность, т.е. одинаковое отображение в различных браузерах. Наибо­лее очевидный вариант здесь — это загрузка набранного шрифтом текста в виде растрового изображения. Из указанных нами досто­инств “идеальной” реализации в данном случае соблюдается только последнее условие, а именно кросс-браузерность. Несмотря на это, указанный способ широко используется для постоянных, повто­ряющихся на страницах элементов, например в навигационных меню. Более поздние методики взяли на вооружение сложные веб­технологии, нередко их комбинируя. Так, методика под названием SIFR (англ. Scalable Inman Flash Replacement, масштабируемая подмена текста с помощью Flash по Инмэну) эксплуатирует воз­можности языка программирования Javascript и мультимедиа­платформы Adobe Flash для замены необходимых текстовых эле­ментов на Flash-вставки, представляющие собой тот же самый текст, но уже набранный необходимым дизайнеру шрифтом. Биб­лиотеки Cufon и typeface.js делают то же самое, однако уже без уча­стия Flash-плагина, что позволяет обойти ряд налагаемых им огра­ничений, в том числе и саму необходимость в его установке. Тем не менее производительность этих методов оставляет желать лучше­го, кроме того, они не поддерживают некоторые виды оформления текста, например выключку по формату или подчеркивание.

В настоящее время внимание профессионалов веб-дизайна об­ращено на технологию так называемых “веб-шрифтов” (англ. web fonts), с оговорками поддерживаемую отдельными браузерами с конца 1990-х гг., однако обретшую только сегодня повсеместную поддержку. В настоящее время веб-шрифты вошли в состав специ­фикации CSS3 (англ. Cascading Style Sheets, каскадные стилевые таблицы), 3-й версии языка стилевого оформления веб-страниц, составляющего одну из технологических основ веб-дизайна. Включив в стили оформления сайта правило @font-face, дизайнер может указать URL-адрес шрифта в Интернете и загрузить его для дальнейшего использования на странице. Таким образом открыва­ется широчайшее пространство для реализации творческой идеи, а нужда в использовании “обходных путей” для включения нужной гарнитуры отпадает.

Технология веб-шрифтов не свободна от недостатков. До сих пор серьезной преградой на пути развития веб-типографики явля­ется то, что скачивание шрифта в том или ином виде оказывает су­щественное воздействие на общее время загрузки страницы. Осо­бенно это актуально для стран, где развитие соответствующей инфраструктуры находится на сравнительно низком уровне, как, например, в России, где многие веб-серферы до сих пор выходят в Интернет с помощью модема и телефонной линии (Российский ры­нок..., 2009: 46). Кроме того, браузеры семейства WebKit (Apple Safari, Google Chrome) имеют свойство не отображать текст, набран­ный скачиваемым шрифтом, во время его загрузки. При невысокой скорости подключения эта особенность превращается в весьма серьезную проблему, поскольку при длительном отсутствии зри­мого контента пользователь может просто покинуть страницу.

Еще более значимой проблемой считают расплывчатость ситуа­ции с веб-шрифтами как объектом авторского права. Благодаря универсальности правила @font-face на веб-страницу может быть загружен шрифтовой файл любого формата из поддерживаемых ОС и браузером, в том числе незащищенный TrueType- или OpenType-шрифт. В компании “Microsoft” попытались разрешить эту ситуацию путем внедрения в четвертую версию браузера Internet Explorer поддержки собственного формата EOT (Embedded OpenType), за­шифрованного, а заодно и сжатого, чтобы решить указанную нами ранее проблему с большим размером загружаемого шрифтового файла. Тем не менее недоработанность самого формата и отсут­ствие поддержки прочих браузеров и операционных систем стали причинами его низкой популярности. Представленный в 2009 г. формат WOFF (Web Open Font Format) также сжимает шрифтовую информацию и, не шифруя ее, позволяет отслеживать использова­ние шрифта во Всемирной сети. Это обеспечило данному формату массовую поддержку производителей шрифтов, в том числе таких гигантов, как Monotype. Однако широкое внедрение этого, по всей видимости, перспективного формата в браузеры остается делом будущего. Пока же начали появляться серверы, подобные Typotheque (http://www.typotheque.com) и Typekit (http://typekit.com), которые сдают веб-шрифты “в аренду”: за определенную плату они предоставляют возможность скачивать нужный шрифт в за­шифрованной форме со своих серверов в момент доступа к стра­нице пользователя, благо поддержка последними версиями всех популярных браузеров технологии веб-шрифтов позволяет охва­тить более 90% аудитории Интернета.

Уже упомянутая нами технология стилевого оформления веб­страниц, CSS вкупе с языком разметки HTML (Hypertext Markup Language, язык гипертекстовой разметки) образует фундамент веб­стандартов (официально утвержденных технологических специ­фикаций), на которых зиждется веб-типографика. HTML задает логический костяк текста, размечая его фрагменты согласно их роли. Более общим элементам в языке разметки сопутствуют более специализированные. Так, общие элементы DIV (логически выде­ленная секция документа) и SPAN (логически выделенный фраг­мент текста) впоследствии уточняются с помощью таких элементов, как BLOCKQUOTE (обозначает длинную цитату), DFN (опреде­ление), ABBR (аббревиатура) и т.д. HTML, таким образом, пред­ставляет собой структурную опору для оформления частей доку­мента согласно их роли и задумке дизайнера. Подобная опора, очевидно, отсутствует в процессе производства печатных изданий. Необходимость внесения логической разметки в неструктуриро­ванные документы при их публикации в вебе обусловлена множе­ством факторов различного характера, от технологических (легкость машинной обработки и ее преимущества, например доступность документа для поисковых машин) до оформительских (гибкость и простота оформления). Хорошо структурированный документ, на­пример статья на сайте газеты, будет читаться легче и быстрее в силу наличия в тексте смысловых и визуальных “зацепок”. Харак­тер оформления этих зацепок задается уже с помощью CSS.

Каскадные таблицы стилей обладали изначально неплохим ба­зисом для решения задач по оформлению текста. Первая версия спецификации, опубликованная в 1996 г. и со временем нашедшая поддержку практически во всех распространенных браузерах, по­зволяла изменять способ выключки текста, создавать отбивки (свойство padding) и красные строки (text-indent), форматировать нумерованные и ненумерованные списки (list-style), регулировать величину межстрочных (line-height), междусловных (word-spacing) и межбуквенных (letter-spacing) пробелов. Тогда же были заложе­ны два ядра CSS-типографики — это механизм резервирования шрифтов (англ. font stacks) и собственная система единиц измере­ния. В первом случае мы говорим о принципе, позволяющем ком­пенсировать разнобой шрифтовых наборов у разных пользовате­лей и указывать шрифтовые комбинации в форме списков вместо одного твердо заданного шрифта (Мейер, 2006: 124). В случае если первого шрифта в списке на компьютере нет, используется второй, и т.д. Если все шрифты, указанные дизайнером, в компью­тере пользователя отсутствуют, браузер имеет право применить лю­бой шрифт из заданной в конце списка классификационной груп­пы, которых в спецификации насчитывается пять. Это шрифты с засечками (serif), без засечек (sans-serif), моноширинные (mono­space), курсивные (cursive) и аллегорические (fantasy) — деление, в максимально обобщенном виде представляющее существующие шрифтовые классификации и одновременно указывающее на спе­цифику компьютерной типографики, отводящей большую роль моноширинным шрифтам. Таким образом исключаются неже­лательные ситуации абсолютной неопределенности при подборе подходящего шрифта. В то же время в механизме резервирования проявляется более широкий закон веб-дизайна, гласящий, что оформлению веб-страницы должна быть присуща известная степень гибкости, обусловленная как технологическими ограничениями, так и потребностями пользователя.

Спецификацией CSS1¹ также определяются единицы измере­ния, используемые помимо прочего для задания кеглей шрифтов. Сюда относятся как абсолютные единицы, вычисляемые согласно физическим системам мер (в том числе пиксели и традиционные типографские пики и пойнты), так и относительные, рассчитывае­мые относительно абсолютных, — это в первую очередь единица em², представляющая собой высоту прописной буквы М в данной гарнитуре. В дизайнерской практике в em^, как правило, задаются размеры любых элементов; базовый “кирпичик”, от которого от­талкивается единица в 1 em, указывается в пикселях, что позволяет гибко управлять размерными характеристиками макета (особенно при его масштабировании пользователем) и одновременно упоря­дочивает распределение размерных пропорций на странице. Как видно, типографике может отводиться определяющая роль в макете веб-страницы как устойчивой системе соотношений.

Оформительский базис, установленный первой версией специ­фикации, значительно укрепился с вхождением в обиход веб-ди­зайна утвержденной в 1998 г. второй версии каскадных таблиц стилей: свойством content, предназначенным для генерации несуществую­щего в тексте документа содержимого — буллитов, заставок или декоративных скобок, возможностью назначать определенный вид кавычек для всего документа, автоматически создавать буквицы и оформлять первые строки абзацев. Остающаяся в статусе “черно­вика” и еще не утвержденная официально спецификация CSS тре­тьей версии состоит из проектных модулей, многие из которых имеют прямое отношение к типографике и содержат такие ново­введения, как разбитие текста на связные колонки (модуль Multi­column Layout³), снабжение текста тенью (модуль Text⁴, свойство text-shadow), новые варианты алгоритмов просчета строк при вы­ключке по формату (модуль Text, свойство text-justify), обрезание длинных слов (модуль Text, свойство word-wrap) по ширине тек­стового блока и текстовых строк с добавлением многоточия (там же, свойство text-overflow). При этом некоторые значимые аспек­ты типографической парадигмы, например переносы, в стандарте до сих пор четко не сформулированы и не реализованы. Проблема неполной поддержки каскадных таблиц стилей в браузерах, по-ви­димому, еще долго будет преследовать веб-дизайн. Если одни брау­зеры, например Apple Safari или Google Chrome, идут в этом от­ношении далеко впереди других, обеспечивая поддержку еще не принятым модулям и предлагая свои нововведения, то другие, как Internet Explorer, вплоть до самого недавнего времени не могли полностью и адекватно реализовать текущую спецификацию CSS.

Здесь на помощь приходит третье основание веб-стандартов — язык веб-программирования Javascript. Написанные на этом языке библиотеки общего назначения (JQuery, Mootools, Prototype) и специализированные, предназначенные для решения конкретных типографических задач, помогают воссоздать те возможности, ко­торые только намечены в проектах спецификаций каскадных таб­лиц стилей. К примеру, отечественная разработка под названием Hyph реализует автоматическую расстановку переносов в тексте веб-страницы на русском и английском языках. Библиотека JQuery, спроектированная на основе черновика CSS3 известным специалистом в области веб-стандартов Джоном Резигом, позво­ляет дизайнеру воспользоваться их преимуществами даже с теми браузерами, которые не поддерживают нововведения третьей вер­сии. Так, она помогает организовывать текст в связные колонки, имитировать привязку текстовых строк и элементов к базовой сет­ке, автоматически убирать висячие строки и т.д. Почти все эти воз­можности можно было бы воспроизвести и без библиотеки в каче­стве посредника, написав программу-сценарий на “чистом” Javascript, однако тогда дизайнер был бы вынужден тратить многие часы на создание кода этой программы и его отладку. Близость синтаксиса JQuery к синтаксису языка CSS освобождает от этой необходимости.

Заключение

Как мы видим, темпы развития веб-технологий, связанных с типографическим аспектом дизайна, а это прежде всего каскадные таблицы стилей, внушают оптимизм, — ведь росту технологического потенциала сопутствует расширение творческого инстру­ментария веб-дизайнера, как нигде очевидное в сфере типографи­ки, понемногу обретающей на новой веб-почве прежнюю гибкость и богатство приемов. В то же время следует констатировать, что многие проблемы веб-типографики все еще не решены. Выключка по формату не рекомендуется к использованию многими специалистами⁵ из-за отсутствия в актуальных версиях каскадных таблиц стилей технологий, которые позволили бы реализовать переносы и настраивать параметры выравнивания текста. Этот аспект осо­бенно существенен для русского языка из-за большей, чем в ан­глийском языке, средней длины слова. По этой же причине в рус­скоязычном секторе Интернета распространен тип так называемых “резиновых”, растягивающихся по ширине окна макетов, взятый на вооружение также и многими отечественными СМИ (в их числе gazeta.ru, lenta.ru, интернет-версии “Коммерсанта” и “Российской газеты”). В то же время с распространением широкоэкранных мо­ниторов стало ясно, что подобный подход чреват чрезмерным рас­тяжением текстовых блоков и ухудшает удобочитаемость. Поэтому несомненно, что, как и в традиционной “типографике бумажного листа”, в веб-типографике всегда будут оставаться актуальными качества, ценимые в дизайнере, — чувство ритма, чувство меры, чувство равновесия и аккуратное обращение со словом.

Примечания 

¹ Спецификация CSS1 доступна по адресу http://www.w3.org/TR/REC-CSS1/

² В инструментарии CSS имеется также единица ex, измеряемая соответствен­но по высоте строчной буквы x, однако она практически не используется из-за слабой поддержки ее браузерами.

³ См. соответствующий раздел в черновике спецификации по адресу http://www.w3.org/TR/css3-multicol/

⁴ См. соответствующий раздел в черновике спецификации по адресу http://www.w3.org/TR/css3-text/

⁵ См., например, в руководстве Р. Раттера, идущего по стопам Р. Брингхерста и пропагандирующего “стиль” в веб-типографике: “Эффективное выравнивание по формату может быть достигнуто только в сочетании с переносами. <...> Поэтому не выключайте текст в Сети по формату” (Set ragged if ragged setting suits the text and page // Rutter R. The Elements of Typographic Style Applied to Web. Режим доступа: http://www.webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.3/).

Библиография

Брингхерст Р. Основы стиля в типографике. М.: Д. Аронов, 2006.

Зельдман Д. Веб-дизайн по стандартам. М.: НТ Пресс, 2005.

Мейер Э. CSS — каскадные таблицы стилей: Подробное руководство. СПб.: Символ-Плюс, 2006.

Российский рынок периодической печати. Состояние, тенденции и перспективы развития / под общ. ред. В.В. Григорьева. М.: Федеральное агентство по печати и массовым коммуникациям, 2009.

Bibeault B., Katz Y. (2008) JQuery in Action. Manning Publications.

Lie H.W., Bos B. (2005) Cascading Style Sheets — Designing for the Web. Addison-Wesley Professional.

Swedberg K, Chaffer J. (2007) JQuery Reference Guide. Packt Publications.

Поступила в редакцию 22.02.2010