top_banner_tthovespro
Главная Блог Хинтинг шрифтов: от появления к практическому применению

Хинтинг шрифтов: от появления к практическому применению

История формата 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).

Black & White Rendering, появился в первой версии формата TrueType
Black & White Rendering, появился в первой версии формата TrueType

Apple выпустила свой вариант (TrueType GX) раньше, поэтому у Microsoft, чей формат был еще в разработке, могли возникнуть проблемы из-за лицензии. В результате продукт Microsoft получил название TrueType Open.

Публикация TrueType Open была приурочена выходу Windows 95. Главным обновлением в ней стал Antialiasing — экранное сглаживание в градациях серого цвета.

GrayScale Rendering, появился в последующей версии TrueType
GrayScale Rendering, появился в последующей версии TrueType


В 1996 году две некогда конкурирующие компании Microsoft и Adobe выпустили совместный открытый формат шрифтов — OpenType с поддержкой TrueType и PostScript контуров, Unicode и типографических функций (капителей, лигатур и т. д).

Таким образом, семейство современных шрифтов получило имя, в котором отразилась вся история их создания, — OpenType:

• TrueType(.ttf) — OpenType шрифты с контурами TrueType

• OpenType(.otf) — OpenType шрифты с контурами PostScript

Благодаря изначальному широкому функционалу TrueType стандарта в 2016 году на его базе появились вариативные шрифты.


С самого начала у TrueType формата сложилась плохая репутация, и причина этому  огромное количество некачественных шрифтов, ведь он был открытым стандартом, в отличие от PostScript Type 1. Как следствие, TrueType шрифты не получили широкого распространения на старте, а среди массовой аудитории пользовались популярностью PostScript шрифты. Спустя время у TrueType формата все-таки появилась своя ниша: к нему обращались большие компании, когда нужно было разработать важные системные шрифты или сделать шрифты на заказ.

Технология TrueType стартовала в начале 90-х, когда использовались мониторы с крайне низкой плотностью пикселей (DPI), и представляла из себя простейшую черно-белую графику. Шрифты, которые отображались на экране, имели лишь одноцветное представление без градаций полутонов (BI-Level Rendering). С развитием аппаратного и программного обеспечения графика на персональных компьютерах стала более продвинутой, и в отображении шрифтов появился градиент серого цвета (Grayscale Rendering). Постепенно широкое распространение получили жидкокристаллические мониторы. Разработчики ПО использовали особенности растеризации ЖК-мониторов, у которых каждый пиксель состоит из трех цветов. Это получило название SubPixel Rendering. На данной технологии основаны растеризаторы ClearType и DirectWrite от Microsoft.  

DirectWrite рендеринг

DirectWrite рендеринг

TrueType и OpenType форматы содержат глифы в виде контуров из кривых Безье, но подход к хинтингу реализован кардинально разными способами

Если кратко: в PostScript шрифтах в каждом глифе выделяются определенные элементы (горизонтальные и вертикальные стемы, засечки и т. д), затем на них автоматически накладываются заданные или вычисленные параметры — толщина, ширина, высота. По такой схеме хинтинг делается молниеносно, но у человека мало возможностей повлиять на итоговый контур, потому что растеризатор сам решает, чем из этих подсказок и как он воспользуется для вывода текста на экран.

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

Высокая точность и качество TrueType шрифтов при отображении на экране обеспечиваются благодаря колоссальной сложности при разработке. Для дизайнера шрифта контур TrueType кривых очень сложен в редактировании, так как из-за использования квадратичных кривых Безье он содержит большее количество точек. Хинтинг является также сложным и комплексным процессом, который по силам только высококлассным дизайнерам шрифтов. Контуры же OpenType (PostScript) шрифтов просто редактируются, содержат кубические кривые, хинтинг шрифтов сильно упрощен и практически автоматизирован. Отображение на экране при этом значительно хуже, но унифицировано для всех шрифтов.

