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:
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.
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:
4. Adding custom parameters to masters
Go to “Custom Parameters” and click on the + button to add property:
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:
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
- Animation with variable font technology – Part 11.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… Read More »Animation with variable font technology – Part 1
- “The Running Fox” – Animation with variable font technology – Part 2This tutorial is way more exciting and less complicated than Part 1 was! In this one we are about to “capture” this little fellow over here (animation pauses on hover): f 1.2 Animation 1. Animated variable font files in HTML and… Read More »“The Running Fox” – Animation with variable font technology – Part 2
- Drawing outlines with Glyphs1.1 Drawing a proper skeleton 1. Open Glyphs App Create a New File, ( command + N ) go to Font Info then name it and save it: When you have the App open, the default view is a grid of… Read More »Drawing outlines with Glyphs