Как использовать OpenType-возможности шрифта на веб-странице

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

Актуально на 28 августа 2026 года.

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

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

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

Для повседневной работы предпочтительнее использовать высокоуровневые CSS-свойства font-variant и связанные с ними параметры. Они лучше описывают задачу и делают код понятнее. Свойство font-feature-settings стоит оставлять для функций, у которых нет удобного отдельного CSS-параметра, например для некоторых стилистических наборов.

К основным свойствам относятся font-variant-ligatures для лигатур, font-variant-caps для капители, font-variant-numeric для цифр, font-variant-position для верхних и нижних индексов, font-variant-alternates для альтернативных глифов, font-kerning для кернинга и font-optical-sizing для оптического размера в вариативных шрифтах.

Лигатура объединяет два или несколько символов в единый глиф. Стандартные лигатуры обычно предназначены для нормального набора и часто включаются шрифтом или браузером автоматически. Наиболее известные сочетания в латинице — fi, fl, ffi и ff. В кириллических гарнитурах набор лигатур может быть другим или отсутствовать.

Для управления стандартными лигатурами применяют font-variant-ligatures: common-ligatures. Если для конкретного шрифта нужны декоративные сочетания, используют discretionary-ligatures. Такие лигатуры лучше включать только в заголовках, цитатах или коротких акцентных фрагментах: в обычном абзаце необычная форма символов способна замедлить чтение.

Пример сценария: в заголовке книжного проекта можно включить discretionary-лигатуры, чтобы подчеркнуть характер гарнитуры, а в основном тексте оставить common-лигатуры. Для интерфейса интернет-магазина декоративные лигатуры обычно не нужны, потому что приоритетом остаются скорость сканирования и однозначное распознавание текста.

Кернинг регулирует расстояние между определёнными парами символов. Буквы A и V, например, визуально требуют другого сближения, чем прямоугольные знаки. В веб-типографике включить кернинг можно свойством font-kerning: normal. Для крупных заголовков результат стоит оценивать глазами: автоматические таблицы кернинга зависят от шрифта и не всегда идеально работают с нестандартными сочетаниями.

Если вариативный шрифт содержит ось оптического размера, свойство font-optical-sizing: auto позволяет использовать предусмотренные шрифтовым дизайнером настройки для разных кеглей. Мелкий текст может получить более открытые формы и увеличенные внутренние просветы, а крупный — более тонкие детали. Это работает только при наличии соответствующей оси и поддержке её конкретным шрифтом.

OpenType особенно полезен для работы с цифрами. Пропорциональные цифры занимают разную ширину и естественно выглядят в заголовках, датах и коротких подписях. Табличные цифры имеют одинаковую ширину, поэтому вертикально выравниваются в колонках. В CSS эти режимы задаются через font-variant-numeric: proportional-nums или tabular-nums.

Старостильные цифры, или oldstyle-nums, имеют высоту и характер, близкие к строчным буквам. Они подходят для книжного текста и спокойной редакционной верстки. Линейные цифры, lining-nums, обычно лучше работают в интерфейсах, где числа должны визуально конкурировать с заголовками и другими элементами управления.

Практический пример: для блока с ценами используйте lining-nums и proportional-nums, если значения размещены в отдельных карточках. Для финансовой таблицы, статистики или списка результатов выбирайте lining-nums и tabular-nums. Так десятичные значения и суммы будут образовывать ровные вертикальные колонки без ручного добавления пробелов.

Малые прописные, или small caps, превращают строчные буквы в уменьшенные формы прописных. Это полезно для рубрик, библиографических сведений, коротких меток и редакционных акцентов. Включайте функцию через font-variant-caps: small-caps, но проверяйте, есть ли в шрифте настоящая капитель. Если её нет, браузер может имитировать уменьшение, и результат будет менее качественным.

Для математических, кулинарных и технических материалов пригодны автоматические дроби. Свойство font-variant-numeric: diagonal-fractions может заменить запись вида 1/2 на более компактную композицию, если соответствующие глифы предусмотрены шрифтом. Порядковые обозначения можно оформить через ordinal, а верхние и нижние индексы — через font-variant-position: super или sub. Не заменяйте этими функциями смысловую разметку, если индекс важен для структуры документа.

Альтернативные глифы позволяют выбрать другой рисунок буквы или знака. Стилистические наборы часто обозначаются кодами ss01, ss02 и далее, а отдельные варианты могут быть доступны через salt. Такие функции задаются низкоуровневым свойством font-feature-settings, например с нужным тегом OpenType и значением on. Название и номер набора всегда проверяйте в документации конкретной гарнитуры.

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

font-feature-settings напрямую обращается к четырёхсимвольным OpenType-тегам. Такой подход нужен, когда стандартных CSS-свойств недостаточно: например, для стилистического набора ss01, альтернативного нуля zero или специфической функции шрифта. Запись требует точности: тег должен существовать в файле, а значение on или 1 должно соответствовать логике функции.

Не используйте font-feature-settings как универсальную замену font-variant. Низкоуровневая настройка хуже выражает намерение, может конфликтовать с сокращёнными свойствами и усложняет поддержку проекта. Сначала задайте семантически понятное CSS-свойство, а к OpenType-тегам переходите только для функции, которую нельзя включить иначе.

Отдельная ошибка — попытка исправить плохую верстку только с помощью OpenType. Кернинг не заменяет правильный размер шрифта, межстрочный интервал и длину строки. Лигатуры не компенсируют недостаточный контраст. Если текст плохо читается без дополнительных функций, сначала исправьте базовую типографику, а затем добавляйте точечные улучшения.

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

font-variant и связанные свойства описывают типографическую задачу понятным для CSS способом: включить капитель, дроби или табличные цифры. font-feature-settings обращается к внутренним четырёхсимвольным тегам OpenType и нужен для более специфических функций, например стилистических наборов.

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

Для таблиц обычно выбирают табличные цифры, или tabular-nums, потому что все знаки занимают одинаковую ширину и выравниваются по колонкам. Для отдельных цен, дат и коротких подписей чаще подходят пропорциональные цифры, или proportional-nums, которые выглядят компактнее и естественнее.

Да. OpenType-настройки наследуются как обычные CSS-свойства, поэтому их можно применить к отдельному классу заголовка, цитаты или декоративной подписи. Такой локальный подход безопаснее глобального включения: основной текст сохраняет нейтральный рисунок, а акцентный блок получает нужную выразительность.

Сами CSS-свойства обычно не создают заметной нагрузки. На производительность сильнее влияют размер веб-шрифта, количество начертаний, формат файла и стратегия загрузки. Используйте WOFF2, подключайте только необходимые варианты и не добавляйте отдельный файл ради функции, которой нет в интерфейсе.

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

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

Если вам нужен собственный шрифт с нужными глифами, стилями и OpenType-функциями, создайте его на fontgenerator.ru и подготовьте гарнитуру для дальнейшего использования в веб-проекте.