В 1999 году компания Apple интегрировала в свою операционную систему собственный растеризатор для экранов под названием Quartz 2D. Он унифицирует отображение как TrueType, так и OpenType шрифтов от всех производителей на экранах компьютеров Apple, игнорируя TrueType хинтинг. Таким образом формат TrueType остался актуален для Windows и Linux устройств.

Что такое TrueType хинтинг и зачем он нужен

В цифровой типографии каждый символ определяется набором контуров, обычно состоящих из сплайнов в виде кривых Безье. Когда символ рендерится на пиксельной сетке, контуры масштабируются до нужных размеров, а затем все пиксели внутри полученного контура заливаются черным. Такой алгоритм отлично показывает себя при высокой плотности пикселей (DPI). Однако при DPI ниже 150 процесс рендеринга становится проблематичным. 

Слева направо: векторное представление глифа, растеризация глифа на пиксельной сетке 18pt 144 DPI, растеризация глифа на пиксельной сетке 18pt 96 DPI
Слева направо: векторное представление глифа, растеризация глифа на пиксельной сетке 18pt 144 DPI, растеризация глифа на пиксельной сетке 18pt 96 DPI

TrueType хинтинг (или инструктирование) — подсказки, которые с помощью специального программного обеспечения зашиваются внутрь шрифтового файла. Можно сказать, это ограничения, которые накладываются при масштабировании на контуры знаков шрифта и лучшим образом отражают изначально заложенные дизайнером формы на любом размере, устройстве, разрешении и программном обеспечении. Хинтинг улучшает внешний вид текста и его читабельность при низком разрешении экрана или мелком размере шрифта.

TrueType хинтинг бывает ручным и автоматическим. Для шрифтов светлых и средних по жирности начертаний с простыми формами, таких как Thin, ExtraLight, Light, Regular, Medium, в большинстве случаев автоматического хинтинга оказывается достаточно. С более жирными начертаниями — от DemiBold до Black и более сложных форм шрифтов (например, с засечками или акцидентных) — начинаются проблемы. Ручной TrueType хинтинг происходит либо в шрифтовом редакторе, либо в специальном ПО. Ручной хинтинг шрифта — настоящее искусство, с одной стороны, и ремесло, с другой. Специалист по хинтингу размечает готовый шрифтовой файл вручную, символ за символом, а после тестирует в разных размерах текста. Зачастую хинтинг позволяет сохранить характерный рисунок шрифта до 16 pt, а читаемость до 11 pt.

Окно TT-хинтинга в FontLab7
Окно TT-хинтинга в FontLab7

Четыре ключевые задачи, которые решает хинтинг

1. Обеспечивает контраст — хинтинг позволяет вернуть шрифту контраст, задуманный дизайнером;

2. Повышает читаемость — при небольших размерах текста именно хинтинг борется за читаемость знаков;

3. Создает спейсинг — хинтинг не позволяет буквам слипаться между собой и контролирует расстояние между буквами так, как это задумал автор;

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

TT Marxiana Elzevir до и после хинтинга
TT Marxiana Elzevir до и после хинтинга

Практическое применение в жизни

На начало 2021 года у 40 % пользователей ПК есть два основных разрешения экранов — 1920×1080 и 1368×768. У монитора с разрешением 1920×1080 и диагональю 22 дюйма DPI окажется всего около 100. Если взять как эталон 300 DPI при печати, то окажется, что это в 3 раза меньше, чем необходимо для безупречного отображения текста.

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

Кроме того, большие международные компании и корпорации могут иметь в своем парке старое или промышленное оборудование с низким разрешением в DPI, таким образом, вопрос отображения шрифтов для них по-прежнему актуален. Сюда же входят и узконаправленные сферы, такие как банковская деятельность (банкоматы), навигационное оборудование, разработка игр и приложений, телетрансляции, которые требуют бережного и внимательного отображения шрифтов на экран.

