When Should I Use Variable Fonts?

What Are Variable Fonts?

Variable fonts are fonts with super powers! Watch this…

The above demo animates text from thin to thick.

This is possible because variable fonts don’t just come in “normal”, and “bold”. Their thickness is determined by a number ranging from 100 to 900 (depending on the font).

100 is generally super thin while 900 is ultra heavy.

Try this interactive example below…

Try playing around with this demo above. Notice how the font-weight number changes as you adjust the slider? The font-weight can be 100, 245, 537, or 850. This level of control means you can choose the exact font-weight you want.

Variable Fonts Load Faster (usually)

Even if you don’t care about getting highly controlled font-weights, using variable fonts can help your web page load faster.

Let’s say you wanted to put the full Montserrat font family on your website. The traditional method would require you to load 18 separate font files (since Montserrat has 9 normal and 9 italic fonts). This would require the webpage to load a hefty 580KB just to get the fonts.

In a more conservative example, let’s say you wanted just the standard “normal”, “italic”, “bold”, & “bold-italic”. That would still require 130KB to load those basic fonts.

With the variable fonts, you only need 2 font files (“variable normal” and “variable italic”) allowing you to load the entire Montserrat font family in just 52KB. This gives you the flexibility of having the full font family while being 90% smaller.

Of course each font is different, but I tested the most popular variable fonts on Google Fonts and found that the variable font files are usually around 50% smaller than the standard “normal”, “bold”, and “italic” alternatives.

Real World Uses – Adjusting a Banner

Let’s talk about some real-world use cases for variable fonts. Normally, you won’t be animating font-thickness or letting users adjust it with a slider.

But here’s a real-world situation I come across all the time.

The following banner has stacked words that have had their size adjusted so they all line up neatly.

They have just one font-weight (bold). It works fine enough except that the word “COOL” looks notably thicker than the rest of the text due to its larger font size, and this bothers the typography nerd in me. 🙂

Graphic designers often like to use different font-weights to make them look optically consistent. So instead of making everything the exact same weight, I made the word “cool” a little lighter than the rest.

While I was at it, I took advantage of the flexibility of the variable fonts to make everything just a little bolder.

How Do I Use Variable Fonts in My Website?

At this point you might be thinking “Variable Fonts sound great, but how do I actually use them?”.

You can go get variable fonts from Google fonts, but there’s a catch…

Google Doesn’t Have A Simple Button

So far, Google Fonts has not created a user interface to use variable fonts on your website. Sure, you can go and choose the fonts you want, but the code Google gives you will load the standard font files.

Read My Google Variable Fonts Tutorial

I’ve written a separate article “Getting Variable Fonts from Google Fonts” that walks you through the process, step by step. I’ve even included a “Variable Fonts Cheat Sheet” that gives you the exact code you need. Just copy and paste the files and you’ll be all set.

Using Variable Fonts in Your CSS

Once you have the variable font files you can use them in your CSS.

Here’s a simple example…

<h2>This is My Website Title</h2>
<p>I'm glad you came by.  Our company has been around for 30 years!</p>

<style>
h2 { font-weight: 850; }
p { font-weight:300; }
</style>

In the above code, we have a headline <h1> and a paragraph <p>.

We set the h1 font-weight: 850; which makes it extra-bold, and we set the paragraphs to font-weight: 300; which makes them rather thin.

Here’s what it looks like:

Advanced Variable Fonts

While font-weight is the most common “variable” in variable fonts, they can actually do a whole lot more.

Some fonts have extra abilities. A good example is “Recursive“:

Play around with the sliders above to see what each one does. You can even type your own text into the textbox.

“Weight” controls the letter-stroke thickness.

“Slant” adjusts how oblong the font is. (like an italic). When you drag it all the way down, some of the characters change their design to look more like an italic font.

“Mono” makes all the letters closer to the same width (mono-width).

“Casual” gives the font a more hand-written quality.

How To Control Advanced Variable Font Options

Simple weight-based variable fonts can be controlled with font-weight in CSS, but multi-dimensional fonts like this use a different property called font-variation-settings.

This property implements all the variations inside a single property. Because of this, it can be a little tricky to style, so recommend using CSS variables.

Here’s the code you need to use Recursive…

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"> 

Learn more about using the Recursive font from this CSS Tricks article.