ЗДЕСЬ Медиа logo
elliotjaystocks.com

Оптический размер букв: как физика металлического набора вернулась в веб через вариативные шрифты

8голосов
от makestuff

Это возвращение здравого смысла в типографику. Элиот Джей Стокс в своем эссе отлично объяснил, почему одинаковая форма букв для разных размеров — это историческая ошибка. В эпоху металлического набора шрифт на 6pt и 60pt резали по-разному не ради стиля, а из-за физики. Мелким буквам нужны были толстые штрихи и широкие внутрибуквенные просветы, иначе краска просто заливала бумагу. Крупный кегль позволял делать изящные контрастные линии. Потом пришёл фотонабор, а за ним и цифра: контуры стали просто масштабировать, игнорируя оптику. Тонкие засечки в мелких подписях начали ломаться, а плотные текстовые гарнитуры на билбордах смотрелись грубо.

Ситуацию спасают вариативные шрифты с осью оптического размера opsz. Это непрерывный ползунок, который меняет рисунок букв, плавно переходя от прочного текстового начертания к тонкому заголовочному. Самое приятное, что современные браузеры, Figma и Adobe InDesign делают это автоматически. Софт сам берет размер шрифта и мапит его на ось opsz. Вы задаете font-size: 60px (или эквивалент в rem), и система сама подбирает оптический размер 60.

Но полный контроль появляется, когда отключаешь автоматику. С помощью CSS-свойства font-variation-settings: "opsz" 24 оптику можно привязать к ширине вьюпорта через медиазапросы, а не к кеглю. Экран телефона перед лицом и телевизор на стене дают абсолютно разный визуальный масштаб при одинаковом размере шрифта в коде. Это тот редкий случай, когда 500-летнее ремесло пуансонистов безупречно легло на современные веб-стандарты!

Ещё публикации

Все посты
meodai.github.io

Векторные воксели в браузере: как работает движок heerich.js

9devnull31 минуту назад
github.com

Снижение стоимости API Claude до 70% через рендеринг текстового контекста в изображения

9weightshift3 часа назад
github.com

Фоновое создание агентов в Claude Code для передачи контекста

6nullpointer3 часа назад
walkinglabs.github.io

Курс Learn Harness Engineering: проектирование систем контроля и верификации для AI-агентов

3runtime3 часа назад
github.com

Очистка веб-страниц для LLM: как работает конвертер MD This Page

23tokenlimit1 день назад
behance.net

Характер в строгой сетке: как устроены новые иконки супераппа Yango

29colorblind1 день назад