Getting started with variable fonts

The following is an original draft from my book Web Typography.

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.

6 by 6 matrix styles
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 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.
6 styles
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 to play with variations and design instances of some variable fonts (requires 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, 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 have variable fonts being a viable option on the web by early 2018.

Ampersand

To get the full low-down on variable fonts – and a lot more besides – join me and experts from around the world at Ampersand to get the full picture of what web typography can be today. The day before the conference I’ll also be running a responsive web typography workshop.