Intro to Variable Fonts in Web Design

There’s been talk for years of creating fonts that come with adjustable sizes by default. And for years this was just a pipe dream. But it seems that variable fonts are finally here and they’ll only gain support over the coming years.

Designers around the world have been discussing the possibilities and excitedly clamoring over the future of webfonts. What do variable fonts means for the future of CSS3 webfonts? And how will font foundries design fonts to suit the needs of web designers?

In this post I’ll bring you up to speed on variable fonts and what these mean for the web. This is an exciting new technology and even though it may be years before this is commercially viable, that leaves designers plenty of time to prepare.

What Is A Variable Font?

The idea of a variable font format has been around for years. But early concepts in the 1990s never gained traction, nor was the web ready for these types of fonts.

But the official release of variable fonts is a very new thing this time around. And thankfully it’s being done the right way.

Four big tech companies Adobe, Apple, Microsoft and Google have agreed on a new name for this format: OpenType Font Variations.

This update comes packaged with the new OpenType 1.8 spec and it’s fully supported in OpenType files. Each .otf file may now contain a variable set of data points for adjusting letter widths, descender lengths, and x-height values(among other similar features).

A variable font is one font file that contains many different styles or displays of that font.

Variable fonts can make distribution easier but they were never intended for the web. Now with the popularity of responsive design this topic of variable webfonts has been tossed around much more frequently.

This new OpenType Font Variation was officially announced at the Warsaw ATypI conference in 2016. The announcement spurred a detailed blog post by pro type designer John Hudson.

Here’s a quote from his post with more technical details:

An OpenType variable font contains one or more axes that each provide particular variation between different extremes of a typeface design. The format also allows for the possibility of intermediate designs, for the whole glyph set or for individual glyphs, to provide finer control over the design as it changes across the variations design space.

If you’re a web/UI designer then you probably won’t be creating many fonts from scratch. So these technical details aren’t as useful if you just want to use variable fonts on commercial projects.

But let’s delve a bit deeper into how they work before looking at their applications on the web.

How Do These Work?

Right now installing a Google font is super easy. You visit the page, select what you want, and copy the import URL. But each Google Font comes with only one weight and glyph set.

This means that Oswald can be installed as regular, bold, or both. However adding both styles requires more HTTP data since both styles must be loaded individually.

Variable fonts would contain all of this information together in a single file. But they even go one step further.

Variable fonts can be adjusted on the fly in a web browser so you can make subtle changes to weight or other features like descender length or x-height. The options for customization are controlled by the font designer so there’s a lot of flexibility.

Here’s a quote from John Hudson’s post explaining how these work in greater detail:

A font may contain a set of glyph outlines that correspond to the regular weight and width of a typeface, and the lighter, heavier, narrower, and extended designs will be expressed in the font data as movements of outline nodes relative to that outline.

In less technical speak this boils down to a malleable grid for shaping letters. Think of interpolation where data points define the aEURoegridaEUR? of each letter. The default points are called the master style/master font, and these points can be adjusted to create different font styles.

You might be asking why this is even necessary. What’s the purpose of manipulating a font style on the fly?

There are actually many good reasons:

Updating font style based on screen size
Adjusting weight to improve kerning
Adjusting letter width for thicker font families
Changing the baseline or letter height in large text(eg. headers vs paragraphs)

In a design program like Photoshop you have controls to directly manipulate font variations. But what about web fonts? How would you customize these on the fly using CSS?

Right now that hasn’t been officially decided. The W3C has a CSS3 spec for this module and it needs to be updated to support variable settings.

There is no set timeline so I can’t guarantee anything at the moment. But rest assured the teams at these big four tech companies are hard at work trying to create a standard for OpenType Font Variations.

Variable Fonts On The Web

These OpenType variable fonts are basically made for the web because they’re not as valuable in the print world. Yes they can make smoother dynamic fonts and reduce file sizes, and yes this is very handy for print layouts.

But on the web these variable font files can reduce HTTP requests and offer more variety than the current form of web fonts. They would be a complete game changer.

The single biggest hurdle at the moment is browser support.

CSS3 has a custom rule called @font-face which allows developers to import fonts and render them live on the web. This rule supports a variety of formats like TTF, SVG, and of course OTF.

The problem is modern browsers haven’t agreed on how to implement these variable .otf files.

The same can be said about the W3C which needs to modify the CSS3 specs to help browsers support these variable fonts.

And beyond CSS3 support there’s also the problem of rendering engines. Fonts need a rendering engine to display properly, and browsers need to support that rendering engine with consistency.

In my estimate we’re at least a couple years away from gaining traction for variable webfonts. But having large tech companies advocate for OpenType Font Variations is a huge deal.

The practical value of variable fonts on the web should be obvious. They’re much smaller, easier to work with, and they offer much more customization without quality loss.

But the timeline to their viability is still a huge question, and it’s a question I hope we can answer soon.

The Future Ahead

You can already create and structure OpenType Font Variations if you know how to use font production software. This post goes over all the terminology including variation tables and adjustment deltas for typefaces.

But that guide is very detailed and really targets advanced type designers. So what does the future hold for people besides type designers?

It’s too early to set dates for full browser support, but the future looks good. This spec was developed by four leading tech companies: Adobe, Apple, Google, and Microsoft. All four have major sway in the industry and many font foundries have even agreed to contribute their support.

And the OpenType v1.8 release is just the beginning.

The free Google Fonts platform is already contemplating how to support variable fonts natively. This includes more font types like TrueType, but also more support from their browser Google Chrome. The FontLab team also plans to fully support OpenType variable fonts as soon as possible.

For now just understand that variable fonts are an emerging technology and they’re gaining support quickly. Your current web workflow may not change much today or even this year. But in the next 3-5 years you may be designing in a completely different world of web fonts.

Since this topic is so new and still under development it’s tough to find quality learning resources. But all the links in this post are fantastic resources to get started. And over time as this specification gains support I guarantee there will be a lot more reading material.

If you’re looking for more technical pointers on variable fonts I recommend starting with these articles: