Шрифт на экране. Часть 2

Вторая часть истории шрифта на экране — от цветных мониторов конца 90-х до того, как они работают сейчас. Если вы не знаете, что такое хинтинг, то лучше сначала прочитать первую часть — без неё может быть не очень понятно :)

Когда производительность персональных компьютеров увеличилась, а большинство мониторов стали цветными, операционные системы получили возможность показывать шрифты не только в режиме Black&White, но и со сглаживанием.

Но и сглаживание, и вообще графика на ранних цветных мониторах отличались от того, что мы видим на экране сейчас. Дело в том, что пиксели, во-первых, не были квадратными, а во-вторых, не имели чётких границ.

На фото с сильным увеличением видно, что каждый пиксель представлял собой комбинацию из трёх лампочек — красной, зелёной и синей, расположенных правильным треугольником.

Получалась структура, похожая на пчелиные соты, и определить, какая лампочка относится к какому пикселю, было не так-то просто.

Шрифты на цветных экранах с электронно-лучевой трубкой отображались в режиме Grayscale — с помощью оттенков серого. Это значит, что все три лампочки в пикселе меняют яркость одновременно. Тон серого зависит от того, какой процент площади пикселя попал внутрь контура буквы.

Можно сравнить, как выглядит диагональный штрих в режиме Bitmap и в режиме Grayscale.

Чтобы управлять отображением шрифта в этом режиме, технолог двигает или изменяет контур знака, только не основной, а специальный, служебный. На скриншоте служебный контур синий, а основной — чёрный.

Это значит, что для каждой высоты буквы в пикселях нужен модифицированный контур знака, который при растрировании будет лучше всего читаться и передавать исходный рисунок именно в этом размере. Поэтому, когда речь идёт о небольших размерах — высоте буквы а примерно от 5 до 10 пикселей (или ppem от 9 до 20) — внешний вид и пропорции букв при увеличении или уменьшении размера могут заметно меняться.

Кстати, именно поэтому один и тот же шрифт чаще всего не может одинаково хорошо выглядеть на экране в одном размере со сглаживанием и без. Разные режимы обычно требуют разных изменений вспомогательного контура. Так что при подготовке шрифта для работы в жёстких технических условиях, типа интерфейса в ОС Linux с расчётом на монитор низкого разрешения, нужно принимать нелёгкое решение — какой режим важнее, Bitmap или Grayscale.

Сейчас экраны компьютеров, телефонов и планшетов — жидкокристаллические (LCD). Пиксель на жидкокристаллическом мониторе — это не три круглые лампочки, как в ЭЛТ, а квадратик, который состоит из трёх вертикальных полосок: красной, зелёной и синей. Их можно увидеть под лупой или на макрофотографии.

С точки зрения отображения шрифтов у жидкокристаллического экрана есть очень важное свойство: каждой из этих полосок, или субпикселей, можно управлять отдельно. И в шрифте их яркость может быть разной в зависимости от положения пикселя в букве.

Получается, что при использовании субпиксельного сглаживания шрифтов разрешение экрана по горизонтали увеличивается в три раза. Это значит, что даже в мелком размере с толщиной вертикальных штрихов и диагоналей всё будет хорошо. Проблема остаётся только одна — толщина и положение горизонтальных штрихов.

Если сделать скриншот и сильно его увеличить, то буквы с субпиксельным сглаживанием будут выглядеть цветными по краям: слева оттенки коричневого, справа синего. Вживую через лупу мы можем увидеть красные, зелёные и синие полоски, но операционная система на скриншоте показывает пиксель как единое целое, и разная яркость частей меняет его цвет.

В Windows режим отображения шрифтов с субпиксельным сглаживанием называется Cleartype и появился в 2004 году. В старых версиях Windows применять субпиксельное сглаживание можно было только к толщинам штрихов, а ширина площадки знака должна была быть кратна целому пикселю.

С переходом на графический программный интерфейс DirectWrite (начиная с Windows 7, Vista и Server 2008) в шрифтах в режиме Cleartype площадки тоже могут иметь дробную ширину. Это помогает поддерживать ритм в строке и отображать его максимально близко к оригинальному рисунку.

А теперь самый сложный момент: на жидкокристаллических мониторах в наши дни субпиксельное сглаживание используется не всегда.

Внутри шрифтового файла могут находиться данные PostScript или TrueType. У десктопных форматов это можно определить по расширению файла — .otf для PostScript, .ttf для TrueType. И PS, и TT используют кривые Безье, но разного порядка. TrueType использует квадратичные кривые (кривые второго порядка, параболы), а PostScript — кубические кривые (кривые третьего порядка). Основное различие между ними в количестве точек, которые нужны для описания участка кривой.

Шрифты с данными PostScript и TrueType по-разному отображаются на экране. И те и другие используют хинтинг — встроенные в шрифт инструкции, которые помогают операционной системе показывать буквы правильно. Но это разные технологии хинтинга и разные режимы отображения.

