Variable by nature! Custom by Experience
On this platform and many others, you might encounter the phrase ‘variable font’. You probably know the meaning of ‘font’—and you are most certainly a user of them! However, when it comes to the word ‘variable’ in this context, you might find it less familiar. That's why we have created a short overview, which goes from the design concept right through to the end use, in an app or on a website.
Typefaces vs fonts?
Before diving straight into the ‘variable’ concept, lets clarify what we consider to be a font—as the word can be used in quite a broad way. A font is a typeface with a specific weight and other defined stylistic attributes—for example, Helvetica is a typeface, while Helvetica Condensed Bold is a font. (Helvetica Condensed would be somewhere between a typeface and a font! It contains different weights—thin, light, regular or bold for example—but all of them share the condensed feature.) In other words, a font is the most specifically defined typeface—the deepest level of feature group. It might help to imagine a font as a single point on a topographic map, with a longitude, latitude and elevation value.
The Variable Factor
To understand what differentiates a variable font from a standard font, let’s start with a simple example: weight. A typeface can be produced in a variety of weights, going from ‘thin’ (the lightest) to ‘black’ (the heaviest). The thin and the black weights are the two extremes—in other words, no other weight of the typeface will be lighter or heavier than these. We call them the ‘masters’. They are manually drawn letters and glyphs at each extreme of the weight line or ‘axis’.
Give me an Axis?
With a standard font (like Helvetica), it might be common to have maybe six different weights (bold, light, medium etc). However, once we have these two masters, we can in theory imagine an infinite number of variables between them. If the weight value of ‘thin’ is 1 and the ‘black’ value is 100, we can create a weight value which is at any intermediate point between black and light—9, 45, 93, 14, 65…
The variable font format actually gives us these infinite possibilities on an axis. By taking a step back from the static font (which defines only one specific weight, for example, giving it its outline and visual appearance), we can embrace variable font features…
Exploring the map
The simple example of the weight axis is a great point to start—and also the most common axis you are likely to encounter in the wild! But now let's introduce a width factor into the equation. To do this, we add another axis with ‘condensed’ and ‘normal’ as its two extremes. A single axis is purely working in one dimension, but by adding a second axis we multiply the possibilities. We now have what I would call a design map.
Whereas before, we had two masters (thin and black), we have now have four, and we therefore have many more combinations—starting with pairs of masters: condensed black, condensed thin, ‘normal’ thin and ‘normal’ black. We can vary the position in these two dimensions, creating not only a very specific point between the two weight masters but also a very specific point between the two width masters.
3 Dimensional Design Map
This is a relatively simple design map to understand. From a one-dimensional axis with two masters, to a two-dimensional axis with four masters, it's easy to picture the visual possibilities that are available. However, what happens if you now include a slant (or italic) axis? Or an optical size axis—or any other axis you can imagine that produces changes between two visual extremes. Possibilities are endless—but as always, it's important that the end usage is kept in mind!
The examples above (axis dimensions) are showing potential usages of masters combined to create axis and design spaces. This is not a rigid guide but a simplification made to illustrate the principles of design space. For example, a three-axis font can be built with four masters.
Other axes: a world of possibility
While the principle is fairly straightforward when it comes to variation in the weight of a typeface or the width of each character (or ‘glyph’), some axes might be a bit more mysterious…
First, it’s probably worth defining ‘slant’. ‘Slanted’ and ‘italic’ are used for the same purpose in typography; however, their construction and history are different in type design.
While slanted is usually closely based on the upright (roman) version of the typeface, italic could be considered in theory to be a totally new creation, a new drawing of the glyphs. Therefore while a slanted style would technically keep the same shapes and number of ‘points’ as its upright counterpart, italics would really work on a totally different model.
Anyway, coming back to the ‘slant’ axis… In case of a slanted approach, most of the time the points just move to make the overall shape lean from a few degrees such as 4°, 5° to more radical ones around 30 ° or 40° for example. You could now have an axis on which the first master is ‘straight’ while the other is ‘slanted’, leaning to the right—or even to the left (back slanted)—with a range of angles in between.
This concept is more difficult to explain both in essence and usage (which are intrinsically linked). The definition offered here is a personal one, as opposed to a universally agreed interpretation.
Graphic designers produce different kinds of work for different kind of usage, and many involve the use of text and characters at very different sizes—from newspaper print to a giant billboard display. Now while technology has given us the capacity to rapidly and effectively alter the appearance of text, the evolution of the human eye has not kept pace! The comfort of the reader needs to be taken into consideration. A highly contrasted or ornate font, for example, might give an elegant quality to a logo or a large title, but may create difficulties when used on a smaller scale. When reading naturally, our eyes quickly scan each word to recognize its shape, and connect it to its context in order for it to be read and understood. If the eye needs to apply a great effort to recognize the shape of each character to interpret each word, the reading speed will be reduced to the point that it can be painful.
It’s for this reason that certain typefaces possess a text version and a display version, for use at different ‘optical size’. A display style is likely to have a more significant contrast between the thin and thick parts of a character, and sometimes could have close or small ‘counters’ (counters are enclosed spaces, such as the ‘belly’ of the character ‘a’). On the other hand, creating a sympathetic ‘text’ style can be tricky but fascinating to design: the reduction of contrast and the opening of counters are some of the most traditional consideration to be taken when designing a text family. The size of the serifs, the spacing between the letters and many other properties are also taken into account when designing typefaces for large and small texts.
Give me my axis!
But why stop at just two versions? Different contexts deserve different solutions. By varying elements of the typeface according to optical size, the designer has the opportunity to marry the visual expression of a typeface to functionality, whatever its use.
Let’s enter the world of custom parameters for a variable font! While the width, weight, optical size and slant are all standard parameters and commonly accepted by technology, there is potential to add more custom axes, thereby opening a whole new world for creative people to explore…
Imagine a typeface with very sharp edges and terminals. What if we could make it possible to round off the stems? This adds a wealth of options, both at the extremes and the intermediate values.
You probably know of (and might even have played with) stencil blocks which allow you to draw and combine specific shapes or ‘glyphs’ to create letters. Now, let’s imagine we could define whether we have a gap between the shapes of the glyphs, and how wide that gap should be. We could have an axis dedicated to that, with one master that is ‘standard’ (with a closed shape) and another with a huge gap at the point of connection. We could call this axis ‘stencil’.
Probably the trickiest but one of the most interesting ideas is the concept of the serif as a variable axis. What if a typeface could have serifs of any size appearing from its sans-serif aspect? While this could be done easily on the masters at the drawing stage, the difficult part would be achieving the different variations in between. If the purpose of this variation is in creating animated text, then ‘why not?!’—there are great opportunities to explore. However, if the aim is to create usable and aesthetically controlled instances in between masters, the serif axis probably requires an extra step in order to have a really solid graphic toolbox.
Your turn to experiment…
Grab a variable font file—a ttf or woff2 file—and experiment! Start by testing some ideas on a static environment like print, adjusting all the parameters that are offered by the typeface. Then get stuck into an interactive prototype such as a website, to see what the variable fonts can offer you. A variable font file is one of the purest and most flexible forms of toolbox for the designer. There is an orchestra at your disposal—and you are the maestro!