Искусство и традиции типографики
Уже более 25 лет компания Майкрософт уделяет особое внимание шрифтам и разработке шрифтовых технологий. Для понимания технической основы типографики в системе Windows полезно сделать краткий обзор наиболее важных событий в проектировании шрифта за последние 500 лет. При обращении к 500-летней истории шрифта нельзя не упомянуть вклад Иоганна Гуттенберга в развитие металлического наборного шрифта в Европе. И хотя дискуссии, в основном, посвящаются развитию шрифта и типографики для латиницы, в этой статье я попытаюсь уделить внимание не менее богатой истории других видов письменности.
Ремесленник, изготавливавший шрифт для печатного пресса, был инженером и художником одновременно, и в процессе работы решал множество технических проблем. Первым шагом в создании элемента свинцового шрифта был процесс вырезания пуансона. Он включал в себя вырезание объёмного изображения каждого знака гарнитуры в зеркальном отражении на конце стального пуансона, причём для каждого размера шрифта использовались различные изображения и получались отдельные пуансоны. Символы различных кеглей не были механически масштабированными копиями знаков другого размера. Наоборот, знаки имели свои характерные элементы в зависимости от того, в каком кегле шрифт будут читать. В мелком кегле у знаков текстового шрифта обычно был несколько увеличенный рост строчных, большая ширина основного штриха и меньший контраст основных и соединительных штрихов, а знаки крупного кегля имели уменьшенную высоту строчных и больший контраст.
Рис.1. Примеры пуансонов
Используемая в компьютерном наборе типометрическая система осталась со времён вырезания пуансонов и печатного пресса. Пуансоны использовали для изготовления формы, форма применялась при выбивании зеркального изображения на конце металлического стержня? литеры. Размер шрифта измерялся высотой литеры, которая в типографике называется кегельной площадкой. Разные шрифты отличаются пропорциями кегельной площадки, поэтому иногда различные гарнитуры одного кегля выглядят как шрифты разных кеглей. В компьютерной среде традиционной единицей измерения шрифта является пункт. Пункт соответствует 1/72 дюйма или 0,355 мм. Использовать точные единицы (какими являются пункты, миллиметры или дюймы) гораздо удобнее, чем пиксели. В этом случае такие техники, как оптическое масштабирование, создают комфорт для читателя. В конце концов, человеческие глаза не меняют своего размера.
Рис.2. Буква М гарнитуы Perpetua (слева) и Calisto (справа) в пределах кегельной площадки
Мастера-пуансонисты должны были разбираться в технических возможностях печатного пресса, а также особенностях сортов бумаги и красок, чтобы разрабатывать шрифты с учётом разных характеристик впитываемости. Пуансонисты точно рассчитывали соотношение ширин, а также насыщенность и контраст основных и соединительных штрихов.
Многие символы сами по себе представляли проблему для свинцового шрифта. Некоторые знаки, расположенные рядом, мешали друг другу. Примером такого неудачного сочетания в латинице служит буквосочетание f и i. Для решения проблемы были созданы лигатуры, объединяющие две буквоформы в один глиф. (Исторически, лигатуры-сокращения применялись в тексте как альтернативные глифы для выключки строки текста, например, амперсанд первоначально представлял собой сокращение от букв e и t.) Эта техника была не нова для металлического набора, ещё в рукописях раннего средневековья встречались сочетания букв, позволяющие помещать строку на странице.
Рис.3. Лигатуры. Сверху: сочетания fi и fl курсивного начертания шрифта Times New Roman без лигатур. Внизу: сочетания fi и fl курсивного начертания шрифта Times New Roman в виде лигатур
Во времена металлического набора дизайнеры шрифта и типографы стремились усовершенствовать эстетические и функциональные качества текста на бумаге. Использование капители, спроектированной в соответствии с насыщенностью строчных глифов, использование цифр старого стиля, правильное оформление переноса и выключки - всё это помогало создать страницу текста ровного серого тона - так говорят типографы, имея в виду одинаковый ровный тон текста без скоплений чёрного цвета или белых пятен, разрывающих страницу. Красота хорошо спроектированной книги или журнала облегчает чтение.
Рис. 4. Сверху: шрифт Contantia. Прописная М, капительная М, строчная m. (Заметьте, что общая насыщенность истинной капительной М гармонично соответствует строчной)
В конце концов, именно типографика с помощью соответствующих шрифтов и приёмов позволяет передать содержание текста наиболее эффективно и способствует его пониманию. В сети мы сталкиваемся со множеством ограничений - от мониторов разного размера и с разным разрешением экрана до серьёзной нехватки высококачественных экранных щрифтов, которые помогли бы участникам сетевого общения передавать свои мысли. Тем не менее, есть возможность всё это учесть и обеспечить богатство впечатлений читателей от типографики.
Зачастую при разработке инструментов для полноценной типографики возрастает беспокойство по поводу их неправильного использования, и, без сомнения, оно вполне обосновано. Хорошая типографика незаметна и не мешает чтению. Необходимо указывать веб-дизайнерам на значение качественной типографики и создавать инструменты, облегчающие им задачу. Здесь мне пришла на ум цитата из эссе Беатрисы Уорд «Хрустальный кубок» (http://www.nenne.com/typography/crystalgoblet1.html):
«Печатное дело (или дизайн веб-страниц) требует сдержанности ума, из-за отсутствия которой многие виды изобразительного искусства до сих пор барахтаются в застенчивых и сентиментальных экспериментах. Совсем не просто и не скучно работать, добиваясь прозрачности страницы. Выставлять всё напоказ гораздо легче, чем добиваться порядка. Когда вы поймете, что уродливая типографика очень заметна, вы сможете добиться красоты, как мудрый человек находит счастье? думая совсем о другом.»
Чтение и мозг
Даже хороший дизайн страницы бесполезен, если читатель не способен понять содержание материала. Чтение - это не просто разглядывание страницы и проглатывание её содержимого, это процесс, включающий комплекс взаимосвязанных действий, «танец» глаз и мозга, где глаза начинают движения. Эти движения делятся на саккады, фиксации и регрессивные саккады.
Человеческий глаз приспособлен для чтения текста с высотой букв 4 мм с расстояния 50 см. Для того, чтобы поймать пространственную частоту текста, необходимо положиться на работу центрального участка в работе зрения, называемого фовеа централис.
Рис.5. На изображении показана резкость фовеального зрения при чтении (когда один глаз закрыт). Нижняя строка иллюстрирует относительную резкость зрения в процентах
Фовеальное зрение имеет угол в 2о, это значит, что с расстояния 50 см и при высоте знаков 4 мм (около 12 пунктов) мы можем одномоментно декодировать около 7-8 таких знаков. Точка фиксации? это центр фовеального зрения, обычно он смещен влево от середины английского слова и никогда не попадает на границу слова. Мы задерживаем внимание на этой группе знаков приблизительно на 200-250 мкс и начинаем процесс декодирования конкретных символов, составляя из них возможные варианты слова. Во время фиксации мы также прикидываем расположение следующих 7-8 символов, иногда перепрыгивая через короткие предсказуемые слова. Этот переход к следующим символам называется «саккада»? баллистическое движение глаза, во время которого зрение размывается. И хотя большинство саккад направлено вперёд по тексту, опытные читатели 10-15% времени всё же тратят на возвратное движение глаз, что связано с недопониманием или морганием. Эти движения называются регрессивными саккадами.
Рис.6. Воспроизведение саккад в тексте
На процесс чтения могут повлиять и факторы, не связанные с содержанием текста, например, увеличенная длительность фиксации и слишком большое число символов, подлежащих распознаванию за это время. Другие факторы, например, укороченные саккады и избыток регрессивных саккад, также могут помешать чтению. Чтение с монитора затрудняет и то, что при типичной для восприятия с расстояния 50 см высоте знаков размер элементов глифа не превышает одного пикселя. Развитие технологий отображения текста или увеличение разрешения экрана могут улучшить аспекты чтения, связанные с движением глаз.
Зрительная система человека играет ключевую роль в процессе чтения, так как при восприятии больших отрезков текста она испытывает значительное напряжение. В целом, мышцы глаз очень мощные. Фиксации и саккады, о которых говорилось выше, возникают не только во время чтения, но и при восприятии большей части визуальной информации, например, когда мы на кого-нибудь смотрим. Однако некоторые способы отображения текста могут оказать негативное влияние на мышцы зрительной системы и привести к переутомлению глаз. Исследования показали, что чтение серого шрифта на белом фоне или размытого текста ведёт к переутомлению мышцы, которая отвечает за моргание и косые движения глаз. Такой же эффект даёт чтение текста, набранного слишком мелким кеглем.
Некоторые аспекты процесса чтения в большей степени относятся к работе мозга, а не глаз. Одно из направлений исследований, важное для дизайна веб-страниц, связывает понимание содержания текста с использованием определённого шрифта. Большая часть текстов, намеренно или нет, передаёт один или несколько эмоциональных оттенков, таких как серьёзность или легкомыслие, смех или печаль, официальность или непринуждённость. Это вполне очевидный факт, и авторы используют это явление, подбирая слова, более глубоко передающие смысл. Подобным же образом, пусть и не так заметно для далёких от типографики людей, оттенки и эмоции выражают разные шрифты. В результате исследований, во время которых опрашиваемые должны были соотнести шрифт с вызываемыми эмоциями, выявилось наличие стойких ассоциаций. Дополнительные исследования показали, что, если образ шрифта соответствует содержанию текста, люди читают его быстрее, и наоборот. Вывод таков: выбор подходящего шрифта важен для правильной подачи содержания веб-страницы. Покупка подходящих гарнитур и использование их возможностей по встраиванию оказывают существенное влияние на то, как мы читаем и понимаем содержание текста.
Кроме выбора шрифта и оформления текста, существуют и другие приёмы типографики, необходимые для понимания его содержания. Макет с нужной длиной строки, правильная расстановка переносов, интерлиньяж и грамотное использование атрибутов формата OpenType (лигатуры, кернинг, истинная капитель и цифры старого стиля)? всё это необходимо для обеспечения удобного и эстетически приятного процесса чтения. Удивительно, но научные исследования с трудом соотнесли эти требования и преимущества для процесса чтения. Однако другие исследования показали значительные преимущества хорошо спроектированной и эстетически привлекательной страницы текста, способствующие решению когнитивных задач. Это связано с высокоразвитыми функциями мозга и включением того, что мы читаем, в нашу картину мира.
Рис.7. Правила поведения шрифта в формате OpenType
Экран и технологии отображения шрифта
Экран компьютера бросил вызов технологиям, связанным с восприятием текста, так как низкое разрешение было главным препятствием для комфортного чтения. Усугубляли проблему и другие факторы, такие как низкий контраст контуров знаков, неудобное с точки зрения эргономики чтение с больших закреплённых мониторов. 25 лет назад мы думали, что аппаратные средства решат эту проблему так же быстро, как это было с процессорами, памятью и жёсткими дисками, но технологии отображения текста на компьютерном экране развивались очень медленно. Четверть века назад использовались мониторы на основе электронно-лучевых трубок, с разрешением около 70 пикселей на дюйм. Для многих дисплеев эта разрешающая способность относилась только к горизонтали, по вертикали она могла быть в 2 раза меньше, из-за чего появлялись прямоугольные пиксели. Через 10 лет с появлением LCD-мониторов разрешение экранов ноутбуков возросло до 85 пикс/дюйм, что превысило предыдущие характеристики на 15 пикс/дюйм.
Спустя ещё 15 лет разрешение большинства мониторов настольных компьютеров достигло менее 110 пикс/дюйм, то есть, за 25 лет произошло повышение на 40 единиц (60 %), в то время как ожидаемое повышение мощности процессоров составило 8000 раз. Меньшие дисплеи мобильных телефонов и даже ноутбуков добились более значительных результатов, но даже если принять за наибольшее разрешение сегодня 300 пикс/дюйм, достигается увеличение лишь на 325 %.
Не имея более совершенных аппаратных средств, мы можем полагаться лишь на некоторые технологические решения, способные улучшить качество отображения текста на компьютерных дисплеях с низким разрешением. Первым шагом на пути к качественному отображению текста стал разработанный компанией Apple формат TrueType, который Microsoft впервые встроили в Windows 3.1 в 1992 г.
Технология TrueType работает с сеткой высокого разрешения, основанной на кегельной площадке шрифта. Эта сетка измеряется в «единице на кегельную площадку» и в шрифте формата TrueType составляет обычно 2 в степени 2048. Возможны другие величины, регулирующие соотношение между пространством, необходимым для отображения данных и возможным уровнем детализации. Каждый знак оцифрован путём трассировки его внешних контуров и соединения простейших графических элементов: точек, линий и кривых. Для каждого знака создаётся группа контуров, описывающая область, условно заполняемую краской при отображении шрифта.
Иногда оцифровывают металлические литеры, иногда используют оптические таблицы от более ранней технологии фотонабора, также оцифровывают следы чернил на бумаге и, наконец, некоторые шрифты разрабатываются в программах, где дизайнер создаёт необходимые для описания знаков отрезки и кривые.
Рис.8. Контур строчной m из точек, отрезков и кривых линий
Для вывода контура знака на экран или принтер его точки должны быть масштабированы до нужного размера. Для этого требуется знать, какова была величина шрифта (единицы на кегельную площадку) при создании файла, размер точек для вывода изображения и разрешение устройства вывода. Затем определяется масштаб точек. Когда масштаб соответствует устройству вывода, технология TrueType выполняет операцию заливки: если центр пикселя находится внутри контура знака, пиксель заливается цветом текста, в противном случае он остаётся залитым цветом фона.
Если устройство обладает высокой разрешающей способностью, например, 600 пикс/дюйм и выше, технология работает очень хорошо, создавая у читателя приятное впечатление. Трудности возникают при работе с низким разрешением, особенно при распространённых текстовых размерах шрифта и разрешении менее 120 пикс/дюйм. Если размер элемента, подлежащий точному воспроизведению, меньше или равен 1 пикселю, проблемы закругления сильно вредят качеству отображения текста.
Чтобы опытные дизайнеры могли с помощью автоматизированных средств улучшить качество отображения текста устройствами с низким разрешением или в мелком кегле, в технологию TrueType встроен специальный язык программирования. Корректировка масштабирования шрифта по кеглю обычно называется хинтованием и включает написание на встроенном интерпретационном языке программирования «инструкций» для редактирования формы глифов. Этот язык используется как пакетный интерпретатор с байтной кодировкой и содержит примитивы и структуры данных. Указания, регулирующие очертания глифов, помогают достичь качественного отображения текста и сделать его удобочитаемым.
Многочисленные группы инструкций для TrueType включают в себя управление стеком, подпрограммы и условия, математические примитивы и булевские объекты, контроль переменными состояния, управление контурами и структурами данных. Управление контурами и переменные состояния - это компоненты, оптимизированные специально для работы с контурами в TrueType.
Будучи достаточно богатым, этот язык предоставляет хинтовщику различные способы решения одной проблемы. Существует несколько достаточно распространённых методов (http://www.microsoft.com/typography/hinting/hinttut3.htm) хинтования шрифта. Один из них называется сеточным и заключается в выравнивании контуров глифа относительно границ пикселей или подпикселей. Проблема закругления знаков минимизируется путём тщательного выравнивания контура по сетке и привязки к её узлам. Другим методом, задействующим сетку, является использование структур данных в TrueType для поддержания равномерной сетки как внутри глифов шрифта, так и между ними. Например, если ширина вертикального штриха строчной m составляет 2 пикселя, остальные штрихи обычно тоже должны быть 2 пикселя в ширину, и другие подобные глифы шрифта должны иметь штрихи той же ширины. Хотя это кажется вполне очевидным, при изменении размера шрифта выравнивание не происходит само по себе, его необходимо тщательно регулировать хинтованием. С этим и связан метод корректировки толщины штрихов. В контуре встречаются неуловимые или же значительные отличия, которые могут быть незаметны. При использовании метода регулировки с помощью структур данных в мелком кегле детали опускаются, а в случае увеличения размера (что означает появление большего числа пикселей для описания глифа) разрешается появление различий между штрихами. И, наконец, важным аспектом хинтования, особенно для мелких кеглей и устройств с низким разрешением, является дельта-хинтование. Дельта-хинтование - это создание коротких инструкций для контура, которые точно регулируют его форму для знака определённого кегля или диапазона размеров. Иногда метод применяется для закрепления пикселя, потерянного из-за ошибки закругления, также его используют для регулировки основных характеристик шрифта, таких как высота строчных букв или ширина основного штриха. На этом список приёмов хинтования не заканчивается, существует гораздо больше идей, но данный краткий обзор не позволяет нам их рассмотреть.
Рис.9. Нехинтованная строчная m, представленная в два уровня
Когда компания Майкрософт включила хинты в загружаемые нами шрифтовые файлы, ответственность за написание кода легла на опытных типографов. Подобно пуансонистам старины, кропотливо вырезавшим буквы из стали, хинтовщик цифрового шрифта, создавая указания, находит компромисс между техническими ограничениями своей эпохи и особенностями человеческого восприятия в процессе чтения. Основные решения, как, например, выбор между симметрией или сохранением пропорций глифа, установление соответствующих данному размеру кегля отклонений, точная регулировка пиксельной формы и создание инструкций для буквоформы определённого размера, в котором будет представлен глиф - подобно оптическому масштабированию, всё это входит в компетенцию хинтовщика.
Рис.10. Японский шрифт Meiro, в колонке слева - без хинтов, в колонке справа с хинтами
Находились и противники хинтования цифровых щрифтов, полагающие, что оно вносит нелинейный элемент в «истинный дизайн» шрифта. Исторически не было никакого «истинно» профессионального дизайна, вместо этого каждый цифровой шрифт настраивается для воспроизведения аппаратными устройствами и оптическими инструментами просмотра самим дизайнером, и в проектах всегда был момент нелинейности, отражающий нелинейность зрительного аппарата или разрабатываемых людьми технологий. Идея оптического масштабирования в основе своей нелинейна, и основана на человеческой психологии. Такие особенности проектирования шрифта, как трэппинг, также нелинейны и разработаны для решения проблем взаимодействия чернил, металла и бумаги. Созданные опытным типографом хинты и «нелинейные» элементы улучшают эстетические и функциональные качества шрифта.
Другой важный аспект красоты и функциональности - атрибуты форматирования OpenType. Технология OpenType была разработана компанией Майкрософт в 1994 г. как способ поддержать передовые типографические средства, оставаясь верными принципам кодировки Юникод. В задачи Юникода не входило обеспечение представления форм (лигатур, капители, цифр старого стиля и т.д.) для каждого глифа, вместо этого искали другой способ их кодировки, Так компанией Майкрософт был разработан формат OpenType, первоначально называвшийся True Type Open. В 1996 году к Майкрософт для совместного введения формата OpenType, включавшего технологию TrueType Open, присоединилась компания Adobe. Юникод и формат OpenType позволяют выбирать из богатого набора знаков как для латиницы, так для других систем письменности. Некоторые виды письменности, например, арабская или индийская, требуют подобную систему для отображения минимальных средств языка, в случае же полного расширенного набора получается очень красивый шрифт. Богатые традиции типографики для латиницы, зародившиеся ещё во времена металлического набора, нуждаются в такой технологии как OpenType.
Рис.11.Цифровой шрифт: Арабский набор, пример иллюстрирует альтернативные формы, основанные на контексте: унциальная буква Jeem приобретает различную форму в зависимости от того, за какой буквой следует
Формат OpenType описывает свойства шрифта, закреплённые в различных системах письменности и языках. Свойства могут устанавливаться по умолчанию, могут быть применены ко всему шрифту или же к определённой группе знаков Юникода, когда необходимо заменить используемый по умолчанию символ каким-либо другим или изменить его расположение. Замена может происходить по схеме: один глиф - на один глиф, один глиф - на несколько глифов, несколько глифов - на один основной, основной - на контекст из глифа и его окружения. Такие свойства, как кернинг, обеспечиваются изменением положения единичных глифов по отношению друг к другу.
Рис.12. Цифровой шрифт: Арабский Упрощённый, кернинг в OpenType
Имея качественный шрифт и формат, остаётся лишь достойно представить его на экране для того, чтобы глазу читателя было максимально комфортно.
Все описанные здесь типографические тонкости должны гармонично сочетаться для обеспечения приятного визуального опыта читателя. Зачастую чтение воспринимается как нечто само собой разумеющееся - большинство из нас учится читать ещё в детстве, и мы быстро забываем о трудностях этого процесса. Хорошо то, что мы можем не концентрироваться на процессе чтения, и сосредоточиться на содержании текста. Если мы, разработчики шрифтов и браузеров, а также веб-дизайнеры качественно выполняем свою работу, то содержание выходит на первый план, и читающий может сконцентрироваться на понимании текста, а не на декодировании составляющих его символов.
Автор - fbcontrb (Fontblog)
Перевод - admin (justnotes.ru)
Ремесленник, изготавливавший шрифт для печатного пресса, был инженером и художником одновременно, и в процессе работы решал множество технических проблем. Первым шагом в создании элемента свинцового шрифта был процесс вырезания пуансона. Он включал в себя вырезание объёмного изображения каждого знака гарнитуры в зеркальном отражении на конце стального пуансона, причём для каждого размера шрифта использовались различные изображения и получались отдельные пуансоны. Символы различных кеглей не были механически масштабированными копиями знаков другого размера. Наоборот, знаки имели свои характерные элементы в зависимости от того, в каком кегле шрифт будут читать. В мелком кегле у знаков текстового шрифта обычно был несколько увеличенный рост строчных, большая ширина основного штриха и меньший контраст основных и соединительных штрихов, а знаки крупного кегля имели уменьшенную высоту строчных и больший контраст.
Рис.1. Примеры пуансонов
Используемая в компьютерном наборе типометрическая система осталась со времён вырезания пуансонов и печатного пресса. Пуансоны использовали для изготовления формы, форма применялась при выбивании зеркального изображения на конце металлического стержня? литеры. Размер шрифта измерялся высотой литеры, которая в типографике называется кегельной площадкой. Разные шрифты отличаются пропорциями кегельной площадки, поэтому иногда различные гарнитуры одного кегля выглядят как шрифты разных кеглей. В компьютерной среде традиционной единицей измерения шрифта является пункт. Пункт соответствует 1/72 дюйма или 0,355 мм. Использовать точные единицы (какими являются пункты, миллиметры или дюймы) гораздо удобнее, чем пиксели. В этом случае такие техники, как оптическое масштабирование, создают комфорт для читателя. В конце концов, человеческие глаза не меняют своего размера.
Рис.2. Буква М гарнитуы Perpetua (слева) и Calisto (справа) в пределах кегельной площадки
Мастера-пуансонисты должны были разбираться в технических возможностях печатного пресса, а также особенностях сортов бумаги и красок, чтобы разрабатывать шрифты с учётом разных характеристик впитываемости. Пуансонисты точно рассчитывали соотношение ширин, а также насыщенность и контраст основных и соединительных штрихов.
Многие символы сами по себе представляли проблему для свинцового шрифта. Некоторые знаки, расположенные рядом, мешали друг другу. Примером такого неудачного сочетания в латинице служит буквосочетание f и i. Для решения проблемы были созданы лигатуры, объединяющие две буквоформы в один глиф. (Исторически, лигатуры-сокращения применялись в тексте как альтернативные глифы для выключки строки текста, например, амперсанд первоначально представлял собой сокращение от букв e и t.) Эта техника была не нова для металлического набора, ещё в рукописях раннего средневековья встречались сочетания букв, позволяющие помещать строку на странице.
Рис.3. Лигатуры. Сверху: сочетания fi и fl курсивного начертания шрифта Times New Roman без лигатур. Внизу: сочетания fi и fl курсивного начертания шрифта Times New Roman в виде лигатур
Во времена металлического набора дизайнеры шрифта и типографы стремились усовершенствовать эстетические и функциональные качества текста на бумаге. Использование капители, спроектированной в соответствии с насыщенностью строчных глифов, использование цифр старого стиля, правильное оформление переноса и выключки - всё это помогало создать страницу текста ровного серого тона - так говорят типографы, имея в виду одинаковый ровный тон текста без скоплений чёрного цвета или белых пятен, разрывающих страницу. Красота хорошо спроектированной книги или журнала облегчает чтение.
Рис. 4. Сверху: шрифт Contantia. Прописная М, капительная М, строчная m. (Заметьте, что общая насыщенность истинной капительной М гармонично соответствует строчной)
В конце концов, именно типографика с помощью соответствующих шрифтов и приёмов позволяет передать содержание текста наиболее эффективно и способствует его пониманию. В сети мы сталкиваемся со множеством ограничений - от мониторов разного размера и с разным разрешением экрана до серьёзной нехватки высококачественных экранных щрифтов, которые помогли бы участникам сетевого общения передавать свои мысли. Тем не менее, есть возможность всё это учесть и обеспечить богатство впечатлений читателей от типографики.
Зачастую при разработке инструментов для полноценной типографики возрастает беспокойство по поводу их неправильного использования, и, без сомнения, оно вполне обосновано. Хорошая типографика незаметна и не мешает чтению. Необходимо указывать веб-дизайнерам на значение качественной типографики и создавать инструменты, облегчающие им задачу. Здесь мне пришла на ум цитата из эссе Беатрисы Уорд «Хрустальный кубок» (http://www.nenne.com/typography/crystalgoblet1.html):
«Печатное дело (или дизайн веб-страниц) требует сдержанности ума, из-за отсутствия которой многие виды изобразительного искусства до сих пор барахтаются в застенчивых и сентиментальных экспериментах. Совсем не просто и не скучно работать, добиваясь прозрачности страницы. Выставлять всё напоказ гораздо легче, чем добиваться порядка. Когда вы поймете, что уродливая типографика очень заметна, вы сможете добиться красоты, как мудрый человек находит счастье? думая совсем о другом.»
Чтение и мозг
Даже хороший дизайн страницы бесполезен, если читатель не способен понять содержание материала. Чтение - это не просто разглядывание страницы и проглатывание её содержимого, это процесс, включающий комплекс взаимосвязанных действий, «танец» глаз и мозга, где глаза начинают движения. Эти движения делятся на саккады, фиксации и регрессивные саккады.
Человеческий глаз приспособлен для чтения текста с высотой букв 4 мм с расстояния 50 см. Для того, чтобы поймать пространственную частоту текста, необходимо положиться на работу центрального участка в работе зрения, называемого фовеа централис.
Рис.5. На изображении показана резкость фовеального зрения при чтении (когда один глаз закрыт). Нижняя строка иллюстрирует относительную резкость зрения в процентах
Фовеальное зрение имеет угол в 2о, это значит, что с расстояния 50 см и при высоте знаков 4 мм (около 12 пунктов) мы можем одномоментно декодировать около 7-8 таких знаков. Точка фиксации? это центр фовеального зрения, обычно он смещен влево от середины английского слова и никогда не попадает на границу слова. Мы задерживаем внимание на этой группе знаков приблизительно на 200-250 мкс и начинаем процесс декодирования конкретных символов, составляя из них возможные варианты слова. Во время фиксации мы также прикидываем расположение следующих 7-8 символов, иногда перепрыгивая через короткие предсказуемые слова. Этот переход к следующим символам называется «саккада»? баллистическое движение глаза, во время которого зрение размывается. И хотя большинство саккад направлено вперёд по тексту, опытные читатели 10-15% времени всё же тратят на возвратное движение глаз, что связано с недопониманием или морганием. Эти движения называются регрессивными саккадами.
Рис.6. Воспроизведение саккад в тексте
На процесс чтения могут повлиять и факторы, не связанные с содержанием текста, например, увеличенная длительность фиксации и слишком большое число символов, подлежащих распознаванию за это время. Другие факторы, например, укороченные саккады и избыток регрессивных саккад, также могут помешать чтению. Чтение с монитора затрудняет и то, что при типичной для восприятия с расстояния 50 см высоте знаков размер элементов глифа не превышает одного пикселя. Развитие технологий отображения текста или увеличение разрешения экрана могут улучшить аспекты чтения, связанные с движением глаз.
Зрительная система человека играет ключевую роль в процессе чтения, так как при восприятии больших отрезков текста она испытывает значительное напряжение. В целом, мышцы глаз очень мощные. Фиксации и саккады, о которых говорилось выше, возникают не только во время чтения, но и при восприятии большей части визуальной информации, например, когда мы на кого-нибудь смотрим. Однако некоторые способы отображения текста могут оказать негативное влияние на мышцы зрительной системы и привести к переутомлению глаз. Исследования показали, что чтение серого шрифта на белом фоне или размытого текста ведёт к переутомлению мышцы, которая отвечает за моргание и косые движения глаз. Такой же эффект даёт чтение текста, набранного слишком мелким кеглем.
Некоторые аспекты процесса чтения в большей степени относятся к работе мозга, а не глаз. Одно из направлений исследований, важное для дизайна веб-страниц, связывает понимание содержания текста с использованием определённого шрифта. Большая часть текстов, намеренно или нет, передаёт один или несколько эмоциональных оттенков, таких как серьёзность или легкомыслие, смех или печаль, официальность или непринуждённость. Это вполне очевидный факт, и авторы используют это явление, подбирая слова, более глубоко передающие смысл. Подобным же образом, пусть и не так заметно для далёких от типографики людей, оттенки и эмоции выражают разные шрифты. В результате исследований, во время которых опрашиваемые должны были соотнести шрифт с вызываемыми эмоциями, выявилось наличие стойких ассоциаций. Дополнительные исследования показали, что, если образ шрифта соответствует содержанию текста, люди читают его быстрее, и наоборот. Вывод таков: выбор подходящего шрифта важен для правильной подачи содержания веб-страницы. Покупка подходящих гарнитур и использование их возможностей по встраиванию оказывают существенное влияние на то, как мы читаем и понимаем содержание текста.
Кроме выбора шрифта и оформления текста, существуют и другие приёмы типографики, необходимые для понимания его содержания. Макет с нужной длиной строки, правильная расстановка переносов, интерлиньяж и грамотное использование атрибутов формата OpenType (лигатуры, кернинг, истинная капитель и цифры старого стиля)? всё это необходимо для обеспечения удобного и эстетически приятного процесса чтения. Удивительно, но научные исследования с трудом соотнесли эти требования и преимущества для процесса чтения. Однако другие исследования показали значительные преимущества хорошо спроектированной и эстетически привлекательной страницы текста, способствующие решению когнитивных задач. Это связано с высокоразвитыми функциями мозга и включением того, что мы читаем, в нашу картину мира.
Рис.7. Правила поведения шрифта в формате OpenType
Экран и технологии отображения шрифта
Экран компьютера бросил вызов технологиям, связанным с восприятием текста, так как низкое разрешение было главным препятствием для комфортного чтения. Усугубляли проблему и другие факторы, такие как низкий контраст контуров знаков, неудобное с точки зрения эргономики чтение с больших закреплённых мониторов. 25 лет назад мы думали, что аппаратные средства решат эту проблему так же быстро, как это было с процессорами, памятью и жёсткими дисками, но технологии отображения текста на компьютерном экране развивались очень медленно. Четверть века назад использовались мониторы на основе электронно-лучевых трубок, с разрешением около 70 пикселей на дюйм. Для многих дисплеев эта разрешающая способность относилась только к горизонтали, по вертикали она могла быть в 2 раза меньше, из-за чего появлялись прямоугольные пиксели. Через 10 лет с появлением LCD-мониторов разрешение экранов ноутбуков возросло до 85 пикс/дюйм, что превысило предыдущие характеристики на 15 пикс/дюйм.
Спустя ещё 15 лет разрешение большинства мониторов настольных компьютеров достигло менее 110 пикс/дюйм, то есть, за 25 лет произошло повышение на 40 единиц (60 %), в то время как ожидаемое повышение мощности процессоров составило 8000 раз. Меньшие дисплеи мобильных телефонов и даже ноутбуков добились более значительных результатов, но даже если принять за наибольшее разрешение сегодня 300 пикс/дюйм, достигается увеличение лишь на 325 %.
Не имея более совершенных аппаратных средств, мы можем полагаться лишь на некоторые технологические решения, способные улучшить качество отображения текста на компьютерных дисплеях с низким разрешением. Первым шагом на пути к качественному отображению текста стал разработанный компанией Apple формат TrueType, который Microsoft впервые встроили в Windows 3.1 в 1992 г.
Технология TrueType работает с сеткой высокого разрешения, основанной на кегельной площадке шрифта. Эта сетка измеряется в «единице на кегельную площадку» и в шрифте формата TrueType составляет обычно 2 в степени 2048. Возможны другие величины, регулирующие соотношение между пространством, необходимым для отображения данных и возможным уровнем детализации. Каждый знак оцифрован путём трассировки его внешних контуров и соединения простейших графических элементов: точек, линий и кривых. Для каждого знака создаётся группа контуров, описывающая область, условно заполняемую краской при отображении шрифта.
Иногда оцифровывают металлические литеры, иногда используют оптические таблицы от более ранней технологии фотонабора, также оцифровывают следы чернил на бумаге и, наконец, некоторые шрифты разрабатываются в программах, где дизайнер создаёт необходимые для описания знаков отрезки и кривые.
Рис.8. Контур строчной m из точек, отрезков и кривых линий
Для вывода контура знака на экран или принтер его точки должны быть масштабированы до нужного размера. Для этого требуется знать, какова была величина шрифта (единицы на кегельную площадку) при создании файла, размер точек для вывода изображения и разрешение устройства вывода. Затем определяется масштаб точек. Когда масштаб соответствует устройству вывода, технология TrueType выполняет операцию заливки: если центр пикселя находится внутри контура знака, пиксель заливается цветом текста, в противном случае он остаётся залитым цветом фона.
Если устройство обладает высокой разрешающей способностью, например, 600 пикс/дюйм и выше, технология работает очень хорошо, создавая у читателя приятное впечатление. Трудности возникают при работе с низким разрешением, особенно при распространённых текстовых размерах шрифта и разрешении менее 120 пикс/дюйм. Если размер элемента, подлежащий точному воспроизведению, меньше или равен 1 пикселю, проблемы закругления сильно вредят качеству отображения текста.
Чтобы опытные дизайнеры могли с помощью автоматизированных средств улучшить качество отображения текста устройствами с низким разрешением или в мелком кегле, в технологию TrueType встроен специальный язык программирования. Корректировка масштабирования шрифта по кеглю обычно называется хинтованием и включает написание на встроенном интерпретационном языке программирования «инструкций» для редактирования формы глифов. Этот язык используется как пакетный интерпретатор с байтной кодировкой и содержит примитивы и структуры данных. Указания, регулирующие очертания глифов, помогают достичь качественного отображения текста и сделать его удобочитаемым.
Многочисленные группы инструкций для TrueType включают в себя управление стеком, подпрограммы и условия, математические примитивы и булевские объекты, контроль переменными состояния, управление контурами и структурами данных. Управление контурами и переменные состояния - это компоненты, оптимизированные специально для работы с контурами в TrueType.
Будучи достаточно богатым, этот язык предоставляет хинтовщику различные способы решения одной проблемы. Существует несколько достаточно распространённых методов (http://www.microsoft.com/typography/hinting/hinttut3.htm) хинтования шрифта. Один из них называется сеточным и заключается в выравнивании контуров глифа относительно границ пикселей или подпикселей. Проблема закругления знаков минимизируется путём тщательного выравнивания контура по сетке и привязки к её узлам. Другим методом, задействующим сетку, является использование структур данных в TrueType для поддержания равномерной сетки как внутри глифов шрифта, так и между ними. Например, если ширина вертикального штриха строчной m составляет 2 пикселя, остальные штрихи обычно тоже должны быть 2 пикселя в ширину, и другие подобные глифы шрифта должны иметь штрихи той же ширины. Хотя это кажется вполне очевидным, при изменении размера шрифта выравнивание не происходит само по себе, его необходимо тщательно регулировать хинтованием. С этим и связан метод корректировки толщины штрихов. В контуре встречаются неуловимые или же значительные отличия, которые могут быть незаметны. При использовании метода регулировки с помощью структур данных в мелком кегле детали опускаются, а в случае увеличения размера (что означает появление большего числа пикселей для описания глифа) разрешается появление различий между штрихами. И, наконец, важным аспектом хинтования, особенно для мелких кеглей и устройств с низким разрешением, является дельта-хинтование. Дельта-хинтование - это создание коротких инструкций для контура, которые точно регулируют его форму для знака определённого кегля или диапазона размеров. Иногда метод применяется для закрепления пикселя, потерянного из-за ошибки закругления, также его используют для регулировки основных характеристик шрифта, таких как высота строчных букв или ширина основного штриха. На этом список приёмов хинтования не заканчивается, существует гораздо больше идей, но данный краткий обзор не позволяет нам их рассмотреть.
Рис.9. Нехинтованная строчная m, представленная в два уровня
Когда компания Майкрософт включила хинты в загружаемые нами шрифтовые файлы, ответственность за написание кода легла на опытных типографов. Подобно пуансонистам старины, кропотливо вырезавшим буквы из стали, хинтовщик цифрового шрифта, создавая указания, находит компромисс между техническими ограничениями своей эпохи и особенностями человеческого восприятия в процессе чтения. Основные решения, как, например, выбор между симметрией или сохранением пропорций глифа, установление соответствующих данному размеру кегля отклонений, точная регулировка пиксельной формы и создание инструкций для буквоформы определённого размера, в котором будет представлен глиф - подобно оптическому масштабированию, всё это входит в компетенцию хинтовщика.
Рис.10. Японский шрифт Meiro, в колонке слева - без хинтов, в колонке справа с хинтами
Находились и противники хинтования цифровых щрифтов, полагающие, что оно вносит нелинейный элемент в «истинный дизайн» шрифта. Исторически не было никакого «истинно» профессионального дизайна, вместо этого каждый цифровой шрифт настраивается для воспроизведения аппаратными устройствами и оптическими инструментами просмотра самим дизайнером, и в проектах всегда был момент нелинейности, отражающий нелинейность зрительного аппарата или разрабатываемых людьми технологий. Идея оптического масштабирования в основе своей нелинейна, и основана на человеческой психологии. Такие особенности проектирования шрифта, как трэппинг, также нелинейны и разработаны для решения проблем взаимодействия чернил, металла и бумаги. Созданные опытным типографом хинты и «нелинейные» элементы улучшают эстетические и функциональные качества шрифта.
Другой важный аспект красоты и функциональности - атрибуты форматирования OpenType. Технология OpenType была разработана компанией Майкрософт в 1994 г. как способ поддержать передовые типографические средства, оставаясь верными принципам кодировки Юникод. В задачи Юникода не входило обеспечение представления форм (лигатур, капители, цифр старого стиля и т.д.) для каждого глифа, вместо этого искали другой способ их кодировки, Так компанией Майкрософт был разработан формат OpenType, первоначально называвшийся True Type Open. В 1996 году к Майкрософт для совместного введения формата OpenType, включавшего технологию TrueType Open, присоединилась компания Adobe. Юникод и формат OpenType позволяют выбирать из богатого набора знаков как для латиницы, так для других систем письменности. Некоторые виды письменности, например, арабская или индийская, требуют подобную систему для отображения минимальных средств языка, в случае же полного расширенного набора получается очень красивый шрифт. Богатые традиции типографики для латиницы, зародившиеся ещё во времена металлического набора, нуждаются в такой технологии как OpenType.
Рис.11.Цифровой шрифт: Арабский набор, пример иллюстрирует альтернативные формы, основанные на контексте: унциальная буква Jeem приобретает различную форму в зависимости от того, за какой буквой следует
Формат OpenType описывает свойства шрифта, закреплённые в различных системах письменности и языках. Свойства могут устанавливаться по умолчанию, могут быть применены ко всему шрифту или же к определённой группе знаков Юникода, когда необходимо заменить используемый по умолчанию символ каким-либо другим или изменить его расположение. Замена может происходить по схеме: один глиф - на один глиф, один глиф - на несколько глифов, несколько глифов - на один основной, основной - на контекст из глифа и его окружения. Такие свойства, как кернинг, обеспечиваются изменением положения единичных глифов по отношению друг к другу.
Рис.12. Цифровой шрифт: Арабский Упрощённый, кернинг в OpenType
Имея качественный шрифт и формат, остаётся лишь достойно представить его на экране для того, чтобы глазу читателя было максимально комфортно.
Все описанные здесь типографические тонкости должны гармонично сочетаться для обеспечения приятного визуального опыта читателя. Зачастую чтение воспринимается как нечто само собой разумеющееся - большинство из нас учится читать ещё в детстве, и мы быстро забываем о трудностях этого процесса. Хорошо то, что мы можем не концентрироваться на процессе чтения, и сосредоточиться на содержании текста. Если мы, разработчики шрифтов и браузеров, а также веб-дизайнеры качественно выполняем свою работу, то содержание выходит на первый план, и читающий может сконцентрироваться на понимании текста, а не на декодировании составляющих его символов.
Автор - fbcontrb (Fontblog)
Перевод - admin (justnotes.ru)