Variable Fonts

What’s variable font?

Variable fonts - officially known as OpenType Font Variations - are a font format that allows for a single font file to contain multiple variations of a typeface, such as different weights, widths, and styles, that can be dynamically adjusted in real-time using font variations.

Weights, widths and other properties are also called “axes” of variations.

Axes of Variations

In typography and font design, “axes of variation” refer to the different characteristics or parameters of a font that can be modified or adjusted to create different font styles or variations. These variations can include parameters such as font weight, width, slant, optical size, and more.

Each axis of variation defines a range of possible values, and any combination of values within that range can be used to create a unique font style or variation.

For example, the weight axis of a variable font might range from “Thin” to “Bold,” and any value within that range can be selected to create a font style with a corresponding weight.

By adjusting these parameters within a defined range, designers can create custom font styles that fit their specific design needs.

These variations are also dependent on how the fonts were designed and built. Designers and developers should refer to the font’s documentation or its creator to understand which variations are available and how they can be used.

Why should we use variable fonts?

Size and efficiency: Font variations are contained within a single font file, leading to smaller file sizes and faster load times.
Flexibility, customization, precision and control: By allowing manipulating of various variation axes to match our needs
Creativity: Variable fonts provide designers with new opportunities to experiment and create unique font designs, resulting in visually distinct and more memorable typography

Examples on variable fonts

The best way to understand variable fonts is to start playing with them. Below are some examples from an article from Google Fonts to get you started.

Go to etceteratype.co/epilogue and play with the weight axis of Epilogue to see how it affects the overall spacing of the

Now go to etceteratype.co/grandstander and compare that with Grandstander, which was designed to take up the same amount of horizontal space regardless of changes made to the weight axis. This shows how what happens within an axis of variation is determined by the typeface designer.

Go to etceteratype.co/anybody and play with the weight and width axes on Anybody, to see how they can be combined, and how they affect each other in a subtle way:

You can also visit these websites:

How do we use variable fonts (as a developer)?

Load the fonts

Variable fonts are loaded though the same @font-face mechanism as traditional static web fonts, with a new enhancement:

@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations'), url('RobotoFlex-VF.woff2') format('woff2-variations');
}

We don’t want the browser to download the font if it doesn’t support variable fonts, so we add format and tech descriptions: once in the future syntax (format('woff2') tech('variations')), once in the deprecated but supported among browsers syntax (format('woff2-variations')). They both point to the same font file.

Using variation axes

To set value for the variations, we use font-variation-settings, specifying an array of {{axis tag}} {{value}} pairs:


@font-face {
  ...
  font-variation-settings: 'wght' 500, 'GRADE' 0.5;
}

You will notice that in the example above, 1 tag is lowercase, and the other is uppercase. It is to differentiate between registered axes & custom axes. Registered axes will always be lowercase, whereas custom axes will always be uppercase.

By default, there are 5 registered axes, which control known, predictable features of the font:

Weight - wght
Width - wdth
Optical size - opsz
Slant - slnt
Italics - ital

Beyond that, we depends on how the fonts were built & what custom axes they are using. Check out this site for another good example on all the axes a font can have.