Хинтинг шрифтов. Что это такое и с чем его едят.
Это перевод англоязычной статьи «Font Hinting», автор которой — Peter Biľak. Несмотря на то, что статья уже старенькая, она до сих пор актуальна, а в русскоязычном сегменте Интертнета материалов подобного качества до сих пор почему-то нет. Поэтому представляю вам свой перевод этого замечательного текста.
Хинтинг шрифтов
Хинтинг, или экранная оптимизация — это процесс, когда шрифты TrueType или PostScript приспосабливают для того, чтобы достичь максимальной читаемости на экране компьютера. В этой статье сравниваются различные способы хинтинга (чёрно-белый, в оттенках серого, ClearType, DirectWrite) и объясняется поведение шрифтов в процессе их обработки различными растеризаторами.
Хинтинг, или экранная оптимизация — это процесс, когда шрифты TrueType или PostScript приспосабливаются для того, чтобы достичь максимальной читаемости на экране компьютера. Я разрабатывал шрифты ещё с начала 1990-х и, сколько себя помню, разработчики шрифтов всегда говорили, что скоро благодаря совершенствованию устройств и программ хинтинг уже нужен не будет. Теперь, почти двадцать лет спустя, хинтинг оказался как никогда актуален.
Беда в том, что типичный современный шрифт разработан не для использования на компьютерных мониторах с разрешением 72—96 dpi, а для куда большего разрешения печатных масс-медиа порядка 1200+ dpi. Формы букв разработаны и хранятся в контурах — математически безупречных линиях и кривых, которые выглядят превосходно в высоком разрешении, но могут сильно исказиться или стать и вовсе нечитаемыми после того, как будут превращены в группы пикселов — дискретных точек, из которых и состоит дисплей компьютера. И, хотя на протяжении десятилетий было много споров о появлении в ближайшем будущем компьютерных мониторов высокого разрешения, реальность такова, что мой пятилетний мобильный телефон делает фотографии с куда большей детализацией, чем мой новенький компьютер может на своём экране показать.
Это и есть причина, по которой веб-дизайнеры долгое время были более-менее ограничены в выборе шрифтов до порядка дюжины (Verdana, Georgia, Arial и т.д.), которые были вручную доработаны так, что тексты типичных размеров (9—14 пт) хорошо отображаются в низком разрешении. Эти шрифты настолько распространены, что большинство пользователей компьютеров думают, что они бесплатны, но в действительности Verdana, например, является, возможно, самым дорогим и трудоёмким шрифтом, когда-либо изготовленным. Он включает в себя символы, используемые для создания надписей на чрезвычайно большом количестве языков, и каждый из этих символов приходилось выверять, чтобы те были читаемы в любом размере шрифта, от 9 до 60 пунктов (при 60 пт разрешения достаточно, чтобы отображать форму букв точно). Другими словами, каждый из более чем 890 символов был переработан десятки раз, по одному на каждый размер шрифта.
Изначальный контур Fedra Sans Screen Regular, перед растеризациею.
Версия Fedra Sans Screen с хинтингом, изменяющая изначальный контур, чтобы тот соответствовал сетке компьютерного экрана.
Контуры Fedra Sans Screen при различных размерах. Обратите внимание на то, как отличаются друг от друга контуры с тем, чтобы достичь оптимальной читаемости на экране. Фактически каждый символ приходится перерабатывать снова и снова для каждого размера в пикселях.
Вот это и есть хинтинг: программирование инструкций, которые тонко регулируют растеризацию шрифта — процесс, при котором его математически совершенные контуры переносятся на пиксели монитора. Хинтинг может управлять высотами и ширинами прописных и строчных букв шрифта, ширинами их отдельных линий, количеством белого пространства вокруг букв, размером, начиная с которого прописные буквы имеют отличные от строчных букв ширины основных штрихов, как изменяется угол наклона курсивных символов для лучшего соответствия пиксельной сетке, и много других технических подробностей всё на попиксельной основе. Звучит, как довольно утомительный и трудоёмкий процесс. И так оно и есть (даше для дизацнеров шрифтов, которые привыкли к утомительным и трудоёмким процессам).
Пару лет назад был знатный ажиотаж, связанный с появлением @font-face — функции, которая делает возможным отображать на веб-странице любой шрифт, освобождая дизайнеров от необходимости использовать только «web-safe»-шрифты и, открывая новые возможности дизайна. (не последняя из которых — создание фирменных стилей, которые выглядят одинаково и на печати, и на веб-сайте). С другой стороны, из-за этого также появились новые проблемы, включая совершенно убогое отображение на экране шрифтов без хинтинга. А, так как хинтинг утомителен, трудоёмок и, как многие верят, скоро отживёт своё, 99% всех шрифтов, даже коммерческих, хинтинга не имеют.
Хинтинг TrueType и PostScript-шрифтов
Даже когда хинтинг в шрифте присутствует, оптимальный результат отображения на экране всё ещё не гарантирован, потому как разные шрифтовые технологии к хинтингу подходят по-разному. В системе PostScript большинство регулировок шрифта осуществляется не самим шрифтом, а программой-растеризатором, так что шрифты в формате PostScript часто выглядят неплохо с относительно простым хинтингом или без него вовсе. В системе же TrueType растеризатор управляется сложными инструкциями хинтинга, которые содержатся в самом шрифте. Без этой информации шрифты TrueType хорошо отображаться на экране не будут.
Обе системы имеют как достоинства, так и недостатки. Одно из достоинств системы PostScript — то, что «хитрость» сосредоточена в растеризаторе, поэтому когда модернизируют его, все шрифты PostScript начинают отображаться лучше. Даже двадцатилетние шрифты выглядят неплохо на последнем Маке. В системе TrueType модернизация растеризатора требует также и модернизации шрифтов для достижения оптимальных результатов. Так, шрифты с хинтингом для чёрно-белого отображения или отображения в оттенках серого не будут работать так же хорошо с растеризатором Windows ClearType. С другой стороны, хинтинг TrueType позволяет напрямую, пиксель за пикселом управлять процессом растеризации, чего PostScript обеспечить не может.
Макрофотография Apple Mac Book Pro. На ЖК-мониторах (LCD, плоские экраны) каждый пиксель состоит из трёх элементов, каждым из которых можно управлять отдельно. Супбиксельное отображение пользуется особенностями того, как глаз воспринимает цвет, используя оттенки синего, красного и зелёного, чтобы имитировать более высокое экранное разрешение.
Mac OS против Windows
О различиях в отображении текста в Mac OS и Windows сказано немало. Я здесь не буду углубляться в детали, скажу лишь, что главное отличие в том, что растеризатор Майкрософта пытается выровнять символы по пиксельной сетке, в результате шрифты с нормальной насыщенностью выглядят тоньше, с полужирной — толще, а мелкие детали могут и вовсе исчезнуть при маленьком кегле. Растеризатор Эппл пытается настолько сохранить детали шрифта, насколько это возможно, иногда ценой чёткости изображения. Программа растеризации Windows даёт чрезвычайно хорошие результаты с несколькими встроенными гарнитурами TrueType, но посредственные — с 99% других шрифтов. Технология Mac OS Quartz полностью игнорирует хинтинг и отображает все шрифты в одинаковом качестве вне зависимости от их формата.
Так что давайте обратим внимание на Windows: в ней хинтинг имекет значение. И обратим внимание на шрифты TrueType, которые на данный момент выглядят лучше других.
Хинтинг шрифтов: от появления к практическому применению
В этой статье мы расскажем об истории развития хинтинга шрифтов. Поделимся собственным опытом работы над шрифтами и объясним, какие задачи решает хинтинг.
Во второй половине 80-х годов XX века индустрия персональных компьютеров стремительно развивалась, и для них был необходим свой собственный шрифтовой стандарт. У компании Adobe он уже был и назывался PostScript Type 1. Стандарт входил в ее графические программы, благодаря чему активно распространялся.
Идеологами TrueType формата были Apple и Microsoft. Разработка началась из соображений экономической выгоды: за использование шрифтов PostScript нужно было платить огромные авторские гонорары. Таким образом, TrueType был ответом двух гигантов на фактическую монополию компании Adobe с ее шрифтами PostScript Type 1. Предполагалось, что шрифты TrueType станут основой единого стандарта, будут легко масштабироваться и использоваться на ПК. Apple начала разработку первой, а Microsoft подключилась позже и начала активно его продвигать. Apple добавила поддержку формата в мае 1991 года (ОС System 7.0), а Microsoft внедрила системные шрифты для ПК почти год спустя — в апреле 1992 (ОС Windows 3.1).
Apple выпустила свой вариант (TrueType GX) раньше, поэтому у Microsoft, чей формат был еще в разработке, могли возникнуть проблемы из-за лицензии. В результате продукт Microsoft получил название TrueType Open.
Публикация TrueType Open была приурочена выходу Windows 95. Главным обновлением в ней стал Antialiasing — экранное сглаживание в градациях серого цвета.
В 1996 году две некогда конкурирующие компании Microsoft и Adobe выпустили совместный открытый формат шрифтов — OpenType с поддержкой TrueType и PostScript контуров, Unicode и типографических функций (капителей, лигатур и т. д).
Таким образом, семейство современных шрифтов получило имя, в котором отразилась вся история их создания, — OpenType:
Благодаря изначальному широкому функционалу TrueType стандарта в 2016 году на его базе появились вариативные шрифты.
С самого начала у TrueType формата сложилась плохая репутация, и причина этому огромное количество некачественных шрифтов, ведь он был открытым стандартом, в отличие от PostScript Type 1. Как следствие, TrueType шрифты не получили широкого распространения на старте, а среди массовой аудитории пользовались популярностью PostScript шрифты. Спустя время у TrueType формата все-таки появилась своя ниша: к нему обращались большие компании, когда нужно было разработать важные системные шрифты или сделать шрифты на заказ.
Технология TrueType стартовала в начале 90-х, когда использовались мониторы с крайне низкой плотностью пикселей (DPI), и представляла из себя простейшую черно-белую графику. Шрифты, которые отображались на экране, имели лишь одноцветное представление без градаций полутонов (BI-Level Rendering). С развитием аппаратного и программного обеспечения графика на персональных компьютерах стала более продвинутой, и в отображении шрифтов появился градиент серого цвета (Grayscale Rendering). Постепенно широкое распространение получили жидкокристаллические мониторы. Разработчики ПО использовали особенности растеризации ЖК-мониторов, у которых каждый пиксель состоит из трех цветов. Это получило название SubPixel Rendering. На данной технологии основаны растеризаторы ClearType и DirectWrite от Microsoft.
TrueType и OpenType форматы содержат глифы в виде контуров из кривых Безье, но подход к хинтингу реализован кардинально разными способами.
Если кратко: в PostScript шрифтах в каждом глифе выделяются определенные элементы (горизонтальные и вертикальные стемы, засечки и т. д), затем на них автоматически накладываются заданные или вычисленные параметры — толщина, ширина, высота. По такой схеме хинтинг делается молниеносно, но у человека мало возможностей повлиять на итоговый контур, потому что растеризатор сам решает, чем из этих подсказок и как он воспользуется для вывода текста на экран.
В шрифтах TrueType используется иной подход. Вместо делегирования работы растеризатору, шрифт содержит явные поточечные инструкции, которые либо должны выполняться полностью, либо не должны вовсе.
Высокая точность и качество TrueType шрифтов при отображении на экране обеспечиваются благодаря колоссальной сложности при разработке. Для дизайнера шрифта контур TrueType кривых очень сложен в редактировании, так как из-за использования квадратичных кривых Безье он содержит большее количество точек. Хинтинг является также сложным и комплексным процессом, который по силам только высококлассным дизайнерам шрифтов. Контуры же OpenType (PostScript) шрифтов просто редактируются, содержат кубические кривые, хинтинг шрифтов сильно упрощен и практически автоматизирован. Отображение на экране при этом значительно хуже, но унифицировано для всех шрифтов.В 1999 году компания Apple интегрировала в свою операционную систему собственный растеризатор для экранов под названием Quartz 2D. Он унифицирует отображение как TrueType, так и OpenType шрифтов от всех производителей на экранах компьютеров Apple, игнорируя TrueType хинтинг. Таким образом формат TrueType остался актуален для Windows и Linux устройств.
В цифровой типографии каждый символ определяется набором контуров, обычно состоящих из сплайнов в виде кривых Безье. Когда символ рендерится на пиксельной сетке, контуры масштабируются до нужных размеров, а затем все пиксели внутри полученного контура заливаются черным. Такой алгоритм отлично показывает себя при высокой плотности пикселей (DPI). Однако при DPI ниже 150 процесс рендеринга становится проблематичным.
TrueType хинтинг (или инструктирование) — подсказки, которые с помощью специального программного обеспечения зашиваются внутрь шрифтового файла. Можно сказать, это ограничения, которые накладываются при масштабировании на контуры знаков шрифта и лучшим образом отражают изначально заложенные дизайнером формы на любом размере, устройстве, разрешении и программном обеспечении. Хинтинг улучшает внешний вид текста и его читабельность при низком разрешении экрана или мелком размере шрифта.
TrueType хинтинг бывает ручным и автоматическим. Для шрифтов светлых и средних по жирности начертаний с простыми формами, таких как Thin, ExtraLight, Light, Regular, Medium, в большинстве случаев автоматического хинтинга оказывается достаточно. С более жирными начертаниями — от DemiBold до Black и более сложных форм шрифтов (например, с засечками или акцидентных) — начинаются проблемы. Ручной TrueType хинтинг происходит либо в шрифтовом редакторе, либо в специальном ПО. Ручной хинтинг шрифта — настоящее искусство, с одной стороны, и ремесло, с другой. Специалист по хинтингу размечает готовый шрифтовой файл вручную, символ за символом, а после тестирует в разных размерах текста. Зачастую хинтинг позволяет сохранить характерный рисунок шрифта до 14 px, а читаемость до 9 px.
Четыре ключевые задачи, которые решает хинтинг
1. Обеспечивает контраст — хинтинг позволяет вернуть шрифту контраст, задуманный дизайнером.
2. Повышает читаемость — при небольших размерах текста именно хинтинг борется за читаемость знаков.
3. Создает спейсинг — хинтинг не позволяет буквам слипаться между собой и контролирует расстояние между буквами так, как это задумал автор.
4. Отвечает за ровную строку — хинтинг позволяет во всех размерах шрифта буквам держаться внутри своей строки и не выпрыгивать из нее.