While technology, software, and the internet are changing at a rapid pace, fonts have surprisingly had few technical developments over the past two or three decades. While the way we employ fonts in web design is refined, the way fonts work has been pretty much the same since the wide implementation of OpenType in 2005.

Lately, there’s been a lot of buzz about something new: Variable Fonts

But what are variable fonts, and why will you be seeing a lot more of them in the coming years?

A Brief History of Type

By the time the first typeface file was created in the 1970s, computers had been using displays for a couple decades. Adobe released Type-1 initially, which was improved in the 80s when Apple released TrueType—a format still used to this day, and TrueType Fonts became accessible to everyday users of personal computers (and later any internet user).

As the years went on, digital fonts exploded the number of typefaces available. A further improvement, OpenType, which was developed by both Microsoft and Adobe, allowed each font file to have a wide variety of characters for different languages and alternate character styles (such as symbols and ligatures). This is the world we find ourselves in currently.

So What Is a Variable Font?

Variable fonts aren’t “new,” per se, with examples going as far back as the early 1990s; however, they’ve gotten a lot of attention recently. So why is that? 

Variable fonts combine different weights and styles in a single file. This allows us to load a single font file and choose the weight or style we want when we’re laying out type. While the size of these files is slightly bigger than your typical TrueType or OpenType file, it ends up saving space overall. Why load 5 files at 27kb when you can load one 70kb font file and cover a range of styles at once?

Variable Fonts = Cutting Down on Load Times

Variable fonts do just that—they cut down on load times. Before variable fonts, each typeface had various fonts—a particular weight and style within a type family—that would need to be chosen. For instance: If you want to bold some type in an article you’re writing, your computer is using a wholly separate font file for each “weight.”

Typically, websites design includes about 4 different fonts to cover body copy (not including the multiple header styles):

• Regular

•  Italic

• Bold

• Bold italic

Prior to variable fonts, you had to load several font files just to display the content on the website. The less labor-intensive this is for your site, the faster it loads. 

Faster Speeds + Web Design Flexibility

Since variable fonts can have their weight and style set, this allows for more flexibility in design to make sure that type is legible and readable to users. Gone are the days of choosing one or two font weights and having to settle for less-than-ideal display in the name of page loading times. An edge case that pops up often is a font weight that works well for main body text, but poorly for smaller text like captions or large text like pull-quotes.

This is particularly great for responsive design when taking into account screen size and resolution. Often certain weights of fonts need to be heavier while also getting away with smaller size due to the real estate a monitor affords. On mobile devices, such as phones or tablets, you tend to be able to get away with lighter weights of fonts that are a bit larger, due to the pixel density of the screen. Instead of handling this with multiple fonts files, all these weights are handled with a single file.

Figuring Out Your Type

Like with any new technology, it will take a while for variable type to work out any kinks, set standards of use, and see what limits people can push the type to do. We’re keeping a close eye on variable type at Lform and see a lot of promise in its use. Some great resources that show the capabilities of these fonts include the websites Axis-Praxis.org and (suitably named) VFonts.com, where you can tweak the attributes of each typeface to see what this technology can really do.

Photo credit, “Batman on the Apple II” by Matthew Peirce. Creative Commons 2.0 Licence.