It's time to start using Variable Fonts
Tags: design, css, webdev
Published: 2019-12-04 19:59:53

---
cover_image: https://i0.wp.com/wptavern.com/wp-content/uploads/2017/10/variable-fonts.gif?ssl=1
---

I have a feeling that next year will be a big year for typography. Now that variable fonts are supported in all major browsers and a collection of supported fonts constantly growing, 2020 should see their popularity increase exponentially.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/y99zizi793mdkkke1dbj.png)

## What are Variable Fonts?

Variable fonts are a collection of styles and settings bundled together into one font file that allow for greater flexibility and font variations. A typical font has control over `font-weight` in steps of 100 units, and a `font-style` of mostly `normal` and `italic`, with no room in between. Variable fonts have way more customization, with access to 5 registered axes, and the ability to create a multitude of custom axes:

- `font-weight`: Just any other font, this adjusts how thick or thin the font is, but it can have **any value** between `1` and `1000`.
- `font-stretch`: This defines how narrow or wide the font is, such as differentiating between a standard and condensed style. This can have any value greater than `0%`, with normal being `100%`. 
- `font-style`: Similar to other fonts, this is a simple binary switch between `normal` and `italic`. This is because instead of adjusting the  characters, it may actually substitute them with other specifically designed characters. If a font supports it, `oblique` can be defined instead of `italic`, allowing you to add a custom slant to your font anywhere from `-90deg` to `90deg`.

> `font-synthesis: none;` can also be used in conjunction with `font-style: italic` to prevent the browser from accidentally using the `oblique` synthesized italic style and variations, and may also fix font thickness issues.

- `font-optical-sizing`: This is a fairly new setting that varies the overall stroke thickness of letterforms based on physical size. The larger the font, the thinner the text, and vice-versa. This was originally used in print to help with legibility of smaller fonts but translates well to digital. This can be set to either `none` or `auto` to correspond to the font size, or you can provide it a numeric value to represent the font size you want to replicate.

> A custom value for `font-optical-sizing` can only be defined using the `font-variation-settings` shorthand described below, the standalone property only supports `auto` and `none`.

Each of these settings can be defined as follows:

```
font-weight: <number(1..1000)>
font-stretch: <percentage(> 0%)>
font-style: normal | italic | oblique <angle(-90deg..90deg)>
font-optical-sizing: none | auto
```

There is also a shorthand property called `font-variation-settings`

```
font-variation-settings: 'wght' 375, 'wdth' 115, 'ital' 1 | 'slnt' 14, 'opsz' 36
```

> The shorthand uses tags to signify properties; `wght` for `font-weight`, `wdth` for `font-stretch`, `ital` or `slant` for `font-style`, and `opsz` for `font-optical-sizing`.

> Unlike `font-stretch`, the `wdth` tag takes a number as a value instead of a percentage.

It does stop there either, **variable fonts give designers the flexibility to create their own axes**, so when you use a variable font you may notice an axis used that is not mentioned above, and you'll have to refer to their documentation.

#### Want to play around with variable fonts? Check out these links:

🔗 [Variable Fonts](https://v-fonts.com/) 
🔗 [Font Playground](https://play.typedetail.com/)
🔗 [Axis Praxis](https://www.axis-praxis.org/)

## Why should you use variable fonts?

The first reason variable fonts are better for the web is for **page speed**. Since it only requires one file as opposed to multiple files for a typical font, that means **less http requests** and **smaller stylesheets**. Let's take [Montserrat](https://github.com/cosmicmocha/Montserrat) for example; With a total of 18 styles on [Google Fonts](https://fonts.google.com/specimen/Montserrat), that's *18 files and over 4.5mb*! The variable font has all that and more in just *386kb*! Plus, it can all be defined in one `@font-face`, in four lines of CSS as opposed to a separate `@font-face` for each style:

```
@font-face {
 font-family: 'MyVariableFontName';
 src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
}
```

Another reason is for flexibility which we discussed earlier. This flexibility also allows you to apply CSS animations on properties like `font-weight` which were not possible before.

{% codepen https://codepen.io/michellebarker/pen/rExyEE %}

You can even animate custom axes!

{% codepen https://codepen.io/MSEdgeDev/pen/mxemaW %}

This can also be used to animate icons in a font family such as [Zycon](https://www.axis-praxis.org/specimens/zycon):

![](https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts/images/axis-praxis.gif)

Unless you need to support IE11, there's no need to wait to implement these features, go out there and make some cool stuff! Have you used variable fonts on any projects recently?

#### Learn more about variable fonts

🔗 [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)