Глиф — конкретный рисунок знака в конкретном шрифте. Буква «а» как единица письма одна, а глифов у неё столько, сколько шрифтов на свете: в Arial она одна, в Times New Roman другая, в рукописном шрифте третья. Внутри одного шрифта у буквы тоже бывает несколько глифов: обычный, капитель, курсивная форма, декоративная альтернатива.
Дальше разберём, чем глиф отличается от символа, из чего он состоит внутри файла шрифта, какие глифы прячут OpenType-функции и как посмотреть их все. Если вы только знакомитесь с терминами, начните со статьи о кегле и размере шрифта: кегль и глиф встречаются в одних и тех же панелях.
CheckroiПодборка курсов по типографике119 курсов • 34 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
У слова есть и другие значения. Археологи называют глифами знаки, вырезанные на камне, в играх так зовут предметы и иконки. О них коротко в конце, а основная часть про шрифты.
Символ, графема и глиф: в чём разница
Три слова часто путают, хотя они описывают разные уровни. Консорциум Юникода в своём глоссарии разводит их так. Символ — наименьшая единица письма со смыслом. Графема обозначает то, что человек считает буквой. Глиф описывает форму, которой символ изображается на экране или бумаге.
| Понятие | Что это | Пример |
|---|---|---|
| Символ | Абстрактный знак с кодом в Юникоде | U+0434, кириллическая строчная «д» |
| Графема | Буква, как её воспринимает читатель | «д» в слове «дом» |
| Глиф | Рисунок знака в конкретном шрифте | «д» с хвостиками вниз в Montserrat или рукописная «д» с петлёй вверх в курсиве |
Связь между ними не всегда один к одному. Вот три типичных случая:
- Два символа, один глиф. Буквы «f» и «i» в хорошем шрифте сливаются в лигатуру «fi»: точка над «i» исчезает, верх «f» перетекает в соседнюю букву.
- Один символ, несколько глифов. Цифра «1» может быть пропорциональной, моноширинной для таблиц и старостильной, высотой со строчные буквы.
- Один символ, разные формы для разных языков. Болгарская «д» в некоторых шрифтах похожа на латинскую «g», а сербская курсивная «б» отличается от русской. Кодовая точка та же, глиф подставляется по языку текста.
Отсюда практический вывод: когда дизайнер говорит «в этом шрифте нет нужного глифа», он имеет в виду отсутствие её рисунка в файле: буква в алфавите есть, а нарисовать её автор шрифта не успел или не стал.
Курсивные глифы кириллицы выросли из рукописных форм, поэтому у «д», «т» и «и» в курсиве часто совсем другой рисунок. Откуда эти формы и кто их рисует руками, рассказали в статье о профессии каллиграфа.
Как устроен глиф внутри файла шрифта
Файл шрифта в формате OpenType (.otf или .ttf) устроен как набор таблиц. Глифы лежат в нём пронумерованными, и у каждого есть несколько составляющих.
- Контур. Векторные кривые, которые описывают форму. В шрифтах с TrueType-контурами это квадратичные кривые, в шрифтах с CFF кривые кубические, как в графических редакторах.
- Метрики. Ширина глифа и отступы слева и справа. Из них складывается расстояние между буквами ещё до кернинга.
- Номер глифа. Внутренний индекс в шрифте. Он не совпадает с кодом Юникода: шрифт сам решает, в каком порядке хранить рисунки.
- Привязка к символу. Таблица cmap сопоставляет коду Юникода номер глифа по умолчанию. Альтернативные глифы в ней могут вообще не значиться: до них добираются через OpenType-функции.
У количества есть потолок. В спецификации OpenType число глифов хранится в поле numGlyphs таблицы maxp как 16-битное беззнаковое целое, поэтому в одном файле помещается не больше 65 535 глифов. Для латиницы с кириллицей это огромный запас, а шрифты для китайского и японского упираются в этот предел и делятся на несколько файлов.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяЕсли нужно увидеть внутренности глифа целиком, откройте шрифт в редакторе: бесплатный FontForge показывает и контур с узлами, и метрики, и имя каждого глифа.
Какие глифы прячут OpenType-функции
Основной набор шрифта составляют буквы, цифры и знаки препинания. Всё остальное включается функциями OpenType: у каждой есть четырёхбуквенный тег, и программа по нему подменяет один глиф другим. Полный список ведёт Microsoft в реестре функций OpenType, на практике чаще всего нужны эти:
| Тег | Что подставляет | Где пригодится |
|---|---|---|
| liga | Стандартные лигатуры: fi, fl, ff | Набор длинного текста, включено по умолчанию |
| dlig | Декоративные лигатуры: ct, st | Заголовки, обложки, логотипы |
| smcp | Капитель: прописные высотой со строчные | Аббревиатуры в тексте, подписи |
| onum / lnum | Старостильные или выровненные цифры | Книжный текст или интерфейсы |
| tnum | Моноширинные цифры | Таблицы, прайсы, счётчики |
| frac | Дроби: 1/2 превращается в ½ | Рецепты, технические тексты |
| ss01–ss20, salt | Стилистические наборы и альтернативы | Другая форма «а», «g» или «у» под задачу |
| locl | Местные формы букв | Болгарская и сербская кириллица |
Про locl стоит запомнить отдельно. В описании функции в спецификации прямо сказано, что ряд букв болгарского и сербского алфавитов отличается от русских форм. Если сайт на болгарском показывает русские «д» и «л», чаще всего у страницы не указан язык, и браузер не включает местные глифы.
Набор функций у каждого шрифта свой. Бесплатный шрифт может не иметь ни капители, ни дробей, поэтому прежде чем закладывать их в макет, проверьте файл. Работать с такими функциями учат на курсах по типографике. Где брать шрифты с хорошим набором глифов и не нарушить лицензию, рассказали в подборке бесплатных шрифтов для коммерческого использования.
Как посмотреть все глифы шрифта
Быстрее всего это сделать в браузере, ничего не устанавливая. У каждого шрифта на Google Fonts есть вкладка с глифами.
- Откройте fonts.google.com и найдите шрифт, например Montserrat.
- На странице шрифта перейдите на вкладку Glyphs & languages. Интерфейс сайта английский.
- Глифы разбиты по группам: Latin Lowercase, Cyrillic Lowercase, Numbers, Punctuation и так далее. Нажмите на любой, и справа появится крупный рисунок.
Обратите внимание на строку над сеткой: сайт показывает только часть глифов. Полный набор, включая альтернативы и лигатуры, видно, если скачать файл и открыть его в редакторе шрифтов или в программе для просмотра.
Раздел Cyrillic Lowercase заодно отвечает на главный вопрос дизайнера: есть ли в шрифте кириллица и насколько она полная. У Montserrat там кроме русских букв есть знаки казахского, татарского, сербского и других алфавитов.
Без браузера глифы можно посмотреть встроенными средствами системы:
- Windows. Программа «Таблица символов» (команда charmap в окне «Выполнить») показывает все символы выбранного шрифта и их коды, оттуда же знак копируется в буфер.
- macOS. В программе «Шрифты» (Font Book) просмотр шрифта переключается на полный набор его символов.
- Любая система. FontForge откроет файл целиком, вместе с глифами, которых нет в таблице cmap. В таких редакторах работают авторы шрифтов, этому учат на курсах шрифтового дизайна.
Как вставить глиф и включить OpenType в программах
Доступ к глифам есть в графических редакторах, в Figma и в CSS. Пути разные, принцип один: выделить текст и включить нужную функцию или выбрать глиф вручную.
Photoshop, Illustrator, InDesign
В программах Adobe есть панель «Глифы». По справке Photoshop она открывается через меню «Окно» → «Глифы», а знак вставляется двойным щелчком в то место, где стоит курсор. Панель понимает латиницу, греческий и кириллицу. Работу с текстом в этих программах разбирают на курсах графического дизайна.
Учтите, что с марта 2022 года Adobe не продаёт свои продукты в России, так что новую подписку здесь не оформить.
Figma
В Figma функции OpenType собраны в меню текста. По справке Figma нужно открыть раздел Typography на панели свойств, вызвать меню типографики и перейти на вкладку Details. При наведении на функцию видно, как изменится текст, а то, чего шрифт не умеет, выделено серым. Если интерфейс Figma пока непривычен, есть курсы по Figma с нуля.
Бесплатный тариф Figma из России работает, а новые платные тарифы компания здесь не продаёт: это написано в её ответах для пользователей из России и Беларуси.
CSS на сайте
В вёрстке те же теги включаются свойством font-feature-settings, а для частых случаев есть отдельные свойства font-variant-*. Синтаксис и поддержку браузерами удобно смотреть в справочнике MDN.
/* моноширинные цифры в таблице цен */
.price-table td {
font-variant-numeric: tabular-nums; /* то же, что "tnum" */
}
/* капитель и стилистический набор в заголовке */
.hero-title {
font-feature-settings: "smcp" 1, "ss01" 1;
}
/* местные болгарские формы кириллицы */
<p lang="bg">Добър ден</p>Последняя строка относится к HTML: по атрибуту lang браузер узнаёт язык текста и сам включает функцию locl. Если вёрстку только осваиваете, посмотрите курсы по CSS, там свойства шрифта разбирают на первых же модулях.
Частые проблемы с глифами и что с ними делать
Большинство жалоб на «сломанный шрифт» сводится к четырём ситуациям.
- Вместо буквы пустой прямоугольник. В шрифте нет глифа для этого символа, а запасного шрифта система не нашла. Такие квадратики называют «тофу». Google даже назвал свою свободную гарнитуру Noto от «no tofu»: она закрывает почти все письменности мира. Решение: выбрать шрифт с нужной письменностью или прописать в CSS запасной шрифт.
- Кириллица выглядит чужой. Латиница набрана красивым шрифтом, а русские буквы системным. Значит, в файле нет кириллицы, и браузер подставил её из другого шрифта. Проверьте раздел Cyrillic на вкладке глифов до того, как утверждать шрифт в макете.
- Пропали лигатуры после трекинга. Спецификация CSS прямо говорит, что при ненулевом letter-spacing браузеру не следует применять необязательные лигатуры: в разреженном тексте слитые «fi» смотрятся странно. Так задумано, чинить ничего не нужно.
- Функция включена, а текст не изменился. В шрифте её нет. Figma в таком случае показывает пункт серым, в CSS ничего не происходит молча. Проверяйте набор функций в редакторе шрифта или на странице производителя.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналГлиф в других значениях
За пределами шрифтов слово «глиф» встречается в истории письма, играх и фэнтези. Коротко о каждом значении:
| Область | Что значит «глиф» |
|---|---|
| Археология и история письма | Знак, вырезанный на камне или дереве: петроглифы, знаки письменности майя, египетские иероглифы |
| Игры | Внутриигровые предметы и иконки: в Warframe так называют аватар профиля, в RAID: Shadow Legends это предметы для зачарования артефактов |
| Мультфильмы и фэнтези | Магические знаки, например в «Доме совы» |
Само слово идёт от греческого γλύφω, «вырезаю». Отсюда и «иероглиф», и «петроглиф», и шрифтовой термин: первые буквы для печати тоже вырезали вручную.
Где освоить типографику системно
Знать, что такое глиф, полезно, но в работе важнее умение подобрать шрифт под задачу, собрать пару гарнитур и настроить текст так, чтобы его было удобно читать. Этому учат на курсах типографики. На checkroi.ru их собрано больше сотни, ниже пять из подборки.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Каллиграфия с нуля (Шрифт в дизайне) Перейти на сайт курса |  Skillbox | 22 460 ₽ | 1872 ₽/мес. | 4 месяца | Обзор курса |
| Шрифт в дизайне Перейти на сайт курса | Skillbox | 62 662 ₽ | 4683 ₽/мес. | 2 месяца | Обзор курса |
| Типографика: о форме и содержании Перейти на сайт курса |  BBE | 35 000 ₽ | 5091 ₽/мес. | 1 месяц | Обзор курса |
| Основы типографики - Максимальный Перейти на сайт курса |  Фабрика Творцов | 226 600 ₽ | 6944 ₽/мес. | Обзор курса | |
| Шрифтовой дизайн (Санкт-Петербург) Перейти на сайт курса |  Школа дизайна ВШЭ | 100 000 ₽ | - | 8 месяцев | Обзор курса |
Больше программ — в полном каталоге курсов по типографике
О профессиях вокруг шрифта у нас есть отдельные материалы: кто такой типограф и чем леттеринг отличается от шрифта.
