Хинтинг шрифтов. Что это такое и с чем его едят.
Это перевод англоязычной статьи "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, которые на данный момент выглядят лучше других.<
Хинтинг для чёрно-белого отображения (выравнивание по сетке), 1 бит.
Чёрно-белый хинтинг разработан ещё в те времена, когда операционные системы могли только либо отображать пиксель, либо нет. Он контролирует, какие из пикселей будут отображены при данном кегле. Этот тип хинтинга ещё называют выравниванием по сетке, потому что он значительно меняет контуры шрифта, чтобы те соответствовали сетке пикселей на экране. Это самый трудоёмкий процесс хинтинга, у опытного специалиста он занимает как минимум 80 часов для того, чтобы сделать хинтинг всего для одного шрифта, состоящего из 256 базовых символов. Шрифты с расширенным набором символов и/или имеющие разные начертания, конечно, потребуют ещё больше времени. Кроме того, при чёрно-белом хинтинге ещё обычно добавляются белые пиксели между символами, чтобы улучшить читаемость, из-за чего текст, напечатанный на принтере, и тот же текст, но на экране монитора, могут оказаться разной ширины. Шрифты Майкрософта Verdana и Geogia — примеры шрифтов с чёрно-белым хинтингом. Более новые технологие сделали чёрно-белый хинтинг устаревшим и позволили получать на экране результаты куда более близкие к изначальным формам букв.
Чёрно-белое отображение шрифта без хинтинга на 10 ppem, увеличение 200%
Чёрно-белое отображение шрифта с хинтингом (Fedra Sans Screen) в оттенках серого на 10 ppem, увеличение 200%
[img]http://maslov.co/default/index/getimage/id/1178[img]
Чёрно-белое отображение шрифта без хинтинга на 15 ppem, увеличение 200%
[img]http://maslov.co/default/index/getimage/id/1181[/img]
Чёрно-белое отображение шрифта с хинтингом (Fedra Sans Screen) на 15 ppem, увеличение 200%
Хинтинг для отображения в оттенках серого (Горизонтальный и вертикальный), 4 либо 8 бит.
Анти-алиазинг — это технология, которая была впервые представлена в Windows 98. При отображении шрифта на экране она сглаживает зубчатые линии, крася пиксели в различные оттенки серого. Таким образом, растеризатор уже не ограничен выбором только между чёрным и белым, а может выбирать промежуточные значения.
Во время хинтинга шрифтов для отображения в оттенках серого, символы уже не нужно заставлять вписываться в точные позиции пикселей. Символы меняют как по вертикали, так и по горизонтали, но используя меньше инструкций. Хинтинг для отображения в оттенках серого почти так же трудоёмок, как чёрно-белый хинтинг, и специалист обычно тратит 72 часа, обрабатывая шрифт из 256 знаков. Для тех, кто использует ЭЛТ-монитор, этот громоздкий ящик из 1990-х, хинтинг в оттенках серого — это лучшее, что им доступно.
Отображение шрифта без хинтинга в оттенках серого на 10 ppem, увеличение 200%
Отображение шрифта с хинтингом (Fedra Sans Screen) в оттенках серого на 10 ppem, увеличение 200%
Отображение шрифта без хинтинга в оттенках серого на 15 ppem, увеличение 200%
Отображение шрифта с хинтингом (Fedra Sans Screen) в оттенках серого на 15 ppem, увеличение 200%
Хинтинг для отображения ClearType (только горизонтальный).
ClearType (англ. "отчётливая печать") — проприетарная технология субпиксельного отображения Майкрософт. Она пытается улучшить внешний вид текста на плоских мониторах, используя тот факт, что каждый пиксель состоит из трёх элементов, каждым из которых можно управлять отдельно. ClearType пользуется особенностями того, как глаз воспринимает цвет, используя оттенки синего, красного и зелёного, чтобы имитировать более высокое экранное разрешение.
Это значит, что разрешение текста может быть в три раза больше, но только по горизонтали. Это также значит, что при хинтинге ClearType символы не выравниваются вдоль вертикальной оси, что фактически уменьшает трудоёмкость в два раза. Один шрифт из 256 знаков требует примерно 40 часов, чтобы сделать к нему хинтинг.
Отображение шрифта без хинтинга при помощи ClearType на 10 ppem, увеличение 200%
Отображение шрифта с хинтингом (Fedra Sans Screen) при помощи ClearType на 10 ppem, увеличение 200%
Отображение шрифта без хинтинга при помощи ClearType на 15 ppem, увеличение 200%
Отображение шрифта с хинтингом (Fedra Sans Screen) при помощи ClearType на 15 ppem, увеличение 200%
<h2>Хинтинг для отображения DirectWrite (горизонтальный и вертикальный)</h2>
Windows 7 укомплектована новым растеризатором шрифта — DirectWrite (англ. "запись напрямую, без посредников"). Он использует субпиксельную растеризацию текста, как и ClearType, но применяет анти-алиасинг как горизонтально, так и вертикально. Это значит, что кривые выглядят более гладко, чем с ClearType. Процесс хинтинга такой же, как и для нормального ClearType. Наиболее значимое отличие DirectWrite в том, что он также улучшает отображение шрифтов OpenType с контурами PostScript. DirectWrite заменяет собой старый растеризатор GDI и работает в Internet Explorer начиная с версии 9, а также в современных версиях Firefox.
Отображение шрифта без хинтинга при помощи DirectWrite на 10 ppem, увеличение 200%
Отображение шрифта с хинтингом (Fedra Sans Screen) при помощи DirectWrite на 10 ppem, увеличение 200%
Отображение шрифта без хинтинга при помощи DirectWrite на 15 ppem, увеличение 200%
Отображение шрифта с хинтингом (Fedra Sans Screen) при помощи DirectWrite на 15 ppem, увеличение 200%
Отображение шрифта с хинтингом при помощи ClearType на 31 ppem, увеличение 200%
Отображение шрифта с хинтингом (Fedra Sans Screen) при помощи DirectWrite на 31 ppem, увеличение 200%. Сравните плавность линий относительно варианта ClearType выше.
От теории к практике
Ну так для дизайнера-то что всё это означает? Хинтинг может улучшить отображение шрифтов. Но эти шрифты будут отображаться по-разному в зависимости от растеризатора, в зависимости от платформы, а зачастую и в зависимости от браузера. Сравните, к примеру, текст в Google Chrome и Firefox на одном и том же компьютере. Если для дизайнера важно одинаковое отображение его творчества на разных платформах, в выборе шрифтов этому тоже надо уделить внимание.
Понятно, что однажды хинтинг шрифтов наконец отживёт своё, но совсем не понятно, когда же этот день наступит. В самой широко используемой операционной системе в мире, Windows XP (в 2010 году она занимала 58.4% рынка), ClearType по умолчанию выключен, так что шрифты без хинтинга при малых размерах отображаться хорошо не будут. Нравится нам это или нет, ещё какое-то время без хинтинга будет не обойтись. Но если вам нравится то, как шрифты отображаются на Маке при малых размерах, вы можете принять это в качестве доказательства, что даже сегодня возможно отображать шрифт без хинтинга.
От переводчика:
Несмотря на то, что оригинал этой статьи был написан ещё в 2010 году (а сейчас на дворе 2014-й), проблема до сих пор актуальна.
В предпоследнем абзаце автор предлагает сравнить отображение шрифтов в Internet Explorer и в Safari под Windows, но на сегодняшний день Safari под Windows всё, поэтому я заменил сравнение на более актуальное.
Windows XP, в России, по крайней мере, хоть и сдала позиции, всё ещё в народе популярна. Да и на более новых ОС от Майкрософт даже с включённым ClearType шрифт без хинтинга в малом размере выглядит отвратительно. Хорошо, если читаемо.
На компьютерах торговой марки "Мак" фирмы "Эппл" тоже не всё хорошо. Там все шрифты рисуются максимально приближённо к оригиналу. Но, как писалось выше, достоверная форма шрифта на низком разрешении выглядит печально. В Майкрософт же сделали упор на читаемость, что усложнило разработку шрифтов.
Кстати, в конце 1980-х — начале 1990-х годов "Макинтоши" (так раньше назывался Мак) позиционировались как специализированный профессиональный инструмент (в том числе) для издательского дела. Для них были разработаны специальные программы для работы в этой области. Поэтому-то Эппл и делали такой упор на как можно более достоверную передачу формы шрифта, ведь оформителю книги или газеты важнее, чтобы шрифт на экране был максимально похож на то, что будет наппечатано на бумаге, а читаемость уже второстепенна. Сегодня Мак из профессионального инструмента превратился в понт и дорогую игрушку для тех, кому некуда девать деньги. Но принципы в отношении отображения шрифтов остались те же самые.
В-общем, от этой проблемы никуда не деться, пока "в народ" не пойдут экраны сверхвысокого разрешения, хотя бы в 4 раза выше, чем "обычные". Грубо говоря, чтобы невооружённым глазом было нельзя разобрать отдельную точку, как на бумаге. "Обычным" принято считать 72 пикселя на дюйм, а надо, чтобы оно было близко к разрешению печати, т.е. 300 точек на дюйм. Пока что нечто подобное только на мобилках и на планшетах начало появляться. А вот для компьютеров мониторы со сверхвысоким разрешением ещё толком не выпускаются. И даже когда наладят производство, сколько ещё будет "изживаться" старый парк техники? Компьютерные мониторы служат по полтора десятилетия, в то время как редкая мобилка протянет года четыре (а многие и ежегодно меняют телефон). Короче, полностью отказаться от хинтинга можно будет ещё очень нескоро. Эра экранов сверхвысокого разрешения будет обязательно! А когда — чёрт его знает.
Что же делать web-дизайнеру в таком случае, чтобы не пёрнуть в лужу?
Подробно об этом можно прочитать в отдельной статье о том, как выбирать шрифты для дизайна веб-страницы. Если вкратце:
Во-первых, особо тщательно выбирать шрифты для мелкого текста. Не считать "западловым" использование "стандартных" шрифтов из списка web-safe.
Во-вторых, учитывать, что конечная длина отрисованного текста будет разная на разных операционных системах и в разных браузерах (и даже высота! всего на пару пикселей, но иногда и это важно!), поэтому нельзя полагаться на неё "пиксель-в-пиксель".
И, наконец, когда выбор сделан, не полениться и проверить, как он будет выглядеть в конкретном размере и на конкретной платформе. Встройте выбранный вами шрифт в страницу (на Google Fonts шрифты уже встроены в страницы, можно смотреть прямо там).
Как минимум, надо проверить отображение в Internet Explorer под Windows, в Google Chrome под Windows и в Firefox под Windows, потому как подавляющее большинство пользователей в Интернете пользуются именно ими. Даже если вы работаете на Mac, и вам лень искать компьютер с Windows для этого, то уж потрудитесь. Чтобы не было неприятных сюрпризов.
Внешние ссылки к ознакомлению:
Оригинал статьи
Список web-safe шрифтов
You can leave a comment with "Facebook":
Не забывайте оставлять комментарии при помощи "ВКонтакте":