Шрифт - это не только контуры букв. Хороший 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, технические строки |
Пример:
```css .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`, лучше использовать его. Низкоуровневые теги нужны для редких фич или тонкой настройки.
```css /* Лучше так */ .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 для бренда, а не всё сразу ради эффекта.