Easy & Clear: Variable Fonts Guide

A basic introduction to Variable Fonts.

The Variable Fonts has been with us for a while and I still find people that haven’t heard about them. In this article, I will explain what are these kind of fonts and why everybody should be using them right now.

What are the Variable Fonts?

The main advantage of this kind of fonts is that with one file you can get different looks. Imagine using wider and bold letters for your logo and then making them narrower for your title by setting some parameters in your style sheet. But that’s not everything, one of the best features, and since we are establishing the parameters in CSS, is that we can use animations and do astonishing effects.

What can I do with them?

The main advantage of this kind of fonts is that with one file you can get different looks. Imagine using wider and bold letters for your logo and then making them narrower for your title by setting some parameters in your style sheet. But that’s not everything, one of the best features, and since we are establishing the parameters in CSS, is that we can use animations and do astonishing effects.

Where can I find them?

There are several repositories on the internet where you can find Variable Fonts. Of course, a repository like Google Fonts also has its own Variable Fonts and they are free to use. The typographies you will find here are discrete and formal and most of them only let you set the weight parameter. But if you want something more glamorous you can find what you need in Fonts Arena.

Here you will find all kinds of free Variable Fonts, some of them with lots of parameters to set. But If you want to see their potential go right now to Axis-Praxis, a live web playground where you can enjoy playing with their fonts and discover all the things you can do. There are more repositories, of course, look for them, they are waiting for you.

How can I use them?

1. Fist of all, you need to link the file in your HTML page or in your CSS style sheet.

2. Now you are ready to use your font and you just have to set the parameters in CSS. As you can see we are using the font-variation-settings and we have set the width (wdth) and the weight (wgth) values.

The Variable Fonts are the future of typography and a powerful tool that will improve your websites. And, as you see, there are no reasons to don’t start using them in your designs and enhance your websites to the next level.