В предыдущих главах мы смотрели на хинтинг TrueType. С его помощью можно контролировать толщины штрихов, положение горизонталей, внутрибуквенные просветы и межбуквенные расстояния.

Правда, проверять и редактировать всё это приходится вручную. Поэтому качество отображения шрифта TrueType в мелких размерах напрямую зависит от того, кто и как его хинтовал. Результат работы опытного шрифтового технолога и результат автоматического хинтинга могут сильно отличаться, особенно в режимах без субпиксельного сглаживания.

Шрифты TrueType на Mac и PC

А ещё шрифты с данными TrueType в MacOS и Windows отображаются по-разному. В Windows качество отображения сильно зависит от того, насколько хорошо шрифт отхинтован. В MacOS все шрифты растрируются одинаково хорошо, независимо от того, прошли они техническую обработку или нет. Маковская система растеризации называется Quartz, игнорирует инструкции TrueType и использует собственный алгоритм.

На мониторах с не очень высоким разрешением Quartz включал субпиксельное сглаживание до системы 10.13 High Sierra включительно, а начиная с 10.14 Mojave оно по умолчанию отключено. На мониторах Retina используется Grayscale, у них настолько высокое разрешение, что этого более чем достаточно.

Это значит, что если вы занимаетесь дизайном сайтов и работаете в MacOS, то, скорее всего, видите шрифты не так, как их будут видеть пользователи сайта в Windows. Поэтому очень важно с самого начала проверить, как отображается выбранный шрифт в разных операционных системах.

Шрифты PostScript

В шрифтах с данными PostScript хинтинг — это не подробные инструкции, а именно подсказки. Всё, что может регулировать хинтинг PostScript — это одинаковая высота букв и одинаковая толщина штрихов.

За отображение шрифтов PostScript отвечает не операционная система, а графический программный интерфейс, разработанный Adobe. Он берёт данные о высоте знаков и толщине штрихов из PostScript-хинтов и учитывает их при растрировании шрифта. Субпиксельное сглаживание не используется, то есть при увеличении скриншота видны серые пиксели разного тона.

Поэтому по увеличенному скриншоту можно понять, какие данные лежат внутри файла веб-шрифта в WOFF или WOFF2. Если пиксели по краям буквы цветные, то шрифт с данными TrueType, а значит, в MacOS и Windows он будет отображаться по-разному. А если все пиксели серые, то шрифт с данными PostScript и отображаться везде будет примерно одинаково.

Что выбрать — PostScript или TrueType?

Если подводить итоги всего, что здесь написано о растрировании шрифтов, то ответ зависит в первую очередь от типа устройств, на которых люди будут видеть шрифт на экране.

Для iOS, Android и других мобильных ОС формат шрифта значения не имеет, они пользуются собственными алгоритмами и идут по пути увеличения разрешения экрана, а не субпиксельного сглаживания.

Для MacOS на компьютерах с дисплеем Retina формат шрифта тоже не важен, т.к. пиксели на них практически не различимы невооружённым глазом и все шрифты выглядят хорошо. На компьютерах с дисплеями более низкого разрешения выигрывает скорее TrueType, потому что он использует субпиксельное сглаживание и толщины вертикальных штрихов получаются точнее.

В Windows и Linux отображение TrueType очень сильно зависит от качества подготовки шрифта (а в Linux ещё и от варианта операционной системы). Если инструкции TrueType сделаны качественно, то шрифт даже в самом мелком неудобном размере будет выглядеть хорошо, а если не сделаны совсем — то плохо.

Для PostScript в Windows результат намного меньше зависит от усилий, потраченных на обработку. Разница между полностью автоматической расстановкой хинтов и автоматической расстановкой хинтов с проверкой и правкой не так велика, потому что возможности участия человека сильно ограничены. Гораздо больше видимое качество шрифта PostScript на экране зависит от того, насколько удачно контур наложился на пиксельную сетку.

Если сильно обобщить и упростить, то видимое качество мелких шрифтов на экране в Windows можно изобразить в виде примерно такого графика.

Качество отображения шрифтов PostScript нарисовано в виде толстой размытой линии, потому что оно меняется от размера к размеру. Предсказать это для абстрактного шрифта в вакууме малореально, но для любого конкретного шрифта это была бы зигзагообразная линия.

Подводим итоги: грамотное инструктирование шрифтов с данными TrueType имеет очень большое значение, но только для компьютеров и только с операционной системой Windows или Linux. Все остальные устройства используют собственные методы отображения шрифтов.

Тогда так ли это важно? Кому нужен хинтинг в 2020-х годах?

По данным Statcounter, сейчас доля компьютеров с Windows — это около трети всех устройств, с которых люди выходят в интернет.

В России доля Windows и Linux приближается к 60%.

Поэтому пока что инструктирование шрифтов под экран актуально — посмотрим, что будет через пять или десять лет.

#шрифты #типографика #хинтинг