Atomic Smash homepage splash

CSS Font Variables

Words by Colin GoodmanJanuary 22, 2019

Variable fonts are a new set of features defined as part of the OpenType specification introduced in OpenType 1.8. In this post, I will aim to explain what variable fonts are and what benefits they will bring to your projects.

What are variable fonts?

A variable font enables one font to be able to behave as multiple fonts, meaning gone are the days where you need to download 8 versions of the same font but in different weights. This is achieved by defining variations within the font that are interpolated along one or more axes.

One benefit of using variable fonts is that by being able to only need 1 font, you are potentially reducing HTTP requests that are calling all the other variations of the font you are using if you’re using something like Google Fonts. If you have the font and all the other weights, you would not need to include all the font files within your project, as you can manipulate 1 version of the font if you were using a variable font. Another big plus that variable fonts bring to the table is that they allow you to be able to animate or transition font styles, which is not currently possible with static fonts.

How to use variable fonts?

First of all, it’s a good idea to check whether your chosen browser supports variable fonts, which brings us onto browser support. The support is really good, with all the major browsers supporting variable fonts, so using variable fonts is something that you really could consider at this time.

To actually use variable fonts you define their variations by setting various axes, 5 of the standard axes are listed below:

  • ital: Controls the italics. The value can be set using the font-style CSS property.
  • opsz: Controls the font’s optical size. The value can be set using the font-optical-sizing CSS property.
  • slnt: Controls the slant of the font. The value can be set using the font-style CSS property.
  • wght: Controls the font’s weight. The value can be set using the font-weight CSS property.
  • wdth: Controls the font’s width. The value can be set using the font-stretch CSS property.

By using the above axes within the “font-variation-settings” property you can start manipulating your font by changing the values of these axes, opening up the possibility of various styles for your font within your project through the use of CSS alone. An example of using the “font-variation-settings” is below:

h1 {
  font-variation-settings: "wdth" 115, "ital" 3, "slnt" 14, "opsz" 36;
}

You may have noticed in the above list that you can actually use existing CSS properties like font-weight, font-stretch, etc. It’s recommended to use native CSS properties for the axes that have one. Variable fonts also allow you to specify custom axes, which need to have a 4-letter uppercase name instead of the 4-letter lowercase name of the standard axes like “wdth”.

Conclusion

After investigating and playing around with variable fonts I believe they can offer you so many benefits within your project(s) and are another exciting addition to CSS. The requirement of having to call X amount of a single font but in different weights is potentially a thing of the past, which is something to embrace, and being able to add transitions onto fonts is awesome too. I personally will be keeping a close eye on this new property and it will be interesting to see what kind of animations/ transitions trends will start when this is more widely used.

Profile picture of Colin Goodman

Colin Goodman

Colin works very closely with David and Ben on the front end development aspects within projects. He has an exceptional eye for detail and is constantly looking at new ways to code websites with the latest technologies available.

Go back to top

Keep up to date with Atomic news