Animation with variable font technology – Part 1

1.1 What does “Variable” mean?

1. Masters, Master Compatibility and Interpolation

Variable fonts are basically single font files with multiple masters and instances with different properties that can be adjusted manually in graphic editor softwares (or with html and css if you are using it on the web). Instances are different versions of a font such as weight or width just to mention the most common examples. Variablility can depend on other properties too (see later in this chapter). There are also instances that are “in between variations” defined by the values set in custom parameters of at least two masters. For the simplest sake of example, if we have a Bold and Regular master, we can interpolate a variant in between – like Medium – but we can also set and adjust these values anywhere between the two masters. This works only when the masters are compatible with each other. This depends on 3 things:

all glyphs has the same path direction (highlighted and pointed by blue arrowhead)
all glyphs consist of the same number of nodes (you can see the number of nodes indicated in the bottom right corner of the glyph preview showing 8 in this example)
all shapes and components are in the same order in each glyph (order is shown by red numbers). To enable this view, we need to click on “Show Master Compatibility” from the “View” menu

2. Setting custom parameters

Custom parameters are the properties that contain information about the different variations. The parameter we are going to need for now is called “Axes”. Adding values to this parameter allows us to create variations that define what will be “variable”. Multiple parameters can be set within a font file. For example weight and width. We will need custom ones as well, here’s how to add them.

open up Font Info window then Click on the plus sign (+) next to “Custom Parameter” to add one
click on “New Parameter” field to open a dropdown list, type “A” for “Axes” then select it.
Axis Names can be anyting, just like in this example, I enter “movement” and create a Li letter short for it “movt”
the system accepts 4 letter short names as long as they
aren’t taken

3. Adding multiple masters

Masters work like different layers within a single font file. To create a variable font, we are going to need at least two masters in order to enable possible instances in between these masters. Every master is an instance but not every instance is a master. What does it mean?

Instances can be interpolated from masters and so they become “in between stages” of their two closest masters. They can be exported as individual font files like a member of a font family such as “Medium” instance from a Bold and Regular master. But in this paricular example, the movement of the animation is defined by multiple masters so we do not need further instances. These masters will behave like key frames of the animation itself.

You can still set up instances of course with different variable values but not for this example, to keep it simple (and also, to leave something for you to experiment with later )

In classic frame by frame animations, our perception of the small diffenences between the frames produces the “movement”, so our eyes are kind of doing the job of interpolation. The transition between these frames is what makes the animation smooth, and this is the power of variability here.
Of course, the more complex an animation is, the more masters needed but still, a lot of the movements can be calculated automatically (interpolation) if everything is set properly. All right so, let’s see this in action with a simple example:

add new master(s) (in this example, just one more) by clicking + at the bottom left then click again on “Add Master”
then we will see a duplicate is created of our first one which is
“Regular” by default.
It is recommended to rename them according to a certain logic which is in this particular case 1 and 2

4. Adding custom parameters to masters

Go to “Custom Parameters” and click on the + button to add property:

from “New Parameter” dropdown, search and select “Link Metrics With Master” to keep the
rest of the masters (shapes and composition) aligned
Select which master’s metrics will be the default one, so the rest will stick to it.
In this case, let’s choose our first master “1” as for “New Value”

Make sure these patametes and their values are added to each master. However, there is no need to add them manually. The easy way: click within the “Custom Parameters” area, then it will be marked with light blue rectangle.

Then simply just copy by the cmd + C shortcut then click on the second master and paste by cmd + V.
finally, set a value (I put 200 in this example) that is different from the first master’s, just like on the third image below (c.). These values can be set to anything according how many steps we would like to include between the transition in the animation. Please note that this may affect speed and smoothness, however, speed can be also controlled by css (see last pages for more on CSS properties for HTML animation).

5. Editing shapes and composition

Now we have two masters, this is shown at the top left corner of the toolbar. We can switch between the two by clicking on the one we wish to work on. From the first master, let’s select the original shape by cmd + C then switch to second layer (master) and paste it (cmd + V).

The second master has to be modified in order to make a difference that can be the definition of
the animation itself. We will lower the smaller rectangle on the right. To make changes visible as for a comparison while editing there is a nice feature within the toolbar on the right side of the workspace under “Layers”. We can see the eye icon that is closed by default. This means that the only layer is visible is the one we are currently working with. Other layers they can be switched to be visible in the background if we make the eye open by simply clicking on it:

6. Exporting and testing variable font file

To save this font file as variable “GX.ttf” format. That is a smart idea to export only the glyph that actually contains the animation. According to our project, this glyph is lowercase “a” for now:

first, select all the glyphs (Command + A) then exclude the one that contains the layers of the animation, (lowercase “a” in this example) by clicking on it while holding down Command
uncheck the “export” box option in the bottom left sidebar. All selected glyphs will now be marked with a red circle that
is crossed

Now, head over to “File” menu on the top menubar and select “Export” choose the folder you would like to export the file to. Make sure you have “Export Destination” enabled then double click to do so. If all went well, and the masters are compatible we should see the following message popping up in the top right corner of th screen:

From the “Script” folder, find the following awesome tool by Mekkablue (for more on this, please find hope to ann and install scripts in Glyphs App)

This will generate a Html file that will be located and saved into your default folder where your font is initially saved so it should just work fine if you are opening it with any browser. Align this glyph to the centre (Control + C) then find the slider called “movement” (bottom right) to test it right away by clicking on it and dragging the handles below. (Size, Line Height and other control are also available depending on the variable properties of your font).

Let’s try it out!


Ctrl-R: Reset Charset. Ctrl-L: Latin1. Ctrl-J: LTR/RTL. Ctrl-C: Center. Not working? Please try in a newer macOS or use the latest Chrome. Pull mouse across this note to make it disappear.

Thanks for reading!

For further example with the Running Fox please check out part 2