Шрифт - это не только контуры букв. Хороший OpenType-файл хранит правила: когда заменить несколько глифов на лигатуру, как сдвинуть пару букв, какие цифры использовать в таблице, как включить капитель и какие формы нужны для конкретного языка. Эти правила называют OpenType features.
Если игнорировать фичи, дорогой шрифт может выглядеть как простой набор контуров. Если включать их бездумно, можно испортить интерфейс: включить декоративные лигатуры в коде, получить прыгающие цифры в таблице или сломать читаемость кириллицы.
Две главные таблицы: GSUB и GPOS
GSUB отвечает за подстановки глифов: например, заменить f + i на лигатуру fi, включить small caps или выбрать локальную форму. Спецификация описана в OpenType GSUB table.
GPOS отвечает за позиционирование: kerning, mark positioning, контекстные сдвиги. Спецификация описана в OpenType GPOS table.
| Таблица | Что делает | Примеры |
|---|---|---|
| GSUB | Меняет один набор глифов на другой | liga, dlig, smcp, locl |
| GPOS | Сдвигает и позиционирует глифы | kern, mark positioning, cursive attachment |
| cmap | Связывает Unicode с глифами | Буква Ж попадает в правильный glyph ID |
| name | Хранит имена семейства и стилей | Как шрифт виден в ОС и редакторах |
Для пользователя всё это выглядит просто: буквы стоят ровно, цифры не прыгают, лигатуры появляются там, где нужно. Но внутри это работа таблиц.
Лигатуры: не всегда декоративность
Лигатура - это замена нескольких глифов одним. Самые привычные латинские примеры: fi, fl, ffi. В некоторых шрифтах есть декоративные discretionary ligatures, которые лучше включать только в заголовках.
| Feature | Назначение | Где включать |
|---|---|---|
| liga | Стандартные лигатуры | Обычно включены по умолчанию в тексте |
| dlig | Декоративные лигатуры | Только заголовки или брендовая типографика |
| clig | Контекстные лигатуры | Если шрифт и язык требуют |
| calt | Контекстные альтернативы | Скриптовые и рукописные шрифты |
Для кириллицы лигатуры встречаются реже, но контекстные альтернативы могут быть важны в рукописных и декоративных гарнитурах. Проверяйте реальные русские слова, а не только латинские демо.
Kerning: почему То и AV должны выглядеть ровно
Kerning - это настройка расстояния между конкретными парами или классами глифов. В современных OpenType-шрифтах kerning часто хранится через GPOS. CSS обычно включает kerning автоматически, но его можно контролировать свойством font-kerning.
Проверочные пары:
| Латиница | Кириллица | Что смотреть |
|---|---|---|
| AV, To, Wa | То, Го, РУ | Не должно быть больших дыр |
| Yo, Ta, VA | Тя, Ге, Ул | Не должно быть прилипания |
| 11, 00, 99 | №7, 10 ₽ | Цифры и знаки должны держать ритм |
Если шрифт отлично смотрится в слове Hamburgefonts, но плохо в Съешь ещё, для русскоязычного сайта этого недостаточно.
Цифры: обычные, табличные, старостильные
Цифры бывают разными. Для абзаца часто хороши proportional figures: каждая цифра имеет свою естественную ширину. Для таблицы, цен и статистики нужны tabular figures: все цифры одинаковой ширины, столбцы не прыгают. CSS даёт понятные свойства через font-variant-numeric; MDN описывает их в font-variant-numeric.
| CSS | OpenType feature | Где использовать |
|---|---|---|
| font-variant-numeric: tabular-nums | tnum | Таблицы, цены, счётчики, статистика |
| font-variant-numeric: proportional-nums | pnum | Обычный текст |
| font-variant-numeric: oldstyle-nums | onum | Книжная типографика и длинные тексты |
| font-variant-numeric: lining-nums | lnum | Интерфейсы, заголовки, таблицы |
| font-variant-numeric: slashed-zero | zero | Код, ID, технические строки |
Пример:
Для таблицы цен и для текста статьи удобно задавать разные наборы цифр.
- Селектор .price-table: font-variant-numeric: tabular-nums lining-nums;
- Селектор .article-body: font-variant-numeric: proportional-nums oldstyle-nums;
Не включайте tabular-nums везде. В обычном абзаце такие цифры могут выглядеть слишком механически.
Small caps и регистр
Капитель может быть настоящей OpenType-фичей, а может быть имитацией через уменьшенные заглавные. Настоящие small caps обычно хранятся как отдельные глифы и включаются через font-variant-caps: small-caps или feature smcp.
Если у шрифта нет настоящей капители, браузер может синтезировать её, и результат будет грубее. Для кириллицы это особенно заметно: не каждое семейство имеет качественные small caps для русского текста.
font-feature-settings: низкоуровневый инструмент
MDN предупреждает, что font-feature-settings - низкоуровневое свойство. Если есть высокоуровневое CSS-свойство вроде font-variant-numeric, лучше использовать его. Низкоуровневые теги нужны для редких фич или тонкой настройки.
Сначала пробуйте высокоуровневое свойство, а низкоуровневые теги включайте осознанно.
- Рекомендуемый способ, селектор .stats: font-variant-numeric: tabular-nums;
- Низкоуровневый способ только для конкретного тега, селектор .logo: font-feature-settings: "ss01" 1, "kern" 1;
Зарегистрированные feature tags перечислены в спецификации OpenType, например в разделе Registered features.
Что проверять в шрифте
| Проверка | Вопрос |
|---|---|
| liga | Не ломают ли лигатуры читаемость и поиск по тексту |
| kern | Есть ли kerning для кириллицы, а не только для латиницы |
| tnum | Ровно ли стоят цены и таблицы |
| onum | Уместны ли старостильные цифры в этом дизайне |
| smcp | Настоящая ли капитель и есть ли кириллица |
| locl | Нужны ли локальные формы для языков проекта |
| ss01, ss02 | Понятно ли, зачем stylistic set включается |
| CSS fallback | Что произойдёт, если feature не поддерживается |
Где фичи особенно важны
В каталогах шрифтов OpenType-фичи важны для specimen-страниц. Пользователь должен видеть не только алфавит, но и цифры, пары, лигатуры, языковые формы, таблицу цен, короткий абзац и заголовок.
В интерфейсе чаще всего нужны kerning и tabular numbers. В редакторском тексте - стандартные лигатуры, аккуратные цифры, иногда oldstyle. В брендинге - stylistic sets и discretionary ligatures, но только если они не мешают читаемости.
Итог
OpenType-фичи превращают файл шрифта в типографическую систему. GSUB выбирает правильные глифы, GPOS расставляет их точнее, CSS даёт разработчику доступ к этим возможностям. Хорошая практика - включать фичи по задаче: tabular-nums для таблиц, стандартные лигатуры для текста, stylistic sets для бренда, а не всё сразу ради эффекта.