Variable fonts with unusual axes
Experimental and expressive variable fonts with custom axes: softness, bounce, casualness, morphing, rotation, grade and more.
Push the slider
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.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Softness and Wonky axes alongside weight and optical size.
-
Roboto Flex
13 axes, including parametric controls for stroke thickness and letter heights.
-
Google Sans Flex
Six axes: weight, width, optical size, grade, roundness and slant.
-
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
A lowercase-height axis next to weight, width and optical size.
-
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.
Samples load a basic Latin subset of each family. Every family here carries an open license; its page states the terms and offers the original files.
Questions about variable fonts with unusual axes
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.