What are Variable Fonts
Every year Mary Catherine Pflug does survey where she compiles information from designers, marketers, typeface designers and other font users. She then analyzes the data and provides information on how fonts are being used and purchased. In her video detailing the 2019 Font Purchasing Habits Survey, she mentions that 39% of people have not heard of variable fonts, and 32% don’t know how to use them or how variable fonts can be useful. This means a majority of people do not know about variable fonts. Since variable fonts are a relatively new concept it is understandable that most people who aren’t typeface designers don’t know how to use them, or how they can be utilized. In order to foster a broader usage of variable fonts it is important to educate the wider design community on how they can be implemented and the benefits of variable fonts.
Data from the 2019 Font Purchasing Habits Survey
What are Variable Fonts
““[Variable fonts are] a single font file that behaves like multiple fonts”.”
The technology behind variable fonts has been around for a while. Starting in the 1990s interpolation and extrapolation has been used to create different masters, and weights in typefaces. For example by designing a regular and bold weight a semibold could be interpolated from the two masters.
Variable fonts, which were a joint project by Apple, Google, Microsoft, and Adobe, take this process a step further, by allowing you to select anywhere in-between the designated weights. The typographer John Hudson puts it best variable fonts are “a single font file that behaves like multiple fonts”. This means that instead of having to have different files for light, medium, book, semibold, and bold wights they are all contained in the same file.
Variable fonts are not just limited to weight, the variables can be anything a type designer wants (the most common are weight, width, slant, and optical size). Many typeface designers are experimenting with what variable fonts can do, a great website to check out to see all the possibilities is https://v-fonts.com.
By using multiple masters to define the extremes of each state (i.e for weight: light and bold), and often times the middle points (regular), variable fonts are able to create every step between the two extremes. If you want an in depth tutorial on how to design a variable font I recommend checking out the tutorial on the GlyphsApp website.
Why should I care about Variable Fonts
For graphic designers variable fonts provide greater freedom than traditional fonts. On many projects I had wished that my font was a little more condensed or bolder, variable fonts allow you to make micro adjustments to the looks of the typeface.
Variable fonts are particularly great for web development. Since variable fonts are one file instead of multiple different files there is less that needs to be loaded to render a website. This allows designers to use a wider variety of fonts and weights on a website without increasing the load time for font files on the website.
Finding and using variable fonts
Currently there are significantly less variable fonts than most latin speakers are used to, because it is a relatively new technology. Lots of typeface designers are working on variable fonts, and many companies such as Adobe have committed to developing variable fonts and supporting the technology. Currently the best place to find variable fonts is https://v-fonts.com. V-fonts has one of the most complete lists of variable fonts that exist, it also allows you to test out the fonts for yourself.
All of Adobe’s core products (except AfterEffects) currently supports variable fonts, as well as Sketch. Also all major web browsers, except Internet explorer support variable fonts. As variable fonts become more popular and common more apps and companies will support them. If you ware wondering what apps currently support variable fonts you can check here.
Can’t get enough typography?
The typographer John Hudson puts it best variable fonts are “a single font file that behaves like multiple fonts”