Как настроить оптический размер и функции OpenType в CSS

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

Актуально на 28 августа 2026 года. Примеры рассчитаны на современную веб-верстку и шрифты, в которых заявлены соответствующие OpenType-функции или вариативные оси. Если конкретный файл шрифта не поддерживает нужную возможность, CSS-свойство не создаст ее искусственно.

Оптический размер, или optical size, — это адаптация рисунка шрифта к размеру набора. В маленьком кегле буквы обычно получают более открытые апертуры, увеличенную разборчивость, менее тонкие детали и чуть более свободный ритм. В крупном кегле шрифт может использовать изящные контрасты, плотнее собирать формы и точнее показывать характер гарнитуры. Это не обычное масштабирование, а отдельная логика интерполяции или набор оптических мастеров внутри шрифта.

Вариативные шрифты часто содержат ось opsz. Ее диапазон задает автор шрифта, поэтому значения вроде 8, 14 или 72 не являются универсальным стандартом для всех гарнитур. В статических семействах оптические размеры могут поставляться отдельными файлами: например, для текста, подзаголовков и дисплейного набора. Перед версткой важно выяснить, действительно ли выбранный файл поддерживает opsz.

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

У вариативного шрифта могут быть стандартные оси wght для насыщенности, wdth для ширины, slnt для наклона, ital для перехода между прямым и курсивным начертанием и opsz для оптического размера. Также встречаются пользовательские оси с четырехсимвольными тегами, например GRAD для градации насыщенности. Диапазоны и поведение осей определяет создатель гарнитуры, поэтому не следует переносить значения из одного шрифта в другой без проверки.

Свойства font-optical-sizing, font-variant-numeric и font-variant-ligatures описывают типографическую задачу понятными CSS-значениями. Свойство font-feature-settings обращается непосредственно к OpenType-тегам, например liga, kern или tnum. Практичное правило такое: сначала используйте высокоуровневое свойство, а font-feature-settings оставляйте для функции, у которой нет удобного стандартизированного аналога или требуется точный контроль.

Начните с объявления @font-face и укажите формат файла, начертание и диапазон насыщенности, если это вариативный шрифт. Пример: @font-face { font-family: Editorial; src: url('/fonts/editorial-var.woff2') format('woff2'); font-style: normal; font-weight: 300 800; font-display: swap; }. После подключения проверьте, что браузер действительно использует этот файл, а не системный fallback.

Посмотрите документацию гарнитуры или сведения, которые предоставляет инструмент инспекции шрифта. Для оптического размера ищите ось opsz и ее минимальное и максимальное значения. Для функций OpenType проверяйте поддерживаемые теги: liga отвечает за стандартные лигатуры, dlig — за декоративные, kern — за кернинг, onum — за старостильные цифры, tnum — за табличные цифры, frac — за дроби.

Для большинства проектов достаточно свойства font-optical-sizing: auto. В этом режиме браузер передает шрифту текущий размер текста, а вариативная ось opsz выбирает соответствующий рисунок. Если шрифт поддерживает optical sizing, базовое правило может выглядеть так: body { font-family: Editorial, sans-serif; font-optical-sizing: auto; }. Это хороший старт для длинного текста, интерфейсов и адаптивных макетов.

Значение none отключает автоматическую оптическую настройку. Оно полезно, когда нужно сохранить единый рисунок во всех размерах, сравнить режимы в тесте или вручную управлять осью. Отключение не делает шрифт «неправильным», но может ухудшить читаемость мелкого текста, если гарнитура проектировалась с заметной разницей между текстовым и дисплейным режимами.

Ручное значение применяют в арт-дирекшене, брендинге и сложной типографической системе, где рисунок должен быть предсказуемым независимо от кегля. Пример: .display { font-optical-sizing: none; font-variation-settings: 'opsz' 72, 'wght' 650; }. Число 72 допустимо только в том случае, если оно входит в диапазон конкретного шрифта. Для основного текста чаще безопаснее оставить auto.

