A variable font is a single file that acts like multiple fonts. Variable fonts can improve page-load times, but their appeal goes way beyond that: Site visitors get an improved reading experience, and designers get greater creative freedom. While it's still early days, some software applications—including the latest Illustrator and Photoshop—and many web browsers do support the technology, and more will follow. It's a good time to understand how variable fonts work and how to use them in your web designs.

A CLOSER LOOK

Let’s look at the Acumin font family as an example. Because the traditional version consists of nine different weights (see below), you need access to nine different font files if your design uses all those weights. On the web, this means loading and referencing each of the nine files separately, adding to the overall size and load time of your site. You might think the resulting design is worth the wait, but will your audience?