Variable Fonts on the Web
This year, at the ATypI typography conference in Warsaw, representatives from Adobe, Microsoft, Apple, and Google presented an exciting development in typography: support for variable fonts in OpenType fonts. Font variations are best shown with an example:
Here, you can see the weight of San Francisco being animated on iOS. As you can see, the weights are continuously interpolated, allowing for weights between the previously-available weights of this font. (You can try it here using Safari Technology Preview only on macOS Sierra.)
However, variations can do more than simply change the weight of a font. A font can expose any number of axes, each one controlling a different aspect of the font. The user (or browser) can select a floating-point value to apply to each axis, and each value will contribute to the font’s final look.
In addition to finer-grained control over the font’s look, a font variation can improve loading performance for a website if multiple faces of the same family are used. Currently, a website may load two weights of a font independently, which can lead to a significant amount of duplicated data. Instead, a website may choose to use a font variation and simply apply different variation values to the same font, thereby eliminating the duplicated data and only downloading a single font.
Even with just two axes (weight and width), a single font can be used in a variety of typographical situations. Using the same font file repeatedly with different variations can dramatically decrease the loading time of a website. (This example can be seen here using Safari Technology Preview only on macOS Sierra.)
CSS
The W3C is currently drafting a way to describe variation axis values in CSS. The current draft divides axes into three groups: font selection, common, and other.
There are four CSS properties which affect which fonts are selected to be used in the document: font-weight, font-stretch, font-style, and font-size. With font variation support, each of these four properties will accept a numerical value which will both affect font selection as well as be applied to the font after it is selected. Therefore, a web site declaring font-weight: bold may cause a variable font to be selected, and then bold applied to that variable font. Naturally, CSS animations are supported in all these properties, because the values can be smoothly interpolated. These properties are expected to match the most common variation axes, so most CSS authors won’t need to learn any new properties.
font-weight: 791; /* Intermediate value between 700 and 800. */
Other than the above properties, any well-known or common variation axes will get their own CSS properties. Currently, there is only one axis in this group: optical-sizing. As new variation axes become popular, new properties will be added to control those axes.
Lastly, font creators may wish to include axes which are uncommon or not well known. In this situation, a web author should be able to set these axes without requiring the browser to implement new CSS properties. Therefore, the lowest-level font-variation-settings CSS property allows web authors to specify axis names as CSS values as well as their associated variation values. Similarly to the other properties, font-variation-settings also supports CSS animations. Because this property is only intended to be used as an escape hatch in case no higher-level property exists, it should only be used rarely, if ever.
font-variation-settings: "XHGT" 0.7;
Implementation
While the above announcement is regarding variation support in OpenType fonts, TrueType has had variation support for many years. In fact, all of the operating systems Apple ships currently include system APIs for TrueType font variations. Because of this, I have started implementing font variation support in WebKit in relation to the existing TrueType font support in the platform. Currently, I’ve only implemented the lowest-level font-variation-settings property, but I’m very excited to implement the complete support as soon as I’m able. Please try the existing support out in a Safari Technology Preview only on macOS Sierra and let me know how it works for you!
If you have any questions or comments, please contact me at @Litherum, or Jonathan Davis, Apple’s Web Technologies Evangelist, at @jonathandavis or web-evangelist@apple.com.