Пример некачественного хинтинга: контуры "слипаются"
Пример некачественного хинтинга: контуры «слипаются«
Пример некачественного хинтинга: вылет r над строчными буквами
Пример некачественного хинтинга: вылет r над строчными буквами

Как делается TrueType хинтинг в TypeType

В начале 90-х хинтинг был весьма сложным технологическим процессом, поскольку инструкции в TrueType шрифте представлены в виде низкоуровневых команд ассемблера:

Пример низкоуровневых команд ассемблера
Пример низкоуровневых команд ассемблера

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

• ttfautohint — автоматический хинтинг с опциональными параметрами, в основе которого лежит FreeType рендер; 

• Fontlab/Glyphs — шрифтовые редакторы с возможностью хинтинга;

• Microsoft Visual TrueType – standalone hiMicrosoft Visual TrueType — standalone-приложение для хинтинга.

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

Мы производим TrueType хинтинг как статичных отдельных начертаний, так и вариативных шрифтов и используем Visual TrueType плюс ряд собственных технических подпрограмм для оптимизации работы над хинтингом.

Интересный факт:

История VTT уходит корнями в создание TrueType формата. Один из его авторов и создатель языка инструкций TrueType — Сампо Касила (Sampo Kaasila), который написал также платное приложение для хинтинга под Macintosh (Typeman). Через некоторое время лицензия на Typeman была выкуплена компанией Microsoft, и на его основе был написан VTT, который теперь запускается только на Windows.

Хотя VTT и был изначально бесплатным, в начале 2000-х для работы в нем нужно было заполнить лицензионное соглашение, затем отправить по факсу в Microsoft, после чего получить доступ на форум, откуда можно было скачать приложение.

Почему именно VTT? На наш взгляд, это наиболее полный редактор, позволяющий делать с картинкой шрифта что угодно. К плюсам относится и то, что VTT разрабатывает сама Microsoft, что гарантирует отсутствие различий между предпросмотром в редакторе и итоговым рендером. К тому же есть поддержка: можно написать разработчикам и через несколько дней получить ссылку на билд с исправленным багом. Минусы: закрытость кода, из-за чего нам пришлось написать дополнительные скрипты на Python для реализации необходимого функционала.

Приведем примеры:

• Корректное положение диакритики над и под знаками;

• Принудительное выравнивание компонентов по пиксельной сетке;

• Корректная автогруппировка знаков;

• Перенос хинтинга между шрифтами;

• Исправление стемов в тонких начертаниях.

Типичный процесс хинтинга глифа:

1. Размечаются высотные точки, чтобы знак был консистентным относительно остальных знаков и держался заданной строки текста, не выпрыгивая из нее (то есть, к примеру, чтобы прописной знак по высоте был равен остальным прописным знакам, а строчной — остальным строчным знакам);

2. Фиксируется толщина всех горизонтальных толщин, чтобы они были идентичны другим аналогичным толщинам внутри шрифта;

3. Фиксируется по такому же принципу толщина всех вертикальных толщин;

4. Производится сдвиг (smooth) остальных незатронутых точек относительно тех, к которым были применены какие-либо команды (автоматически).

Процесс хинтинга шрифта:

1. Сначала запускается автохинтер, задача которого — сгладить глифы и выявить те места, где потребуется ручная правка. Это значительно экономит время;

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

3. Ручная работа: проверяются контрольные значения для шрифта (высоты и толщины), вносятся правки в инструкции, сделанные автохинтингом;

4. Тестирование и правки.

Скринкаст хинтинга одного знака
Скринкаст хинтинга одного знака

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

Работа в VTT над вариативным шрифтом
Работа в VTT над вариативным шрифтом