Не смешивайте ручную настройку без необходимости. Если одновременно задать font-optical-sizing: auto и font-variation-settings: 'opsz' 72, явное значение оси может стать фактическим приоритетом для opsz. В дизайн-системе заранее выберите один принцип: автоматическая адаптация для текста или фиксированные значения для определенных типографических ролей.

Кернинг изменяет расстояние между конкретными парами букв, чтобы визуальный интервал выглядел равномерным. Для обычного текста используйте font-kerning: normal или auto. Значение none отключает кернинг и может быть оправдано только в специальной графике, техническом интерфейсе или при отладке. Если гарнитура содержит качественную таблицу кернинга, отключать ее без причины не стоит.

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

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

Дроби и специальные числовые формы включают только там, где они улучшают набор. Например, font-variant-numeric: diagonal-fractions может превратить последовательность чисел в диагональную дробь, если функция есть в шрифте. Для технической информации полезны slashed-zero и ordinal, но их не следует включать глобально: ноль с косой чертой или порядковый суффикс нужны не каждому тексту.

Капитель — это не просто уменьшенные прописные буквы. Настоящая small caps создается отдельными глифами, рассчитанными на малый размер и согласованными по толщине с текстом. Используйте font-variant-caps: small-caps для аббревиатур, рубрикации или редакционных акцентов, но проверяйте кириллицу: не каждый шрифт содержит полноценную капитель для русского алфавита.

Вместо набора разрозненных свойств создайте несколько типографических ролей. Для body задайте автоматический оптический размер, обычный кернинг и стандартные лигатуры. Для table примените табличные цифры. Для display при необходимости зафиксируйте opsz и отдельно проверьте интервалы между крупными буквами. Такой подход упрощает поддержку и не заставляет разработчиков повторять длинные объявления в каждом компоненте.

Пример системы: body { font-optical-sizing: auto; font-kerning: normal; font-variant-ligatures: common-ligatures; } .data { font-variant-numeric: tabular-nums lining-nums; } .caption { font-variant-caps: small-caps; letter-spacing: 0.04em; }. Межбуквенный интервал для капители подбирайте визуально: универсального значения для всех гарнитур нет.

Если нужна функция без удобного CSS-аналога, используйте font-feature-settings: 'ss01' 1, где ss01 — стилистический набор, определенный автором шрифта. Название и номер набора нельзя угадывать: ss01 в одной гарнитуре может включать альтернативную форму буквы, а в другой — другой рисунок цифр. Документируйте такие решения в дизайн-системе.

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

Свойство включает автоматическую подстройку оптического размера, если шрифт поддерживает соответствующую ось. Браузер учитывает текущий размер текста и выбирает рисунок, рассчитанный на этот диапазон. Если в файле нет opsz, видимого эффекта от auto не будет.

font-size меняет размер набора, а optical sizing выбирает или интерполирует рисунок шрифта для этого размера. При увеличении кегля буквы не только становятся крупнее: могут измениться контраст, пропорции, открытость форм и плотность деталей. Поэтому два одинаковых font-size могут выглядеть по-разному в auto и none.

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

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

Используйте font-feature-settings, когда нужно обратиться к конкретному OpenType-тегу, например к стилистическому набору ss01 или уникальной функции гарнитуры. Для стандартных задач лучше подходят font-variant-ligatures, font-variant-numeric, font-variant-caps и font-kerning: они понятнее, легче документируются и точнее выражают намерение верстки.

Наиболее частые причины — в файле нет оси opsz, браузер использует fallback, значение переопределено font-variation-settings или различие между мастерами слишком небольшое для выбранного кегля. Проверьте загруженный файл в инструментах разработчика, диапазон оси и итоговые вычисленные CSS-свойства.

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

Начинайте с font-optical-sizing: auto, если вариативный шрифт содержит opsz, и добавляйте остальные OpenType-функции только под конкретные задачи: кернинг для пар букв, табличные цифры для колонок, капитель для редакционных акцентов, лигатуры и альтернативы для особого характера набора. Проверка на реальном контенте важнее формального включения всех возможностей.

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