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

Размещено на http://www.allbest.ru/

МГУ имени М.В. Ломоносова

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

Беляев А.А. преподаватель кафедры новых медиа и теории коммуникации и кафедры техники газетного дела и средств информации факультета журналистики

e-mail: sashabe@rambler.ru

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

Москва, Россия 22.02.2010

Аннотация

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

Ключевые слова: типографика, веб-дизайн, шрифт, веб-стандарты, веб-технологии, CSS

Как и многие другие понятия, связанные с оформлением вебсайтов, термин “веб-типографика” (англ. 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), моноширинные (monospace), курсивные (cursive) и аллегорические (fantasy) -- деление, в максимально обобщенном виде представляющее существующие шрифтовые классификации и одновременно указывающее на специфику компьютерной типографики, отводящей большую роль моноширинным шрифтам. Таким образом исключаются нежелательные ситуации абсолютной неопределенности при подборе подходящего шрифта. В то же время в механизме резервирования проявляется более широкий закон веб-дизайна, гласящий, что оформлению веб-страницы должна быть присуща известная степень гибкости, обусловленная как технологическими ограничениями, так и потребностями пользователя.

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

Оформительский базис, установленный первой версией спецификации, значительно укрепился с вхождением в обиход веб-дизайна утвержденной в 1998 г. второй версии каскадных таблиц стилей: свойством content, предназначенным для генерации несуществующего в тексте документа содержимого -- буллитов, заставок или декоративных скобок, возможностью назначать определенный вид кавычек для всего документа, автоматически создавать буквицы и оформлять первые строки абзацев. Остающаяся в статусе “черновика” и еще не утвержденная официально спецификация CSS третьей версии состоит из проектных модулей, многие из которых имеют прямое отношение к типографике и содержат такие нововведения, как разбитие текста на связные колонки (модуль Multicolumn Layout^[3]), снабжение текста тенью (модуль Text^[4], свойство 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 освобождает от этой необходимости.

Заключение

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

Список литературы

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

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

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

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

5. BibeaultB., Katz Y. JQuery in Action. Manning Publications, 2008.

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

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

Примечания

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

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

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

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

^[5] См., например, в руководстве Р. Раттера, идущего по стопам Р. Брингхерста и пропагандирующего “стиль” в веб-типографике: “Эффективное выравнивание по формату может быть достигнуто только в сочетании с переносами. <...> Поэтому не выключайте текст в Сети по формату” (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/).

Размещено на Allbest.ru