Хинтинг имеет ряд нюансов в зависимости от ОС или браузера, в котором отображается шрифт. Мы постоянно дорабатываем подпрограммы-скрипты, которые улучшают и оптимизируют наш хинтинг. Для наших клиентов мы детально прорабатываем хинтинг во всех запрашиваемых случаях так, чтобы шрифты отображались максимально точно. Кроме того, мы проводим аудит шрифтов и предлагаем соответствующие рекомендации.

Вместо заключения

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

Хинтинг логотипа TypeType
Хинтинг логотипа TypeType

Мы создали собственные инструменты (скрипты) и методики, которые оптимизируют процесс хинтинга шрифтов. Все это в сумме дало возможность сделать хинтинг доступным. И, так как наш опыт показывает, что шрифт без качественного ручного хинтинга много теряет в области применения, мы подвергаем хинтингу все шрифты, которые выпускаем.

Сейчас мы помогаем с хинтингом другим шрифтовым студиям. Команда TypeType всегда открыта к общению с коллегами по цеху.

Последние публикации

Шрифт с широким размахом: спецпроект к двадцатилетию SHIFTBRAIN

В 2023 году японское маркетинговое агентство SHIFTBRAIN запустило интерактивный сайт, посвящённый двадцатилетию компании. Для этого проекта команда TypeType разработала уникальный вариативный шрифт, способный экстремально растягиваться по горизонтали. За основу мы взяли бестселлер TT Norms® Pro, который уже использовался в качестве корпоративного шрифта компании — вы можете увидеть его на основном сайте SHIFTBRAIN.

Узнать больше
Буквы с татарским колоритом: история создания шрифта для территориального бренда Альметьевска

Брендинговое агентство Sensesay и студия TypeType создали TT Almet Origin — шрифт для нового бренда Альметьевска. Он стал уникальным голосом города (а позже — и всего юго-востока Татарстана). В статье рассказываем обо всём по порядку — от исследования до создания фирменного шрифта в рамках брендинга города.

Узнать больше
Панграмма: что это такое, виды, применение и полный список примеров

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

Узнать больше
Жирные шрифты: как использовать их в дизайне

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

Узнать больше
Оптимизация шрифтов: ключ к мгновенной скорости загрузки веб-сайта

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

Узнать больше
Шрифты печатных машинок: от ретро-механики к цифровой классике

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

Узнать больше
Пиши, обрезай: 10 лучших шрифтов для Cricut в 2025 году

Cricut остаётся одним из самых популярных инструментов для творчества в 2025 году. С его помощью создают и вырезают наклейки, открытки, декор и многое другое. В этой статье разберёмся, как выбрать лучшие шрифты для Cricut и правильно их использовать в Cricut Design Space.

Узнать больше
Лучшие и популярные шрифты для мемов: как правильно выбирать и использовать

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

Узнать больше
Ещё больше «ивишности»: как фирменный шрифт онлайн-кинотеатра Иви обрёл пару

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

Узнать больше

Узнать больше

Отключаем лигатуры в TT Norms® Pro

Немецкая аналитическая платформа для маркетологов Adjust обратилась к команде TypeType с запросом на кастомизацию шрифта TT Norms® Pro. Adjust предоставляет инструменты для развития компаний по всему миру.

Узнать больше
История TT Marxiana

TT Marxiana является проектом по реконструкции набора дореволюционных шрифтов, которые использовались в вёрстке журнала «Нива», издававшемся Санкт-Петербургским издательством А.Ф. Маркса. В нашем проекте мы решили остановиться на конкретном наборе шрифтов, которые использовались в изготовлении и печати журнала «Нива» 1887 года выпуска, а именно на антикве, италике, гротеске и эльзевире.

Узнать больше
История создания интерфейсной шрифтовой гарнитуры TT Interphases

Весной 2018 года, основываясь на опыте таких шрифтов как TT Commons™ и TT Norms, мы внутри TypeType сформулировали для себя идею универсального и полезного шрифта, который будет использоваться в современных интерфейсах на большинстве известных мобильных и веб-платформах.

Узнать больше