What are variable fonts and how to customize them with font-variation-settings

DanielDecember 1, 2022December 5, 2022

Let's take a look at what variable fonts are, what benefits they offer, and how we can use them in our work.

What are variable fonts

Variable fonts are not built on the explicit difference between fixed weights and styles.

Let's take, for example, the well-known Roboto font. Given that it is not a variable font, it comes with just a few font variants: 100, 300, 400, 500, 700, 900.

But what if our text looks perfect on a 200 font weight? And the font family does not have this font weight?

Actually, when importing custom fonts in NextJs 13 it's even mandatory to specify the needed font weight so that the system will know what files to import.

Or the classical distinction between normal or bold and italic. What if we would like something between normal and bold?

Instead of these fixed formats, the variable fonts have different parameters (or axes) that we can customize. For example, one of these parameters is the wght - the weight of the font.

We can change this property with the font-weight property:

font-weight: 123;

And also with the font-variation-settings shorthand CSS property:

.text-with-custom-font {
   font-variation-settings: "wght" 123;
}

Only if the font is variable, we can put in the wght the exact value that we need, not just the ones provided by the font designer. Checkout the below code pen:

See the Pen
tom-cat by JS Craft (@js-craft)
on CodePen.

Properties of variable fonts

These are some of the properties (or axes) we can use to customize the variable fonts:

• weight (axis tag: wght, CSS property: font-weight),
• width (axis tag: wdth, CSS property: font-stretch),
• optical size (axis tag: opsz, CSS property: font-optical-sizing),
• slant (axis tag: slnt, CSS property: font-style: italic),
• italic (axis tag: ital, CSS property: font-style: oblique <angle>).

The font-variation-settings CSS property comes as a shorthand for all of them.

What are the advantages of variable fonts

When it comes to the variable fonts a big gain is given by the fact that all the font "stuff" can be placed in just one single file. Having just one single file means we make just one request for that font, so better performance.

The second advantage is flexibility. We can use the control axes to tailor the font to our exact needs. We are not restricted to just a few fixed formats.

Based on this we can do some really cool stuff if we combine CSS animations with variable fonts. For example, check out these codepens:

• https://codepen.io/petebarr/pen/MWKgmYW
• https://codepen.io/gayane-gasparyan/details/dyPEgVo
• https://codepen.io/electricgarden/pen/BaabNem

Either of them was not possible before variable fonts were not introduced.

Here we have a list of all the variable fonts available in Google Fonts.