Variable fonts are a new font format that will fundamentally change future typography. They are already available to use, but are still not widely known.

A new version of the OpenType format was presented at the ATypI conference in September 2016, under the name OpenType Font Variables, or OT1.8, ushering in a new era in digital fonts. To be brief, with this technology a single font file can behave like an infinite multitude of styles. In other words, there is one file, but it contains information on the entire font family, no matter how complex it might be; the main thing is that everything is interpolated. In so doing, you can have as many axes of interpolation as you wish — weight, width, contrast, change in the height of ascenders and descenders, animation: in short, the design of the entire font may be infinitely varied.

Axis-Praxis is a web tool for playing with Variable Fonts by Laurence Penney

Remember how all devices used to have the ability to change font size? And then in the Jonathan Ive era of light, flat design the option of changing weight appeared. The technology is now becoming available in which users can adjust the typography on their devices in an endless series of variations. Having enormous variability in a single font file means not only convenience, but also savings in file size and time. Let’s say your site uses three styles of a font — now you only need a single file. This also leads to savings on the level of calls to the server — a single call where there used to be three.

Zeitung by Underware

Type designers who have long been familiar with interpolation understand that two axes of interpolation means 1000 times 1000 variations, i.e. a million variations, for example in weight and width. Adding another axis takes this million to a billion, and so on. And all of this in one file. Type designers used to have to create files for dozens of styles; now there will be only one. In this infinite space of interpolative possibilities, the type designer can indicate which styles are to be considered which named instances. The specifications for OpenType Variable Fonts assign the five most common axes four-character tags (the following examples are taken from an article by Richard Rutter “Get started with variable fonts”): weight — wght, width — wdth, italics — ital, slant — slnt and optical sizing — opsz. These font variations can be enabled by the font-weight-, font-stretch- and font-style properties. CSS4 adds new values for the properties to work with font variations:

— font-weight takes any integer from 1 to 999 (not limited to multiples of 100 as in CSS3).

— font-stretch takes a percentage number in a range where 100% is normal, 50% is ultra-condensed, and 200% is ultra-expanded.

— font-style takes an oblique angle value from oblique –90deg to oblique 90deg.

— font-optical-sizing is a new property taking a value of auto, or none,which turns on optical sizing if it’s available as an axis in the variable font.

Type designers can also define custom axes with their own four-character tags. This enables designers to vary almost any imaginable aspect of a typeface, such as contrast, x-height, serif-shape, grunginess, and even parts of an individual glyph, such as the length of the tail on a Q. Using a syntax similar to font-feature-settings, customized axes as well as the pre-defined ones are available through the low-level font-variation-settings property. For example, this would render text with a variation that is very wide, light weight and optically sized for 48pt:

h2 { font-variation-settings: “wdth” 600, “wght” 200, “opsz” 48; }

As with regular OpenType fonts, variable fonts can be used as web fonts as-is, or preferably wrapped up as a WOFF. If you want to use to a variable font as a web font, in your @font-face rule you should set the format to woff-variations or ttf-variations. If you wish to provide regular font fallbacks for browsers which don’t support variable fonts, you can use multiple font-face rules where necessary, repeating the variable font each time:

**@font-face { font-family: ‘Nicefont’; src: url(‘nicefont_var.woff2’) format(‘woff-variations’); src: url(‘nicefont_regular.woff2’) format(‘woff2’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘Nicefont’; src: url(‘nicefont_var.woff2’) format(‘woff-variations’); src: url(‘nicefont_black.woff2’) format(‘woff2’); font-weight: 800; font-style: normal; } **

This new technology is theoretically capable of turning the world of design on its head, but there are a number of circumstances on which this future will depend. The main problem is support for the new format by operating systems, browsers, and other software. There may be grounds for optimism in the fact that OT1.8 was the result of collaboration between Apple, Microsoft, Adobe and Google, which have promised to implement technical support for the format in their products by early 2018. On the other hand, it’s not clear to what extent this technology will interest graphic and web designers. After all, dealing with variable fonts will require a bit more knowledge in the area of type design, and it is possible that the thousands of variations will not be appreciated by every designer — the followers of Massimo Vignelli and his principled self-restraint in using the font palette (link required) are fairly numerous.

Beautiful visualisation of Massimo Vignelli’s principles by Karan Patel.

The font industry has much to think about as well: from the toolbox to pricing policy. Up until now, there have been two types of font products on the market: individual styles ($50–150 each on average) and full font families ($500–750 per family on average). But at what price should a variable font now be sold? At the price of a family, or the price of an individual style? Much remains unclear, but it can be said with certainty that one way or another, the font revolution has begun, whether we are ready for it or not.

As an experiment, few months ago offered the possibility to choose the weight of the BigCity Grotesque Pro to our customers

For those who would like to know more:

— here is article by John Hudson (type designer, Tiro Typeworks) OpenType 1.8.1 Announcement,

— here is the full OpenType 1.8.1 Specification,

— and here is the full story by Tom Rickner (who supervised the development of the TrueType format at Apple) of how technology made its way from TrueType GX to Variable Fonts. Part 1: from TrueType GX to Variable Fonts by Tom Rickner Part 2: from TrueType GX to Variable Fonts by Tom Rickner — Here is a recent story by Monotype technical director Bob Taylor.

— And here famous web designer Nick Sherman collects all mentions and news of the format on Twitter.

— A step-by-step guide for type designers to generate variablefonts.