Variable Fonts Playground

I never had the opportunity to use variable fonts in a production environment, so I created a tiny playground here for me (and you!) to try it out.

FYI, variable fonts are supported in all major (evergreen) browsers on most operating systems.

Variable fonts can be customized by using the axes of variation. So instead of having to download an italic variant and different weight variants, for example, you can download one variable font and tweak it via CSS.

There are two kinds of axes of variation: registered and custom. To customize registered axes of variation, like weight and width, one should use the standard settings, e.g. font-weight: 300. ´For custom axes of variation one needs to use the lower level syntax, e.g. font-variation-settings: 'ABCD' 88.

Font creators can use custom axes to make their variable fonts extremly versatile, as you will see in the playground.

Now, on to the playground! I am using the Recursive font which exposes a number of custom axes. The sliders in the playground go from the minimum possible value to the maximum possible value of each axis. The exception is size, which is not an axis. The initial value is the default value of the respective axis.

You can edit the text. You should also be able to use the playground without JS.

Playground