Вт. Дек 7th, 2021

Оптический размер, сокрытая сверхспособность вариативных шрифтов

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

Но поначалу: зачем нам разные дизайны для различных размеров?

Когда графический элемент должен быть больше, вы сможете сделать две вещи: увеличить его либо перерисовать. Масштабирование — простейшее решение, но оно не всегда смотрится хорошо. Возьмите этот гриб из измышленной видеоигры. Здесь он нарисован в размере 8 × 8 пикселей, в начальном размере, как в игре:

Оптический размер, сокрытая сверхспособность вариативных шрифтов

Милый! Но сейчас игрок стреляет в гриб ультразвуковыми ниндзялазерами, отчего гриб растет в три раза. Мы могли бы просто прирастить масштаб нашего гриба:

Оптический размер, сокрытая сверхспособность вариативных шрифтов

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

Оптический размер, сокрытая сверхспособность вариативных шрифтов

Дизайн гриба подстраивается под его размер: когда размер становится больше, то он становится более детализированным. Это гарантирует, что дизайн работает как с малеханькими, так и с большими размерами:

Оптический размер, сокрытая сверхспособность вариативных шрифтов

Этот принцип работает не только для грибов из видеоигр. Это работает и для типографики!

Почему для шрифтов недостаточно масштабирования?

Шрифты — это векторная графика, и они будут отлично выглядеть при увеличении. Это правда, но уровень детализации остается постоянным для всех размеров. Это означает, что дизайн, предназначенный для маленьких размеров, может выглядеть грубым при огромных размерах. Или дизайн, предназначенный для огромных размеров, может плохо выглядеть в малеханьких.

Дизайн с учетом размера употребляется в типографике уже давно. Ник Шерман писал об этом ранее:

Идея изменения буквенных форм шрифта для различных ситуаций не нова. Еще со времен Гутенберга каждый размер шрифта обычно отличался вариациями «оптического размера», которые изменяли интервалы, пропорции, жирность и другие детали для заслуги оптимальных результатов. Эта концепция была использована к некоторым цифровым шрифтам, которые предлагаются, к примеру, в версиях «Текст» и «Отображение».

На изображении ниже проиллюстрированы буковкы ”a” шрифтом Century Expanded. Каждая буковка выводится в разном размере, а потом масштабируется, чтобы вы могли детально узреть изменение:

Оптический размер, сокрытая сверхспособность вариативных шрифтов

Каждый размер Century Expanded, существовавший в аналоговой железной форме, имел вариации дизайна, чтобы сохранить стилистические черты разных размеров, компенсировать технические проблемы с печатью и сделать лучше читаемость.

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

Итак, вводим вариативные шрифты. Если у переменного шрифта есть ось 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.

Докладывает webformyself.com

от Admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *