OpenType в CSS: как настроить лигатуры и альтернативы

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

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

Важно различать шрифт и CSS. Свойство не создаёт отсутствующую глифу и не добавляет гарнитуре новые варианты начертания. Если в файле нет функции ss01 или знака для альтернативной буквы, браузер не сможет «сгенерировать» её по запросу. Поэтому сначала проверяют возможности конкретного шрифта, а затем выбирают подходящий CSS-синтаксис.

Лигатура заменяет последовательность символов одной составной формой. Самый знакомый пример — fi или ffi, где соседние буквы могут получить более аккуратное соединение. В OpenType распространённые лигатуры обычно связаны с тегом liga, контекстные — с clig, декоративные — с dlig, а исторические — с hlig. Для обычного текста браузер часто применяет стандартные функции автоматически, но режим можно задать явно.

Базовое включение распространённых лигатур выглядит так: font-variant-ligatures: common-ligatures; Отключение задаётся значением no-common-ligatures. Такой синтаксис лучше читается в коде и сообщает о намерении на уровне CSS, тогда как запись font-feature-settings: "liga" 1; требует знания внутренних тегов шрифта.

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

Стилистические альтернативы заменяют отдельные буквы или группы знаков на другой рисунок. В OpenType они часто представлены наборами ss01–ss20, одиночными вариантами salt, character variants cv01–cv99 или историческими формами hist. Названия и количество наборов зависят от шрифта: тег ss01 в одной гарнитуре может менять форму «a», а в другой — форму цифр или знака амперсанда.

Когда нужен стилистический набор, используйте font-variant-alternates. Например: font-variant-alternates: styleset(ss01); Для нескольких наборов значение объединяют: font-variant-alternates: styleset(ss01, ss02); Такой вариант предпочтительнее прямого вызова font-feature-settings, потому что назначение свойства понятно даже без справочника OpenType-тегов.

Для одиночных альтернатив применяют значение character-variant(), для исторических форм — historical-forms, а для декоративных замен, если шрифт их поддерживает, — swash(). Перед публикацией проверьте результат на реальных словах: альтернативная буква может иметь другую ширину, высоту или положение относительно соседних знаков.

font-feature-settings — низкоуровневый инструмент для прямого управления OpenType-тегами. Он полезен, когда нужной функции нет среди стандартных CSS-свойств или когда требуется явно включить редкую возможность конкретного шрифта. Пример: font-feature-settings: "dlig" 1; включает discretionary ligatures, если они есть в гарнитуре.

Теги записывают в кавычках, используют ровно четыре латинских символа и отделяют несколько функций запятыми. Например: font-feature-settings: "liga" 1, "onum" 1, "tnum" 1; В этом примере одновременно включаются лигатуры, старостильные цифры и табличные цифры. Однако для чисел лучше использовать font-variant-numeric, если задача не требует особого тега.

OpenType в CSS используется не только для буквенных альтернатив. Для цифр есть font-variant-numeric: tabular-nums; — цифры одинаковой ширины для таблиц и финансовых показателей. Пропорциональные цифры задаются значением proportional-nums. Старостильные цифры включают oldstyle-nums, а lining-nums возвращает цифры, выровненные по высоте прописных букв.

Составные числовые настройки можно объединять: font-variant-numeric: oldstyle-nums proportional-nums; Такой вариант подходит для спокойного книжного текста, где цифры должны лучше вписываться в строку. Для интерфейсных таблиц обычно выбирают lining-nums tabular-nums, чтобы значения стояли ровными колонками.

Капитель включают через font-variant-caps: small-caps; Если шрифт содержит настоящую капитель, браузер использует её. Это предпочтительнее, чем text-transform: uppercase, потому что капитель — самостоятельные знаки с адаптированными пропорциями. Для порядковых числительных существуют ordinal, для дробей — diagonal-fractions, а для верхних и нижних индексов — super и sub, если они поддержаны гарнитурой.

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

Для основного текста можно задать: .article-body { font-variant-ligatures: common-ligatures; } Для декоративного заголовка: .display-title { font-variant-ligatures: discretionary-ligatures; font-variant-alternates: styleset(ss01); } Такое разделение сохраняет нейтральное чтение в абзацах и позволяет использовать выразительные формы только там, где они поддерживают композицию.

Для цен, дат и показателей используйте: .metrics { font-variant-numeric: lining-nums tabular-nums; } Табличные цифры помогают визуально выровнять значения в соседних строках. Если у шрифта нет соответствующей функции, браузер не обязан искусственно менять ширину цифр, поэтому результат нужно проверить в выбранной гарнитуре.

Отдельная ошибка — считать, что слово «альтернатива» всегда означает один и тот же тип функции. Стилистический набор ss01, одиночная character variant и контекстная замена работают по-разному. Для точного результата изучите документацию гарнитуры или откройте шрифт в редакторе, который показывает таблицы GSUB и GPOS.

Нет. Распространённые лигатуры часто применяются шрифтовым движком автоматически, если гарнитура и браузер поддерживают такую обработку. Явное font-variant-ligatures нужно, когда вы хотите зафиксировать поведение, отключить замену или включить декоративный и исторический набор.

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

Посмотрите описание гарнитуры: дизайнер или разработчик шрифта обычно указывает доступные наборы ss01, ss02, cv01 и другие функции. Точный состав также можно проверить в шрифтовом редакторе или приложении для верстки. Одного универсального значения ss01 для всех гарнитур не существует.

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

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

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

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

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