This article covers what’s new, but if you want a simple explanation of what makes OpenType fonts different from, say PostScript Type 1 or TrueType fonts, please see my earlier piece, What is OpenType?.
Since the announcement of OpenType 1.8 last fall, type designers have been up to some pretty crazy and impressive stuff showing what’s possible with the new standard that’ll soon see broad support in OSes and browsers (and design apps). Up till now, digital fonts have contained mostly static character shapes, each essentially a scalable digital replica of its metal counterpart. So if for example, you needed Light, Regular and Bold weights of, say Futura, that would require three separate fonts. What if you could do it with just one font, with a slider for choosing the weight? And what if instead of only three positions on the slider, you had a virtually infinite number of weights to choose from between Light and Bold?
The above is a simplified explanation of what new fonts are currently capable of under the OpenType 1.8 standard. What they’re actually capable of is a lot more, but for now let’s explore this hypothetical example a bit more. Since moving a ‘slider’ smoothly transitions glyph shapes and font metrics from Light to Bold, this process can also be considered an animation. Imagine hovering over a hyperlink on a webpage, and the text responds by bouncing from Light to Bold and Back. This is something nightly builds of browsers already support. The transitions in shape are fully animate-able and keyframe-able in CSS.
Okay, two more examples. What if that same font had notches along the ‘slider’ labeled Light, Regular, Medium, and Bold, so you could precisely jump to a specific style by name? This is possible now too. Lastly, what if instead of only having a weight slider, you also had a width slider that would let you dial between narrow and wide? In addition to weight and width, you also had as many other sliders as the type designer who made the font cared to include? Really anything, including: the amount and kind of contrast, whether or not the stroke terminals are square or rounded (or something in between), amount of oblique slanting, optical size, the length of the ascenders, descenders, the x-height, and even down to individual glyph details, (like how long the tail of the Q is, etc.).
That’s just thinking about it in terms of the Latin alphabet. Consider what a benefit this technology is to designers of more complex scripts, and what a force behind those who use it in the arena of the pictorial, symbolic, and decorative. In responsive media, the forms themselves can respond to lots of different environmental factors, including user settings, screen dimensions, ambient light, values from all kinds of sensors and any machine interpretations of that data. Here are some of the first designs that take advantage of the new technology:
Laurence Penney’s Axis-Praxis is a website set up to show and test variable fonts, and allows you to see and test all of the above. This requires the latest operating system (macOS Sierra, or a Windows Insider preview build) and a super-up-to-date browser such as Webkit Nightly or Safari Technology Preview. Nick Sherman also started the Twitter account @variablefonts to collect news on the subject. He’s been using the term “variable font” since early 2015 and definitely knows what’s coming up.
Special thanks to Erik van Blokland, whose awfully familiar looking grunge typewriter face Jam was used to create the header animation. Play with it at Axis-Praxis, mentioned above. Also thanks to Erik for being in my opinion the most influential person in the setting of this new standard.
Subscribe to our newsletter to receive amazing offers, useful type tips and information about the latest font releases.