# Вариативные шрифты с необычными осями > Экспериментальные и выразительные вариативные шрифты с нестандартными осями: мягкость, подпрыгивание, небрежность, трансформация, поворот, градация и другие. Формат вариативных шрифтов позволяет сделать осью любое свойство рисунка. Пять осей зарегистрированы и распространены: насыщенность, ширина, наклон, курсив и оптический размер. Помимо них автор может придумать ось для всего, что в шрифте можно осмысленно менять, и дать ей четырёхбуквенный тег прописными. Эта свобода в последние годы породила немало изобретательных шрифтов. Нестандартные оси делятся на несколько групп. Параметрические оси управляют одной измеримой характеристикой, например толщиной тонких штрихов или высотой строчных, и служат инструментами тонкой типографской настройки. Градация меняет, насколько тяжёлым выглядит текст, не меняя его ширину, поэтому строки не перетекают; это полезно для тёмной темы. Выразительные оси меняют характер букв: более мягкие углы, небрежное дрожание, подпрыгивание вдоль базовой линии, засечкоподобные расширения. А некоторые оси — чистая идея: они связывают форму букв с данными или вращают их в пространстве. В CSS каждая нестандартная ось задаётся через font-variation-settings, с её тегом и числом. Поскольку оси непрерывны, их можно анимировать или привязывать к прокрутке и вводу. В заметках ниже названы собственные оси каждого шрифта так, как они записаны в карточках. How these were chosen: Вариативные семейства, в карточках которых указана хотя бы одна нестандартная ось помимо зарегистрированных насыщенности, ширины, наклона, курсива и оптического размера. ## Fonts (16) - [Recursive](https://trendhub.net/ru/fonts/recursive.markdown) (Гротески, начертаний: 16 · вариативный, OFL): Five axes in one file: proportional to monospace, linear to casual, upright to cursive. - [Fraunces](https://trendhub.net/ru/fonts/fraunces.markdown) (Антиква, начертаний: 18 · вариативный, OFL): Оси Softness и Wonky рядом с насыщенностью и оптическим размером. - [Roboto Flex](https://trendhub.net/ru/fonts/roboto-flex.markdown) (Гротески, начертаний: 20 · вариативный, OFL): 13 осей, включая параметрические настройки толщины штрихов и высот букв. - [Google Sans Flex](https://trendhub.net/ru/fonts/google-sans-flex.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Шесть осей: насыщенность, ширина, оптический размер, градация, округлость и наклон. - [Commissioner](https://trendhub.net/ru/fonts/commissioner.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Flare and Volume axes grow serif-like endings on a humanist sans. - [Geologica](https://trendhub.net/ru/fonts/geologica.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Cursive and Sharpness axes beside weight and slant. - [Shantell Sans](https://trendhub.net/ru/fonts/shantell-sans.markdown) (Рукописные, начертаний: 12 · вариативный, OFL): Bounce, Informality and Spacing axes on a marker-style handwriting font. - [Nunito Sans](https://trendhub.net/ru/fonts/nunito-sans.markdown) (Гротески, начертаний: 16 · вариативный, OFL): Ось высоты строчных рядом с насыщенностью, шириной и оптическим размером. - [Science Gothic](https://trendhub.net/ru/fonts/science-gothic.markdown) (Гротески, начертаний: 18 · вариативный, OFL): A custom contrast axis thins the horizontal strokes, beside weight, width and slant. - [Signika](https://trendhub.net/ru/fonts/signika.markdown) (Гротески, начертаний: 5 · вариативный, OFL): A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight. - [Kumbh Sans](https://trendhub.net/ru/fonts/kumbh-sans.markdown) (Гротески, начертаний: 9 · вариативный, OFL): A parametric axis changes the thickness of the thin strokes alone, beside weight. - [Akshar](https://trendhub.net/ru/fonts/akshar.markdown) (Гротески, начертаний: 5 · вариативный, OFL): Weight and contrast axes in a condensed sans for Latin and Devanagari. - [AR One Sans](https://trendhub.net/ru/fonts/ar-one-sans.markdown) (Гротески, начертаний: 4 · вариативный, OFL): A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight. - [Honk](https://trendhub.net/ru/fonts/honk.markdown) (Акцидентные, 1 начертание · вариативный, OFL): Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis. - [Kablammo](https://trendhub.net/ru/fonts/kablammo.markdown) (Акцидентные, 1 начертание · вариативный, OFL): A Morph axis makes its doodle-covered capitals shift and dance. - [Tilt Neon](https://trendhub.net/ru/fonts/tilt-neon.markdown) (Акцидентные, 1 начертание · вариативный, OFL): Two axes rotate its neon-tube letters up to 45 degrees in X and Y. ## FAQs ### Как использовать нестандартную ось в CSS? Запишите font-variation-settings с тегом оси в кавычках и значением, например "SOFT" 100. Нестандартные теги чувствительны к регистру и пишутся прописными. ### Можно ли анимировать оси вариативных шрифтов? Да. Значения осей можно плавно менять или анимировать в CSS и управлять ими из JavaScript, поскольку это непрерывные числа. ### Для чего нужна ось градации? Она делает текст светлее или тяжелее, не меняя ширину букв, поэтому вёрстка не сдвигается. Дизайнеры используют её, чтобы компенсировать тёмный фон или различия дисплеев. ## Related collections - [Вариативные шрифты с осью ширины](https://trendhub.net/ru/fonts/for/variable-fonts-with-a-width-axis.markdown) - [Вариативные шрифты с осью оптического размера](https://trendhub.net/ru/fonts/for/variable-fonts-with-optical-size.markdown) - [Футуристические акцидентные шрифты для титров и логотипов в стиле sci-fi](https://trendhub.net/ru/fonts/for/futuristic-display-fonts.markdown) - [Пиксельные и аркадные шрифты](https://trendhub.net/ru/fonts/for/pixel-and-arcade-fonts.markdown) - [Рукописные шрифты для заметок, цитат и личных штрихов](https://trendhub.net/ru/fonts/for/handwriting-fonts.markdown) - [Семейства шрифтов с девятью насыщенностями и курсивом](https://trendhub.net/ru/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/ru/fonts/for/variable-fonts-with-unusual-axes (trendhub)