# Variable fonts with unusual axes > Experimental and expressive variable fonts with custom axes: softness, bounce, casualness, morphing, rotation, grade and more. The variable font format allows any property of a design to become an axis. Five are registered and common: weight, width, slant, italic and optical size. Beyond those, a designer can invent an axis for whatever the typeface can meaningfully vary, and give it a four-letter tag in capitals. That freedom has produced some inventive type in recent years. Custom axes fall into a few groups. Parametric axes control one measurable feature, such as the thickness of thin strokes or the height of the lowercase, and are tools for fine typographic adjustment. Grade changes how heavy text looks without changing its width, so lines do not reflow, which is useful for dark mode. Expressive axes change the personality of the letters: softer corners, a casual wobble, a bounce along the baseline, serif-like flares. And some axes are pure concept, tying the shape of the letters to data or rotating them in space. In CSS every custom axis is set with font-variation-settings, using its tag and a number. Because they are continuous, axes can be animated or linked to scrolling and input. The notes below name each font's own axes as recorded. How these were chosen: Variable families whose records list at least one custom axis beyond the registered weight, width, slant, italic and optical size. ## Fonts (16) - [Recursive](https://trendhub.net/fonts/recursive.markdown) (Sans Serif, 16 styles · variable, OFL): Five axes in one file: proportional to monospace, linear to casual, upright to cursive. - [Fraunces](https://trendhub.net/fonts/fraunces.markdown) (Serif, 18 styles · variable, OFL): Softness and Wonky axes alongside weight and optical size. - [Roboto Flex](https://trendhub.net/fonts/roboto-flex.markdown) (Sans Serif, 20 styles · variable, OFL): 13 axes, including parametric controls for stroke thickness and letter heights. - [Google Sans Flex](https://trendhub.net/fonts/google-sans-flex.markdown) (Sans Serif, 18 styles · variable, OFL): Six axes: weight, width, optical size, grade, roundness and slant. - [Commissioner](https://trendhub.net/fonts/commissioner.markdown) (Sans Serif, 18 styles · variable, OFL): Flare and Volume axes grow serif-like endings on a humanist sans. - [Geologica](https://trendhub.net/fonts/geologica.markdown) (Sans Serif, 18 styles · variable, OFL): Cursive and Sharpness axes beside weight and slant. - [Shantell Sans](https://trendhub.net/fonts/shantell-sans.markdown) (Handwriting, 12 styles · variable, OFL): Bounce, Informality and Spacing axes on a marker-style handwriting font. - [Nunito Sans](https://trendhub.net/fonts/nunito-sans.markdown) (Sans Serif, 16 styles · variable, OFL): A lowercase-height axis next to weight, width and optical size. - [Science Gothic](https://trendhub.net/fonts/science-gothic.markdown) (Sans Serif, 18 styles · variable, OFL): A custom contrast axis thins the horizontal strokes, beside weight, width and slant. - [Signika](https://trendhub.net/fonts/signika.markdown) (Sans Serif, 5 styles · variable, OFL): A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight. - [Kumbh Sans](https://trendhub.net/fonts/kumbh-sans.markdown) (Sans Serif, 9 styles · variable, OFL): A parametric axis changes the thickness of the thin strokes alone, beside weight. - [Akshar](https://trendhub.net/fonts/akshar.markdown) (Sans Serif, 5 styles · variable, OFL): Weight and contrast axes in a condensed sans for Latin and Devanagari. - [AR One Sans](https://trendhub.net/fonts/ar-one-sans.markdown) (Sans Serif, 4 styles · variable, OFL): A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight. - [Honk](https://trendhub.net/fonts/honk.markdown) (Display, 1 style · variable, OFL): Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis. - [Kablammo](https://trendhub.net/fonts/kablammo.markdown) (Display, 1 style · variable, OFL): A Morph axis makes its doodle-covered capitals shift and dance. - [Tilt Neon](https://trendhub.net/fonts/tilt-neon.markdown) (Display, 1 style · variable, OFL): Two axes rotate its neon-tube letters up to 45 degrees in X and Y. ## FAQs ### How do I use a custom axis in CSS? Write font-variation-settings with the axis tag in quotes and a value, for example "SOFT" 100. Custom tags are case-sensitive and written in capitals. ### Can variable font axes be animated? Yes. Axis values can be transitioned or animated in CSS and driven by JavaScript, since they are continuous numbers. ### What is a grade axis for? It makes text look lighter or heavier without changing letter widths, so the layout does not shift. Designers use it to compensate for dark backgrounds or different displays. ## Related collections - [Variable fonts with a width axis](https://trendhub.net/fonts/for/variable-fonts-with-a-width-axis.markdown) - [Variable fonts with an optical size axis](https://trendhub.net/fonts/for/variable-fonts-with-optical-size.markdown) - [Futuristic display fonts for sci-fi titles and logos](https://trendhub.net/fonts/for/futuristic-display-fonts.markdown) - [Pixel and arcade fonts](https://trendhub.net/fonts/for/pixel-and-arcade-fonts.markdown) - [Handwriting fonts for notes, quotes and personal touches](https://trendhub.net/fonts/for/handwriting-fonts.markdown) - [Font families with nine weights and italics](https://trendhub.net/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/fonts/for/variable-fonts-with-unusual-axes (trendhub)