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?.

The new standard for 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?

What are the possibilities?

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:

Open Source / Proofs of concept

• Lab: David Jonathan Ross’s ‘pixel’ font where the shape of the pixels can be adjusted on multiple axes.
  
• Gingham: a sans with weight and width variations.
  
• Kairos Sans: an octagonal gothic with weight and width variations.
  
• Selawik: using specially-written OpenType features to report the font’s internal state (useful for debugging and testing assumptions).
  
• Amstelvar: a seriffed design by David Berlow with loads of variation axes.
  
• Decovar: similar to Amstelvar in concept (showing off), with an emphasis on decorative components.
  
• Grade (available to try in Axis-Praxis, see below) was made by Adam Twardoch from one of Paulo Impallari’s designs. The serif face is careful to maintain character widths across its weight axis, thus producing different text grades. (Grades allow you to set text in slightly heavier or slightly lighter weights without causing the text to reflow. This is often used to get consistent output, compensating for varying press conditions in different parts of the world.) Tomá Brousil’s Tabac is a good example.

  @JasonTselentis variable drips! pic.twitter.com/QZhimzD0Ym

  — OH no Type Co (@OHnoTypeCo) February 8, 2017

Studio releases

• Dunbar: CJ Dunn’s first solo retail release, and to my knowledge, the first ever variable font sold.
  
• Zeitung: Underware’s impressive new sans, available as a variable font, and also as Zeitung Flex, a set of static fonts controlled by an Adobe CC plugin.
  
• Fit: also from David Jonathan Ross, adjusts to fill the width of the text column.

  The huge range of width options from @djrrb’s new Fit typeface are provided in the new #variablefonts format. https://t.co/WatDVOuEiv pic.twitter.com/d5ieAsVqlR

  — Variable Fonts (@variablefonts) January 12, 2017

Stay up to date

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.