Кратко
Скопированоfont включает или выключает автоматическое оптическое масштабирование: браузер передаёт текущий размер шрифта в ось opsz вариативного шрифта, и тот адаптирует форму глифов под этот размер. Работает только для шрифтов с осью opsz.
Пример
Скопировано
<p class="auto">Display</p><p class="none">Display</p>
<p class="auto">Display</p>
<p class="none">Display</p>
p { font-family: "Newsreader", serif; font-size: 88px;}.auto { font-optical-sizing: auto; }.none { font-optical-sizing: none; }
p {
font-family: "Newsreader", serif;
font-size: 88px;
}
.auto { font-optical-sizing: auto; }
.none { font-optical-sizing: none; }
При auto шрифт подстраивается под крупный размер: штрихи становятся тоньше, контраст между жирными и тонкими частями выше. При none форма глифов одинакова при любом font.
Как понять
СкопированоХороший шрифт в идеале разный при разных размерах. Для мелкого набора дизайнер рисует более толстые штрихи и укрупнённые детали, чтобы буквы оставались чёткими. Для крупных заголовков делает тонкие и изящные штрихи с большим контрастом между жирными и тонкими частями.
Раньше типографы держали для этого отдельные файлы шрифта: один для мелкого текста, другой для заголовков. Вариативные шрифты позволяют упаковать всё в один файл: ось opsz описывает, как глифы меняются от мелкого набора до крупного.
font говорит браузеру передавать текущий font как значение оси opsz. Сам браузер форму глифов не меняет: он только сообщает шрифту размер, а шрифт уже знает, как перестроиться. Включено по умолчанию, так что в большинстве случаев свойство трогать не нужно.
Если в шрифте нет оси opsz, свойство ни на что не влияет.
Как пишется
СкопированоУ свойства два значения.
auto
СкопированоЗначение по умолчанию. Браузер автоматически выставляет opsz на основе font. Мелкий текст получает одно начертание, крупный — другое.
none
СкопированоОтключает автоматическую подстройку. Ось opsz фиксируется на значении по умолчанию из шрифта, и форма глифов не меняется вместе с размером.
Подсказки
Скопировано💡 Если нужен ручной контроль над осью opsz, выключи автоматику и управляй напрямую через font:
p { font-optical-sizing: none; font-variation-settings: "opsz" 48;}
p {
font-optical-sizing: none;
font-variation-settings: "opsz" 48;
}
Без font браузер перезапишет вручную выставленное значение opsz.
💡 Отфильтровать шрифты с осью opsz можно в Google Fonts через раздел Variable fonts. Среди гарнитур с явно выраженным эффектом оптического масштабирования: Newsreader, Fraunces, Literata.
- Chrome 79, поддерживается
- Edge 17, поддерживается
- Firefox 62, поддерживается
- Safari 13.1, поддерживается
На практике
Скопированосоветует
Скопировано🛠 Чтобы font работало, шрифт должен поддерживать ось opsz. Если подключаешь шрифт через Google Fonts, важно явно указать ось в URL-запросе, иначе Google Fonts может отдать версию без неё.
Для шрифта Newsreader с осями opsz и wght запрос выглядит так:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400&display=swap">
Часть opsz говорит: нужен opsz в диапазоне 6–72 и вес 400. Диапазон берётся из документации шрифта на fonts.google.com — у каждого он свой.
Если написать просто Newsreader без упоминания opsz, браузер получит статичный срез шрифта и оптическое масштабирование работать не будет.
🛠 Иногда font — это не отключение фичи, а осознанный дизайнерский выбор. Можно взять шрифт с большим контрастом между толстыми и тонкими штрихами и намеренно использовать его с none для мелкого текста: тогда мелкий текст будет выглядеть так же изящно, как крупный заголовок, создавая единый визуальный ритм.
.subheader { font-family: "Fraunces", serif; font-size: 22px; font-optical-sizing: none; /* фиксируем начертание как у крупного текста */ font-variation-settings: "opsz" 120;}
.subheader {
font-family: "Fraunces", serif;
font-size: 22px;
font-optical-sizing: none;
/* фиксируем начертание как у крупного текста */
font-variation-settings: "opsz" 120;
}
Здесь none отключает автоматику, а font вручную выставляет значение opsz, характерное для крупного текста. Работает как типографический приём, а не как компромисс.