05. Variable Type

Introduction & Some terms

Variable fonts are a (relatively) new(ish) technology that allows you to manipulate typography in a dynamic way. This might be useful for practical cases like brand systems (i.e. a "width" axis to accomodate various names on badges), but also allows for expressive or illustrative options. Additionally it also opens up the door for animation or interactivity of your type on websites and in video.

Axes → The values you want to manipulate, and how the range of values they encompass (i.e. weight 100 - 900).
Masters (glyphs) or Sources (Fontra) → The different outlines for each letter. These are usually associated with "weights" (i.e. thin, medium, bold, black, etc.), though you might also see them referred to as "instances" or appear for other qualities of a font (i.e. slant, display or text, etc.). The technical part here is that when you create a master or source, you set the value for different axes.

How is variable type?

We went over this in class, and Jack or I are happy to go over any issues you may encounter individually, but here are some resources for you.

Glyphs

ArrowType tutorial on variable type in Glyphs

glyphsapp page on creating a variable font↗

Fontra

Considerations

All points have to be the same → This includes which is the "first point" and the order of shapes within your glyph.
the abbreviations of non-standard axes, must be capitalized → if you want to have a non-standard axes ("yeast" "melt" "smokiness" etc.) the abbreviation must be capitalized.

Here are the "standard" axes for reference:

Tag	Name	What it controls	Typical Range
wght	Weight	Stroke thickness / boldness	100–900
wdth	Width	Horizontal proportion (condensed ↔ expanded)	~50–200 (%)
opsz	Optical Size	Design adjustments for size (caption ↔ display)	varies (e.g. 8–72)
ital	Italic	Switch between roman and italic	0 (off) – 1 (on)
slnt	Slant	Oblique angle (lean of glyphs)	0 to negative degrees

How to Test

I would avoid installing if you can. You may experience that fonts are cached in a way that is unclear, especially if you are making small changes.

This is one instance where Fontra is actually better because it is designed with variability first, and you can see how the type changes when different axes are different values.

Use Dinamo's Font Gauntlet↗ to test variable fonts and see if they are behaving the way you want.

If you're on a mac you can also use Font Goggles↗ to inspect font features, though this is more helpful for "nerdier" elements.

If you'd like to do something with the web and variable type, here's a blank template for animating the axis of a font in CSS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Variable Font Weight Animation Template</title>
        <style>
            /* this is your font */
            @font-face 
            {
                font-family: "MyVarFont";
                src        : url("./YourVariableFont.ttf") format("truetype");
            }

            html, body 
            {
                margin     : 0;
                height     : 100%;
                background : #FFFFFF;
                color      : #000000;
                display    : grid;
                place-items: center;
                font-family: sans-serif;
            }

            /* this is the content you want to animate */
            .word 
            {
                font-family: "MyVarFont", sans-serif;
                font-size  : 120px;
                animation  : loop_value 2s infinite alternate ease-in-out;
            }

            @keyframes loop_value 
            {
                from 
                {
                    font-variation-settings: "wght" 0;
                }
                to 
                {
                    font-variation-settings: "wght" 100;
                }
            }
        </style>
    </head>
    <body>
        <div class="word">HELLO</div>
    </body>
</html>

You can also now animate variable type in After Effects. Previously you had to use something like Drawbot and export image sequences. Here's some sample code if that is interesting to you