

Since that single file includes the entire design space instead of a few very specific weights or other variants, the design vocabulary is much greater. Variable fonts are better for web and mobile apps Axis & Abbreviationĭownloading a single file instead of multiple individual fonts can yield a significant performance gain in reduced file size and fewer file requests. Custom axes can be referenced using the new CSS attribute font-variation-settings. The registered axes map to standard CSS attributes. In the CSS, the abbreviations of the registered or conventional axes are written in lowercase, and the abbreviations of custom axes are written in uppercase. The format itself is purposely left open to allow this sort of innovation.

There are fonts with custom axes for grade, expressiveness, the ascender and descender height of lowercase letters, and countless more. While there are currently 5 registered axes, type designers can define their own custom axes, creating any kind of variations they can dream up. Not every variable font will have every possible axis (weight will likely be the most popular), but the format, browser implementation, and operating systems guarantee they’ll all work as intended.Īxes are divided into 2 types, registered and custom. With variable fonts, weight is conveyed through minimum and maximum numeric values, and designers or developers can choose any value in between. With standard fonts, the terms “normal” and “bold” refer to specific files that are called to serve those styles.

The weight axis, for example, defines how light or bold a font looks. A variation axis is the expression of a single aspect of a typeface’s design.
