In October 2016, version 1.8 of OpenType was released , and with it an extensive new technology: OpenType Font Variations. More commonly known as variable fonts , the technology enables a single font file to behave like multiple fonts. This is done by defining variations within the font, which are interpolated along one or more axes. Two of these axes might be width and weight, but the type designer can define many others too.

The preceding image shows a variable font rendered in 36 different styles, all from one file. If you were to pick four styles and serve them as normal fonts, a variable font file capable of providing the same styles would be significantly smaller than the four separate files, with the added speed advantage of requiring just one call to the server.

The illustration varies width and weight. Those two axes alone mean that, according to the OpenType Font Variations specification, theoretically 1000×1000 (one million) variations are possible within the one file with no extra data. A third axis could increase the possibilities to one billion.

At the time of writing the technology is in its infancy, but it potentially opens up tremendous opportunities for new kinds of responsive typography. The file size savings and fine precision means that many small adjustments could be made to the rendered font, potentially responding dynamically to the reader’s device and environment, as well to the text.

Within the design space created by the axes of variation in a font, the type designer can define specific positions as named instances . Each named instance could appear to users of design software as if it were a separate font, for example ‘regular’, ‘light condensed’ or ‘extra bold extended’.

In the OpenType specification, five common axes of variation have been pre-defined as four-character tags: weight wght , width wdth , italic ital , slant slnt and optical size 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: