The following is an unedited extract from my [forthcoming book](http://book.webtypography.net/).

In October 2016, version 1.8 of OpenType was [released](https://medium.com/@tiro/12ba6cd2369), 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.

Gingham variable font with continuous variation along width and weight axes

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](https://drafts.csswg.org/css-fonts-4/) adds new values for the properties to work with font variations:

• `font-weight` takes any integer from 1–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.

Continuous variation along an optical sizing axis in Amstelvar

Font 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 glyphs, such as the length of the tail on a Q. Using a syntax similar to `font-feature-settings`, custom axes as well as the predefined 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;

}

Visit Laurence Penney’s [Axis-Praxis.org](http://Axis-Praxis.org) to play with variations and design instances of some variable fonts (requires [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/)).

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;
}

At the time of writing there is support for `font-variation-settings` in Webkit Nightlies and [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/), but neither support `font-weight` or other such properties with variable fonts. Additionally the web font `format` needs to be `woff` or `ttf`.

Variable fonts were jointly developed by Adobe, Apple, Google and Microsoft. This means support in new versions of browsers should arrive across the board as soon as the precise implementations and CSS specifications are agreed. Current [estimates](http://responsivewebdesign.com/podcast/variable-fonts) have variable fonts being a viable option on the web by early 2018.

Read or add comments