Making and using variable type
New, flexible type technology
I’ve been wanting to play around with variable typeface design for several years. First introduced in 2016, variable fonts allow a single file to generate a series of typefaces, defined by one or more axes like weight, width or slant. My typeface design application of choice, Glyphs, supports variable font export and even has an extensive tutorial on their blog explaining the process. I’ve read through the blog post a few times, but needed to carve some time out to experiment. And the coronavirus pandemic provided me with a little more time at home, especially on the weekends.
Creating variable type
For my first variable experiment, I chose to use one of my existing designs, Intermodal, a stencil font that is for sale over at Creative Market. Conversion into a variable font was a reasonably easy process, with two axes, one for width and another for slant. This allowed me to make the entire family — six weights with six italics — in a single file. The process was easy enough, that I added a third axis for the stencil gap size.
I tested the font on the DINAMO Font Gauntlet, a web app that allowed me to animate all of the axes in motion and make sure everything worked the way I designed it. I shared a simple animation on Instagram:
Using variable type
When you install the typeface on macOS, you see the predefined font instances in the menu. If the application you are using supports variable type, then that application provides its own interface for changing the settings. Support for variable fonts is still limited. So far, I’ve only used the font in Illustrator, Photoshop and InDesign. All three applications use the same interface for modifying the variables. The font worked perfectly in Illustrator and Photoshop, but the weight axis didn’t work reliably in InDesign. I thought it was an issue with my file, but apparently, it’s a known bug in InDesign.
Variable type controls are located on the Character Palette and appear when a variable font is selected from the font menu.
As a designer, I welcome the flexibility that variable fonts provide, but I think they will be most helpful as a way to make minor adjustments. If you’ve ever wanted a typeface that was slightly more narrow or an italic that wasn’t quite so slanted, variable fonts provide a tool to make those adjustments. In the long run though, especially for print or visual branding, I wonder how many designers really want that level of complexity. For the web, it’s a different story. I’m intrigued by the concept of a whole family of web fonts served from a single file, or varying the width of a font as part of a responsive site design.
Some additional thoughts about variable type
I’m expanding the number of characters in Intermodal and making some adjustments to my original design before I rerelease it.
I have no idea how to price it or market it. Looking at other designers, they have no idea either. I know what the selling points are for variable type, but I’m not sure many people are looking for that type of flexibility. The general shift in the marketplace towards subscription services like Google Fonts and Adobe Type further complicates the matter.
When Opentype was new, Adobe used “Pro” as an indicator that the font had Opentype features. Most foundries followed their lead. It looks like Adobe is using “Variable” on their fonts and most are once again following their lead. (Some are using “VF” instead.) But most designers don’t really know what variable fonts are. I wonder if another term, like “Flex,” might be better.
Bob Wertz writes about design, technology and pop culture at Sketchbook B. Bob is a Columbia, South Carolina-based designer, researcher, college instructor, husband and dad. He’s particularly obsessed with typography, the creative process and the tools we use to create.