Friday, January 22, 2021

Variable Fonts on the Web, Explained

Wondering what variable fonts are? Variable fonts are, in a nutshell, font files which have settings you can change to subtly or dramatically modify the font’s appearance. They’re set to make a big difference to type on the web—let’s take a closer look!

What Are Variable Fonts on the Web?

You can use variable fonts in design software, such as Illustrator and Photoshop. And you can also use variable fonts for website building. Let's answer the question, "What are variable fonts on the web?"

Check out this video for a full explanation, and make sure to check and subscribe to our Envato Tuts+ YouTube channel!

Variable Fonts for Web Designers

Through variable font settings (which are called axes), you can take a single font file and create the kind of variations you could previously only get through using multiple font files.

For example, with a regular font family, if you wanted a light, normal, and bold weight version, you would have to load three different font files.

However, with a variable font which has a weight axis, you can adjust the weight via CSS to get the light, normal, and bold looks from a single file:

.light {
    font-variation-settings: "wght" 66;
    }
    
.regular {
    font-variation-settings: "wght" 84;
    }
    
.bold {
    font-variation-settings: "wght" 154;
    }

With this approach, you get the same typographic appearance, but with vastly improved load times. Whereas you would previously have had to minimize the number of variants you load into a web page, with variable fonts that's no longer an issue—you have vast numbers of variants at your fingertips:

httpswwwaxis-praxisorgspecimensprotipo
Protipo Variable on Axis-Praxis

Variable Font Sizes and Style Variability

As far as style variability goes, it doesn’t stop there. You aren’t restricted to the kinds of variations you’d be used to, like normal weight or italic. 

Firstly, any axis can have its value set anywhere along a sliding range, not just at set values. So if you're looking for a weight somewhere between normal and bold, that’s perfectly possible. Or if you want your italics to lean just a little bit less, or you want the character widths to be slightly more than standard, the power is in your hands. Fine tune your settings to exactly what you need.

Secondly, fonts can use any axes the designer cares to think of! Take a look at the settings available for Bitcount:

Bitcount settings
Bitcount settings on Axis-Praxis

Depending on the font, you’ll find axes which give you control over drop-shadows, stencil gaps, or character terminals—the options are limitless.

Winds of Change

Variable fonts look to make a big impact on how we work as web designers. They will allow us to achieve much greater diversity and control, whilst simultaneously reducing our load speeds. They will also allow us to branch out in our typographic creativity in ways which were technically impossible before.

To get you started with variable fonts, we’ve put together a course that guides you through all the most important facets of how they work, gets you set up with the tools that you’re going to need, walks you through coding the CSS that controls variable fonts, and shows you how to create fallbacks for browsers that don’t yet have support.

Discover More About Web Typography

I hope you've enjoyed this tutorial and that you now know the answer to the question, "What are variable fonts for web design?" We talked about variable font sizes, axes, and attributes. 

The world of web typography is fascinating. If you want to know more about it, we've got this complete learning guide: A-Z of Web Typography. And here's some more awesome content you can check today:

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)