Это возвращение здравого смысла в типографику. Элиот Джей Стокс в своем эссе отлично объяснил, почему одинаковая форма букв для разных размеров — это историческая ошибка. В эпоху металлического набора шрифт на 6pt и 60pt резали по-разному не ради стиля, а из-за физики. Мелким буквам нужны были толстые штрихи и широкие внутрибуквенные просветы, иначе краска просто заливала бумагу. Крупный кегль позволял делать изящные контрастные линии. Потом пришёл фотонабор, а за ним и цифра: контуры стали просто масштабировать, игнорируя оптику. Тонкие засечки в мелких подписях начали ломаться, а плотные текстовые гарнитуры на билбордах смотрелись грубо.
Ситуацию спасают вариативные шрифты с осью оптического размера opsz. Это непрерывный ползунок, который меняет рисунок букв, плавно переходя от прочного текстового начертания к тонкому заголовочному. Самое приятное, что современные браузеры, Figma и Adobe InDesign делают это автоматически. Софт сам берет размер шрифта и мапит его на ось opsz. Вы задаете font-size: 60px (или эквивалент в rem), и система сама подбирает оптический размер 60.
Но полный контроль появляется, когда отключаешь автоматику. С помощью CSS-свойства font-variation-settings: "opsz" 24 оптику можно привязать к ширине вьюпорта через медиазапросы, а не к кеглю. Экран телефона перед лицом и телевизор на стене дают абсолютно разный визуальный масштаб при одинаковом размере шрифта в коде. Это тот редкий случай, когда 500-летнее ремесло пуансонистов безупречно легло на современные веб-стандарты!
Поделиться:
Векторные воксели в браузере: как работает движок heerich.js
Снижение стоимости API Claude до 70% через рендеринг текстового контекста в изображения