The evolution of typography with variable fonts: an introduction

Words have power, and typography is their voice

For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. Unfortunately, for many years after the advent of the web, we were unable to apply all but the most basic of typographic design to online content. With the ability to use real fonts and OpenType features — like ligatures, specific figure sets, fractions, and true kerning — the typographic landscape improved tremendously. But the reality of viewing content on the web dictates that speed is the most critical aspect of design — so we’ve traded typographic ‘vocal range’ for page speed. That means fewer font weights and reduced brand fidelity and voice.

From many, one (paradigm: shifted)

A variable font is a single font that acts as many

John Hudson

The advent of Variable Fonts changes that entire dynamic. As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file. What’s more: the format (which is technically part of the OpenType 1.8 specification) is completely extensible. The type designer has complete control over what axes are used, their ranges, and even the definition of new axes. There are currently 5 ‘registered’ axes (width, weight, slant, italics, and optical sizing), but the designer can vary any axis they choose. Some examples include the height of ascenders and descenders, text grade, even serif shape. The possibilities are nearly limitless. By removing the performance barrier, we open the door for more interesting and dynamic design and far greater ability to express the true voice of the brand. All this while maintaining fidelity to the typeface itself: only axes exposed by the type designer can be varied. No artificial distortion allowed.

Web design, reinvented

While the technology is still maturing and type designers are working to become more fluent in this new way of working, the promise for design on the web is ground-breaking. The typical scenario would be to constrain any given design to 3–5 different fonts to represent every aspect of a site’s design language and voice — including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to use different weights for every level of heading — greatly increasing their clarity and readability.

One could also use slightly narrower character widths for headings or on data-dense displays of information. In fact the entire typographic system could be designed to be proportional: weight and width could become multipliers on the standard body copy settings. Doing so would allow those aspects to scale easily along with the body copy should its settings change based on screen size or user preference. All of this with an accompanying increase in performance due to fewer HTTP requests (fewer font files) and an overall savings of data to download (though that will vary by font and compression used).

But while these freedoms allow us to be more expressive, some of the really interesting capabilities will help transform the reading experience itself. This page (well, the actual demo page itself) has been set with a new variable font version of FF Meta, the classic sans-serif design by Erik Spiekermann first released in 1991. Even with only one axis of variation (weight) of both roman and italic variants, a wonderful range of voice can be achieved with massive gains in performance: 18 files and over 288k replaced with a single file of only 84k.

Reinvented reading on screen

[Meta] has to do more than look pretty: it has to work pretty hard 

Erik Spiekermann

Some of the biggest challenges in creating a good reading experience are tied to the lack of finesse in proportion and fine details. The combination of modern CSS and OpenType features and variations presents a powerful combination. Being able to set features like ligatures and hyphenation based on language, turn hyphenation on and off based on screen size, and even tailor the character width on the smallest screens in order to fit more characters per line without reducing font size can make dramatic improvements in the smoothness and comfort of the reading experience.

Ready for a close-up

Another feature that was common in metal type but lost in translation to photo-typesetting and digital was optical sizing (well, some designers do still create separate optical sizes for different ranges, but it’s rare and somewhat limited). Not as often found on sans-serif designs, but in decades past (in truth, for centuries), it was quite common for the physically smaller sizes of a typeface to be cut with slightly heavier strokes, more open bowls and counters, and in some cases even wider apertures in order to preserve readability. Newspapers in particular found this critical to ensure lines didn’t get lost or letters didn’t suffer too greatly from ink gain.

Optical sizing has made a return in variable fonts, and can be automatically applied where available, or set explicitly by the web designer or developer. As mentioned, it’s not as frequent a feature in sans-serif typefaces like this one, but can be used to quite dramatic effect in higher-stroke-contrast serif designs.

Polish and poise

With the benefits already discussed, the case for variable fonts is pretty compelling. But good typography isn’t all there is to great design. The range of axes like width and weight give us tremendous freedom to embrace more editorial design on the web without having to load an exorbitant number of file assets. And since we already have those few required variable fonts in place, the opportunity is to expose them for use by content publishers themselves. Imagine a role for designers inside the Content Management System (or CMS) where the website is housed. That designer could use some simple controls built into the CMS that would allow them to typeset specific headlines or pull-quotes, enabling a whole new level of design much like what we have in print, without having to write custom code every time.

We may still be at the dawn of this new era, but it’s future is certainly bright

As of May 2018, 3 out of 4 major web browsers already support variable fonts, in addition to both dominant mobile platforms (check support on caniuse.com). With that in mind, we’re ready to start lighting up the web today.

Here’s the full page on CodePen. Have a look at the whole thing together, and take a peek at the CSS that drives it. This includes a scaling typographic system that I created based on some ideas I learned from Jen Simmons and Tim Brown, utilizing viewport units, CSS custom properties (aka variables), and lots of calculations. You can view it directly on CodePen or actually check it out embedded below.

§

Some thoughts on the typeface and the project

I’ve always been a fan of Erik Spiekermann’s work, and I think that the chronology and history of Meta, Officina, and Fira are really interesting, and very much part of the fabric of digital design for me over the past 25 years. The chance to take a typeface with that kind of history and impact in the design world and work with it in the context of a brand new technology was really exciting. I especially appreciated being able to work with both weight and italics as part of the same file: it showcases the value of the variable font format really well.

I decided to not even start designing the page until I wrote the article itself. I wanted to write a good introduction aimed at designers and brand owners in order to introduce them to the benefits of variable fonts in terms that would resonate with their concerns: design language and brand expression. Once I felt I had a good draft, I added a bit more specific to the typeface itself and its place in our design lexicon. This gave me some ideas about how to showcase both the typeface and the history.

In thinking about the basic typesetting, I went for scale: I wanted to play with the extremes of weight and size in ways that you don’t see as often on the web due to most designs being more constrained in the weights used. In this case I’ve used a whole range of weights from 100 to 900 in both roman and italic. Once I started to get a layout I liked, it occurred to me that instead of making graphics to illustrate the capabilities, it would be more interesting to make illustrations out of type: pull quotes and a bit of ‘infographic’ style font data.

The last touch of the ampersand up top was actually inspired by the type specimen page on the FontFont site: there’s a glyph sampler that shows all the weights of an ampersand layered on top of each other. I had originally had them all stacked in the same way, with on animating in a loop — but that was a bit much for some browsers still implementing variable fonts and keyframe animation. When I hit on the overlapping layout with a play/pause option I liked the way they looked spread out (especially on mobile). So I flipped it around and had it start out static, and then play the animation once and go back to the spread/layered layout.

All in all I’m really happy with both the content and the design, and like how it moves and evolves across different screen sizes too. I hope it serves as inspiration and instruction for others as well.

[Monotype recently engaged me to write and design a demonstration page to feature a new variable font release of the classic Erik Spiekermann design FF Meta. This is the text of that page and some of the visuals. The full live page is hosted on CodePen and embedded above. It’s open to all, so feel free to make a copy and play with it yourself. You can see their introduction to the technology as well.]