Вариативные шрифты с необычными осями
Экспериментальные и выразительные вариативные шрифты с нестандартными осями: мягкость, подпрыгивание, небрежность, трансформация, поворот, градация и другие.
Push the slider
Формат вариативных шрифтов позволяет сделать осью любое свойство рисунка. Пять осей зарегистрированы и распространены: насыщенность, ширина, наклон, курсив и оптический размер. Помимо них автор может придумать ось для всего, что в шрифте можно осмысленно менять, и дать ей четырёхбуквенный тег прописными. Эта свобода в последние годы породила немало изобретательных шрифтов.
Нестандартные оси делятся на несколько групп. Параметрические оси управляют одной измеримой характеристикой, например толщиной тонких штрихов или высотой строчных, и служат инструментами тонкой типографской настройки. Градация меняет, насколько тяжёлым выглядит текст, не меняя его ширину, поэтому строки не перетекают; это полезно для тёмной темы. Выразительные оси меняют характер букв: более мягкие углы, небрежное дрожание, подпрыгивание вдоль базовой линии, засечкоподобные расширения. А некоторые оси — чистая идея: они связывают форму букв с данными или вращают их в пространстве.
В CSS каждая нестандартная ось задаётся через font-variation-settings, с её тегом и числом. Поскольку оси непрерывны, их можно анимировать или привязывать к прокрутке и вводу. В заметках ниже названы собственные оси каждого шрифта так, как они записаны в карточках.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Оси Softness и Wonky рядом с насыщенностью и оптическим размером.
-
Roboto Flex
13 осей, включая параметрические настройки толщины штрихов и высот букв.
-
Google Sans Flex
Шесть осей: насыщенность, ширина, оптический размер, градация, округлость и наклон.
-
Commissioner
Flare and Volume axes grow serif-like endings on a humanist sans.
-
Geologica
Cursive and Sharpness axes beside weight and slant.
-
Shantell Sans
Bounce, Informality and Spacing axes on a marker-style handwriting font.
-
Nunito Sans
Ось высоты строчных рядом с насыщенностью, шириной и оптическим размером.
-
Science Gothic
A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
-
Signika
A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
-
Kumbh Sans
A parametric axis changes the thickness of the thin strokes alone, beside weight.
-
Akshar
Weight and contrast axes in a condensed sans for Latin and Devanagari.
-
AR One Sans
A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
-
Honk
Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
-
Kablammo
A Morph axis makes its doodle-covered capitals shift and dance.
-
Tilt Neon
Two axes rotate its neon-tube letters up to 45 degrees in X and Y.
В образцах загружается только базовая латиница каждого семейства. Все семейства здесь — с открытой лицензией; на странице каждого указаны условия и есть исходные файлы.
Вопросы и ответы: Вариативные шрифты с необычными осями
Как использовать нестандартную ось в CSS?
Запишите font-variation-settings с тегом оси в кавычках и значением, например "SOFT" 100. Нестандартные теги чувствительны к регистру и пишутся прописными.
Можно ли анимировать оси вариативных шрифтов?
Да. Значения осей можно плавно менять или анимировать в CSS и управлять ими из JavaScript, поскольку это непрерывные числа.
Для чего нужна ось градации?
Она делает текст светлее или тяжелее, не меняя ширину букв, поэтому вёрстка не сдвигается. Дизайнеры используют её, чтобы компенсировать тёмный фон или различия дисплеев.