Get started with variable fonts

Variable fonts are a new font format offering unprecedented flexibility. And they are with us now.

Richard Rutter
4 min readFeb 21, 2017

--

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.

Gingham variable font with continuous variation along width and weight axes

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

Variable fonts are currently supported by Safari, Chrome, Edge and Firefox (the latter only on a Mac and if you turn on some flags). Visit Laurence Penney’s Axis Praxis to play with variations and design instances of some variable fonts.

As with regular OpenType fonts, variable fonts can be used as web fonts as-is, or preferably wrapped up as a WOFF2. If you want to use to a variable font as a web font, in your @font-face rule you should set the format to woff2-variations or truetype-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('woff2-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('woff2-variations'); src: url('nicefont_black.woff2') format('woff2'); font-weight: 800; font-style: normal; }

At the time of writing it is only Safari that understands format('woff2-variations') and font-weight with variable fonts. You can read how to get around those bugs in the other variable font capable browsers in my article How to use variable fonts in the real world.

Variable fonts were jointly developed by Adobe, Apple, Google and Microsoft. This means support in new versions of browsers (and operating systems and design software) is already arriving and will continue to do so at pace.

This is an extract from my book Web Typography, now available in paperback and ebook.

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.

--

--

Richard Rutter

Cofounder of @clearleft, author of @WebTypography, designer of digital things. Please patronise responsibly.