Animating color and the custom variable font axis “Light”

Background

I’ve recently been playing around with icon variable fonts and Glyphs. I’ve previously built a closed source icon set using Optical Sizing as an axis, but I wanted to toy around with a slightly less useful axis.

I have a custom axis called “Light” or in the cryptic code required by font-variation-settings “LGHT.” The simplest way an axis in a variable font can be defined is by setting up the two ends of your axis.

Sun Icon at LGHT 1000

Sun at LGHT 100

Note that at least in Glyphs, each of the two different shapes (masters) has to have the exact same number of points, even if the points won’t ultimately be visible to remain compatible. The light gray shows the opposite end of the axis.

With the CSS property above, you set LGHT to any integer value between 100–1000. You can actually set the axis to any integer value, but Firefox and Chrome at least clamp the displayed version to the min and max.