Оптический размер, скрытая сверхспособность вариативных шрифтов
Но сначала: зачем нам разные дизайны для разных размеров?
Содержание статьи:
Когда графический элемент должен быть больше, вы можете сделать две вещи: увеличить его или перерисовать. Масштабирование — простейшее решение, но оно не всегда выглядит хорошо. Возьмите этот гриб из вымышленной видеоигры. Здесь он нарисован в размере 8 × 8 пикселей, в исходном размере, как в игре:
Милый! Но теперь игрок стреляет в гриб ультразвуковыми ниндзялазерами, отчего гриб вырастает в три раза. Мы могли бы просто увеличить масштаб нашего гриба:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Но это выглядит не совсем так, как бы хотелось. У нас есть большее пространство холста для работы, поэтому давайте используем его, чтобы добавить детали и уточнить дизайн:
Дизайн гриба подстраивается под его размер: когда размер становится больше, то он становится более детализированным. Это гарантирует, что дизайн работает как с маленькими, так и с большими размерами:
Этот принцип работает не только для грибов из видеоигр. Это работает и для типографики!
Почему для шрифтов недостаточно масштабирования?
Шрифты — это векторная графика, и они будут хорошо выглядеть при увеличении. Это правда, но уровень детализации остается неизменным для всех размеров. Это означает, что дизайн, предназначенный для небольших размеров, может выглядеть грубым при больших размерах. Или дизайн, предназначенный для больших размеров, может плохо выглядеть в маленьких.
Дизайн с учетом размера используется в типографике уже давно. Ник Шерман писал об этом раньше:
На изображении ниже проиллюстрированы буквы ”a” шрифтом Century Expanded. Каждая буква выводится в разном размере, а затем масштабируется, чтобы вы могли детально увидеть изменение:
Если вы хотите воссоздать это, вам понадобится 11 разных файлов шрифтов одного и того же шрифта, каждый из которых представляет определенный оптический размер.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Итак, вводим вариативные шрифты. Если у переменного шрифта есть ось opsz, это означает, что его дизайн будет меняться в зависимости от размера, в котором он используется. Так просто! Браузер и шрифт решают все полностью автоматически.
Как это выглядит на практике?
И для Aparey, и для Fraunces мы создали образец сайта, демонстрирующий разницу между текстом с оптическим размером и без него:
Когда я впервые увидел эти различия, я обнаружил, что они весьма существенны, особенно при мелком тексте. Текст с оптическим размером выглядит намного лучше!
Вот простая демонстрация, чтобы вы могли посмотреть, как меняется отдельная буква. В ней используется шрифт Fraunces. Отредактируйте букву в поле, чтобы увидеть, как ваш символ меняет свой оптический размер!
CSS, который вам не нужно писать
Браузер сразу же применит нужный оптический размер. Если по какой-то причине вы хотите отключить это, вы можете использовать font-optical-sizing:none (вместо значения по умолчанию auto). Это заставит все размеры шрифтов использовать дизайн шрифта по умолчанию.
Если вы хотите управлять оптическим размером независимо от размера шрифта, вы можете установить значения для оси opsz напрямую. Скажем, шрифт имеет диапазон оптического размера от 16 до 64 лет, вы можете установить максимальное значение оси: font-variation-settings:’opsz’ 64.
Но если вы не нарушаете правила типографики и дизайна намеренно, то лучшим вариантом будет font-size-to-optical-size.
Выбирайте шрифты с оптическими размерами
Шрифт с оптической осью будет выглядеть лучше для того размера, в котором он используется. Это происходит автоматически совместно с браузером или операционной системой. Вам не нужно ничего делать самостоятельно!
Особое спасибо Люку Коу за то, что он позволил мне использовать его пиксельный гриб. Посмотрите его другие работы!
Я спросил в Twitter, как лучше всего объяснить, что такое оптический размер, и многие умные люди привели отличные примеры. Взгляните на них, если хотите узнать больше.
Автор: Roel Nieskens
Источник: webformyself.com