От автора: у вариативных шрифтов есть скрытая суперсила, о которой люди просто не догадываются. Эта функция заставляет буквы фактически изменить свой вид, в зависимости от их размера. Это происходит автоматически в браузере. Все, что вам нужно, это вариативный шрифт с осью оптического размера!
Но сначала: зачем нам разные дизайны для разных размеров?
Когда графический элемент должен быть больше, вы можете сделать две вещи: увеличить его или перерисовать. Масштабирование — простейшее решение, но оно не всегда выглядит хорошо. Возьмите этот гриб из вымышленной видеоигры. Здесь он нарисован в размере 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
Источник: pixelambacht.nl
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен