First, what are they?
For many years, type designers have used interpolation to help them make fonts. Imagine creating a new font and only two weights are completely drawn. By using interpolation, a type designer can create a full range of weights between the lightest and heaviest designs without having to draw each intermediate weight by hand. From Thin and Black, for example, it’s possible create the weights in between like Light, Regular, Medium, and SemiBold. These are called instances in interpolation land.

A typeface family might start by drawing the two extremes — the lightest and heaviest weights. The type designer draws these “by hand”, in contrast to the other weights that are created through computer generation/interpolation.

Variable fonts bring the power of interpolation to the font user. Instead of only the type designer’s pre-set weights to choose from, the entire spectrum becomes available. If a user likes the bold but they want to shave off a little weight because the font looks a pinch too heavy in certain web browsers, they can.

We’re using weight in our example, but variable fonts can also interpolate between roman and italic or standard and condensed widths. These are called axes, and every variable font will contain different axes. Some will include only a weight axis, others could include axes for optical sizing, contrast, changing terminals or grades.

The benefits
You’re already starting to see why variable fonts are exciting. The two most obvious benefits are typographic flexibility and reduced file size. Font users are able to more finely control the display of the fonts, changing the weight or width (or other axes) to respond to particular design or environment challenges. Sometimes the change is purely for aesthetics or fun.

On the web, where file size matters, it’s possible to deliver the choice described above in less bandwidth. Take our font Indivisible Web as an example. The traditional family is made up of 14 files each about 34k, totaling 476k (all files are WOFF2). The variable font, that contains the entire weight range plus all interpolated possibilities in between, is just two files totaling 108k. It’s not hard to appreciate the math there.

As designers and type makers delve deeper into what’s possible, innovative variable fonts and implementation ideas emerge. To get you started, have a look at: Variable fonts and the future of web design, the Faux Foundry, and Considering the old, designing the new.

The detractions
Being new, variable fonts are still in beta mode, literally. The tools type designers use to make them are still being refined and the world of software is still figuring out how to support this new format. As one might expect with a developing technology, not all software programs and browsers support variable fonts.

But (but!), many of the latest browsers do support them. And to follow that silver lining with bad news — using the fonts in just about any desktop app is a no-go right now  with the exception of relatively recent versions of Photoshop CC or Illustrator CC. Find out more about what is supported where:

One final point about interpolation
Creating fonts that interpolate cleanly between hand-drawn instances or masters is an art and science. When interpolation is used to create a traditional (non-variable) font family, the results are often hand-tuned to bring back the snap and life that interpolation can suck out of the type. In other words, interpolation can result in a loss of quality when not done well. So, while interpolation is a time-saving tool for type designers, creating fonts that interpolate well is not as simple as the first diagram may have lead you to believe.

Although a type designer might be able to get away with hand-drawing only two weights, interpolation is often more complicated. This shows how Indivisible was created — hand-drawing four critical weights with only three created via interpolation (not to mention that there are also intermediate masters, but that’s a rabbit hole for another day).

There are many benefits to variable fonts but they are also grounded by real-world constraints. Just make sure that while your head is in the clouds, you keep one foot on the ground!

Additional resources