Variable Fonts Introduction, How-To and our very own Variable Font

Sep 24, 2018
Article by Mat Desjardins

What are variable fonts and why do they exist? For those who don't know what a variable font is, it's a font that encapsulates the entire font family, not just one style or instance.

For those who don't know what a variable font is, it's a font that encapsulates the entire font family, not just one style or instance. So instead of having specific weights to a font (i.e.: light 300, regular 400, bold 600) the font has those weights plus any weights included in that range.

So any number between 300 and 600 can be used. This brings a new dimension when it comes to tweaking the details of a design.

With the recent emergence of the variable font format, designers can work with an entire font family. With three out of the four major browsers already supporting variable fonts and the remainder soon to follow as well as most of the design softwares, the future is certainly bright for this new font technology.

Why use a variable font instead of a regular font with multiple weights?

Only one file and file size reduced

A variable font is a single font that acts as many: all the variations of width and weight, slant, and other attributes can be contained in a single, highly efficient compressed font file. With fewer HTTP requests for font files variable fonts offer an overall savings of data to download.

Flexible design range

The typical scenario would be to constrain any given design to 2-3 different fonts to represent every aspect of a site’s design language and voice—including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to tweak the weights/styles for every level of text. Some variable fonts also have an optical size variable that affects certain contrasts which usually marks the difference between a display and a text font.

So, how do we implement and use variable fonts?

To use the font on your design software like Photoshop & Illustrator, you just need to install the font like you would any other ones on your computer. The Adobe softwares now have a new option when you select a variable font in the font dropdown menu. One or many sliders will appear depending on the number of axis your variable font has. You can play with those and see how it changes the font you have selected. In the process of writing this article, we also just added the variable version of one of our fonts, Agrandir. The complete variable font is free to try for personal use for a limited time only!

How to use a variable font on a website?

If you are more of a hands-on type of person who likes to code his own stuff, here's a quick how-to on what code you need to use for your CSS in order to access the variables of these types of fonts. I won't go too deep into that part, if you want an in-depth outlook on how to implement this and all the CSS possibilities head over to this page.

Basically, you only need one line of code to apply the desired value to any axis or custom variables given that you have correctly embedded and loaded the variable font.

font-variation-settings: "wght" 430, "wdth" 200;

In this specific case, we are showcasing the possibility of Agrandir, which has 2 axis (weight and width). This way we would set the weight to 430 which would make it a bit bolder than regular (400) and 200 (The range is from 50 to 200) of width which is equivalent to the widest style of Agrandir - oversized.

The Agrandir Font

We recently launched Agrandir, a super versatile sans with 42 styles — from thin to black and from narrow to oversized. At that point, it was obvious for the font designer, Alex to create a variable version of it. He worked tirelessly to create it and we're happy to officially launch it today along side this journal article. It will be available for free for personal use for a limited time only. Otherwise it will be available as a free bonus with the purchase of the complete family. Keep in mind that it is still in beta.

If you're too eager to try it, I have created a small variable font sample below for you to play with.

Conclusion — The future of Variable Fonts?

Variable fonts have a great future ahead of them. I think that the technology will go through some teen phase where everyone will try funky more artsy custom variables for animation and experimental purposes and it will eventually mature into something that's complete and efficient.

The idea behind the technology is great I just hope people won't go all out and create "Swiss knife" type fonts that can potentially do everything "ok" but nothing great and almost become something where everything is a variable and you can create any kind of typefaces with one. Fonts might end up not having clear personalities leaving the task of creating a typography that works to the designer rather then the typographer.