Variable Font Tips by Charles Nix

By now you’ve probably seen Variable fonts in use. Those squishy, jumping, bouncing animated words have been all over our social-media feeds, drawing our attention to words and headlines, commanding attention. Though animation is the main way most of us have encountered Variable fonts over the last couple of years, it’s just the tip of the iceberg of what’s possible with this dynamic new font functionality. But what is a Variable font?

At its heart, a Variable font is every possible style of a typeface rolled into one font file. Instead of a dozen or five dozen individual font files, we get one font file with all of those files baked into it. But even that is a little bit misleading (in a good way): a Variable font file contains all of the styles we normally associate with fonts—like variations in weight, for instance—but it also contains the entire spectrum of space in between. So, it’s one font file with all of the usual type styles and every possible shade you could ever want.

And since the Variable font is a spectrum of possibilities, clever designers that we are, we quickly realized that a spectrum can be blended and animated. Hence the bouncing, flexing fonts all over the place. And it’s not just the weight that can flex. Some variable fonts have a spectrum of widths too. And there’s more, it’s possible for type designers to add any number of custom axes (spectrums of variation) to a font. This has led to even more experimentation and expression: axes of shadow, of shine, of emotion, axes for the weather and time of day, and on and on and on.

It’s an exciting new feature for fonts and an exciting new future for typography. Keep reading for a deeper dive into Variable fonts with Myfonts!

The Variable font format magically reduces all of the styles of a typeface into a single font file. How does it do it? By writing the beginning and end of the story and allowing you to choose all of the events in between. Variable font designers design the ends of the journey—the lightest weight and the heaviest weight, for instance—taking care that every stop along the way works perfectly. They then plan out the expected stops (e.g. light, regular, semi-bold, bold, etc.), but leave open the possibility that you may want to stop at any one of hundreds or thousands of places between those stations. The result is sort of an unlimited ticket—thousands of destinations for a single fare.

Take Avenir Next Variable for example. The traditional release of Avenir Next contained up to 60 font files—from UltraLight to Heavy and from condensed to regular, plus the italics. That’s a lot of font files to purchase and to track—and even if you purchase the entire family, you’re locked into the available weights and widths. But with Variable, if you needed a slightly lighter weight for headlines—or slightly bolder for captions—or slightly more condensed to fit more text in a small space—just dial it in. 32,500 possible styles are at your creative fingertips for a fraction of the cost of the 60 styles previously available.

Or take the most famous typeface ever: Helvetica. In Helvetica Now Variable, designers even have access to 2,470,000 possible styles. That’s a spectrum of variations in weight and width and optical size. And it’s a combinations of all of those axes. If you need a semi, semi, semi bold, slightly condensed type for use in really tiny type (and who doesn’t?), Helvetica Now Variable has you covered. If you need a suave just-slimmer-than-Regular weight for use in giant headlines, Helvetica Now Variable has you covered. And again, all of that creative firepower is available to you for a fraction of the cost of the 96 “static” styles of the font.

Part of what has made Variable fonts so popular of late is that the ground was prepared for the past two decades. Web browsers and the very fabric of design on the web, CSS, has been waiting for the arrival of Variable. Browsers are the movie theatres of CSS and HTML, and since HTML and CSS are both “Variable-ready”, nearly every browser in the world has been made ready for Variable.

And every other piece of software that you use to create your designs is ready for Varialble. InDesign? Variable ready. Illustrator? Variable ready. PhotoShop? Sketch? Figma? Ready, ready, ready. If you make it, Variable will be there. So—get started!

Make some Variable gifs! Get to it. There are a thousand and one tutorials on the web to help you animate Variables. You’ll have fun! You participate in creating the future of typography and design!

Tag your designs: #myfontsvariable

You have been taking a closer look at Variables—what they are and what they can and will do. You might well ask yourself, “Where can I get my hands on some of these amazing fonts?” Well… at Myfonts, of course! There are literally hundreds available for you to explore and purchase. Just search for “variable font” to start your MyFonts Variable journey (or explore the great Variable fonts included in this week’s emails). The range of possibilities will get you creative juices flowing—from utilitarian classics like Helvetica Now Variable to seductive new arrivals like Tom Foley’s Cotford Variable to hidden gems like Carl Crossgrove’s Wakerobin.

And when you’re ready to dive into the creative possibilities of Variable, be sure to check out the Codepen experiments by the amazing Mandy Michael or this brief tutorial about how to use Variable fonts and CSS from CSS-Tricks and explore the incredible potential of Variable fonts for responsive typography on the web you’re your brilliant guide, Jason Pamental.

And there are a handful of really great sites that showcase Variable possibilities: Variable Font by the incredible Nick Sherman; AxisPraxis by the brilliant Laurence Penney; the Variable font showcase from our friends at Monotype and Wenting Zhang and Hua Shu’s Font Playground. Check them out—get your feet wet—and then jump into the Variable font pool!

And don’t forget to keep an eye out for the Variable work that’s being made daily and showcased on social media. Talented foundries, designers, agencies, and brands are posting new Variable work all the time—and from all around the world.

It’s time to roll up our sleeves and look at some of the future-making aspects of this amazing font format. Let’s start with the idea of axes. Don’t worry, we’ll try to keep it light.

As you’ve learned, axes are the “lines of variation” in Variables. Weight (wght) is the most popular axis, and one we can all relate to. On one end of the weight axis is the light end of the spectrum and on the other, the heaviest. Width (wdth) is the second most popular: most condensed to most extended. There’s an Italic (ital) axis: a simple on/off switch for italics in a family. There’s a separate Slant (slnt) axis in some Variable fonts to control the amount of “obliquing”. And some Variables contain an Optical Size (opsz) axis to allow different styles for really small type on one end, and really large type on the other.

Those are the five defined axes, but type designers are free to make as many custom axes as they want. That’s led to some really creative explorations: the “wonk” axis for adding “wonkiness”; the “casual” axis for a bit more friendliness; the “softness” axis for more touchable type; and on and on and on.

Custom axes are great, but there are some mind-blowing examples popping up around the application of Variable fonts. Yesterday, we mentioned the brilliant Jason Pamental’s guide to responsive typography via Variable but there’s no harm in giving him another plug! Check out this incredible application of Variable (by VBAT and the Monotype Studio) for Amsteldok a full-blown Variable logo! And another very different Variable identity by Superunion (and the Monotype Studio) for UK delivery giant EVRi.

The future of typography with Variable is blindingly bright. Add your visual voice to the story!