It's time to start using Variable Fonts

#design #css #webdev

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.

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
🔗 Font Playground
🔗 Axis Praxis

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 for example; With a total of 18 styles on Google Fonts, 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.

You can even animate custom axes!

This can also be used to animate icons in a font family such as Zycon:

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?