---

---

---

What exactly is a Variable Font?

A Variable Font (sometimes called a VF, and originally introduced as OpenType Font Variations) is a single file that contains the entirety of a font family and more. Variable fonts utilize what are known as “axes” to interpolate between individual fonts within a font family, allowing a designer or developer to create a custom font between UltraLight and Light within seconds.

Before the introduction of Variable Fonts, designers and developers were at the mercy of a type designer to choose the weight, slant, or roundness of a font. With Variable Fonts, these decisions are placed entirely in the hands of the designer or developer.

In our experience, explaining Variable Fonts (especially to those unfamiliar with typography basics) is best done by example, so we urge you to play with the demos below for an example of Variable vs Non-Variable fonts.

Alternatively, you can take a look at the videos below to see the differences in how a Variable Font and a Static font behave in Adobe InDesign.

Notice how the Variable Font menu is not present when using a static font, and how when the conditions of a named instance are met (e.g. Weight = 700, Roundness = 100) the weight menu shifts from "Custom" to "Rounded Bold."

---

What are the practical advantages of using Variable Fonts?

Reduced file size, for starters. The Variable Font above is 598kb, while the equivalent static fonts would be something like ~8344kb. So hypothetically, you could reduce your load speed by as much as 93% by switching to variable fonts.

Web developers and designers also have a greater level of freedom when using Variable Fonts.

Additionally, they're almost painfully easy to animate, opening the door for more engaging UX and, hopefully, a more visually interesting internet.

How is browser support?

Quite high.

What if I want to use the “Regular” weight of a VF?

You're more than welcome to! We call those “named instances,” and they're available from the drop down menu in most applications used to set type. Be sure to check the documentation of the program you plan to use before attempting to install a VF.

How do I implement custom metrics?

So glad you asked! It’s best to read through the documentation of the VF that you’re using, but the generally agreed upon standard for adjusting a font’s weight is “wght”, and its slant is “slnt”.

So a code snippet for adjusting a VF to a custom weight of 250 (midway between Light and Book) and a slant of 9.4 (~85% of a full Italic) could look something like:

Can I implement OpenType features in a VF?

You sure can! And wouldn’t you believe it? It’s easy as pie to do so, only a single CSS rule:

Multiple OpenType features?!

Of course! Just add a comma.

OpenType Feature? You've lost me.

Don’t feel bad, we worked in publishing for a spell and somehow didn’t learn about these either. OpenType features are alternates you can turn on or off in most word processing programs, as well as all of the programs that comprise the Adobe Suite. They (mostly) allow for stylistic alternates — such as a double storey a, formatting custom fractions such as 31/32 as 31/32, and often much, much more. A quick and easy way to see if a font has any of these features is to create a text box in Illustrator or InDesign, fill it with placeholder text, select the font you’re curious about, then see if it has a little “o” character at the bottom of the text box. Click that little “o” character, and you should see a menu allowing you to implement whatever OpenType Features the font in question has. If you don’t see that little “o”… the font has no OpenType Features. :(