{"id":9130,"title":"\u0417\u0430\u0449\u0438\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b \u0438 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430 \u0442\u0435\u0445\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443","url":"\/redirect?component=advertising&id=9130&url=https:\/\/vc.ru\/promo\/305439-reshenie-dlya-biznesa-zashchitit-rabochie-kompyutery-i-tratit-menshe-na-tehpodderzhku&placeBit=1&hash=85c54b2e13f250dedc65edea594d27f2b8d3772b0cf075b87dc84abeac949895","isPaidAndBannersEnabled":false}
Дизайн
Paratype

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

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

Растрирование шрифта на цветных мониторах. Режим Grayscale

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

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

https://www.reddit.com/r/retrogaming/comments/gig2w5/in_response_to_the_marge_simpson_meme/

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

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

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

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

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

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

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

Шрифт на жидкокристаллических мониторах. Субпиксельное сглаживание

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

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

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

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

Скриншот и макрофотография одного и того же слова на одном и том же экране

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

Иллюстрация из статьи Microsoft (по ссылке со слова DirectWrite): здесь площадки букв кратны целому пикселю, видно, что hn стоят тесно, а olo — слишком свободно

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

Cleartype в API DirectWrite: система рассчитывает общую длину слова, ширина площадок знаков может быть дробной

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

Где и как растрируются шрифты

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

Слева шрифт с кривыми Безье третьего порядка (PostScript), справа с кривыми Безье второго порядка (TrueType)

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

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

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

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

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

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

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

Верхняя строка — шрифт Golos Text в TrueType в MacOS 10.13, две нижние — тот же шрифт в Windows, без хинтов и с хинтами

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

Один и тот же шрифт в одном и том же размере в одном и том же приложении на Macbook Air 2012 года (сверху) и 2020 года (снизу)

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

Шрифты PostScript

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

Синие зоны регулируют высоту знаков (чтобы свисания круглых букв не превращались в лишний пиксель на макушке), а зелёные — толщину штрихов

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

Шрифты Adobe Fonts все с данными PostScript, поэтому в мелком размере на любом экране отображаются с помощью оттенков серого

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

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

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

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

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

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

Шрифт с данными TrueType в Windows без хинтинга
Шрифт с данными TrueType в Windows с хинтингом

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

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

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

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

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

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

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

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

0
2 комментария
Популярные
По порядку

Так, где мой New Roman?

0

Полезно, спасибо!

0
Читать все 2 комментария
Российско-швейцарская WayRay представила свой первый прототип электромобиля с AR-остеклением Статьи редакции

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

WayRay Holograktor WayRay
Использование YOLOv5 для задачи детекции

Ликбез по нейронным сетям

Как шеврон стал хлястиком: бывший арт-директор «Яндекса» рассказал о создании брендинга «Яндекс.Станции Мини» Статьи редакции

Название компании на колонке «в лоб» смотрелось бы агрессивно, а сделать тканевый шильдик на практике оказалось сложно.

Как канадские любители снегоходов и квадроциклов открыли для себя Россию

«Важно найти свою нишу и быть готовым к тому, что ничего не получится».

Почему аренда самоката стоит как каршеринг и зачем отказываться от франшиз: интервью с главой Whoosh Дмитрием Чуйко Статьи редакции

До продажи бизнеса есть ещё «как минимум» два года, а пока Whoosh подумывает о запуске в Европе и учится сам собирать электросамокаты.

Сооснователь и гендиректор Whoosh Дмитрий Чуйко
VELES BLOG Рассказываем как себя вести, чтобы заработать с Veles
«Она похожа на соль — улучшит любое блюдо, если не переборщить»: как инженер-пианист создал гитарную педаль Big Muff Статьи редакции

Майк Мэтьюс бросил работу в IBM, чтобы дарить гитарам звучание, как у Хендрикса и The Rolling Stones, и придумал «золотой стандарт» педалей с искажением: её в своих записях использовали Pink Floyd, The White Stripes и Depeche Mode.

Майк Мэтьюс Vintage Guitar
Как я стал резидентом ОЭЗ «Технополис Москва» — опыт компании «ХайТэк»

Опытом работы на территории особой экономической зоны столицы делится генеральный директор НТЦ «ХайТэк» Алексей Алясев.

Пресс-служба ОЭЗ «Технополис Москва».
Аборты и эвтаназия — убийство, а геноцид с целью сделать всех счастливыми — правильно

Какие еще моральные суждения выносит искусственный интеллект?

Модемы, роутеры и интернет-центры Yota можно приобрести на Avito, OZON и «СберМегамаркет»
null