Variable fonts and the digital revolution

How tools change the way we design.

NOTE: This article was inspired by a conversation I had with Soledad Penadés, engineering manager at the Developer Tools in Mozilla, for our Google Chrome Developers YouTube series called “Designer vs. Developer”. You can also listen to a longer version of the conversation by downloading or subscribing to our podcast on iTunes or Google Play Music.

The tools we use sometimes inspire the things we make. Their inherent limitations become the epitome of a style that later generations look back on in awe. For example, Andy Warhol’s use of silkscreen printing defined the pop art style of the 1950’s and 1960’s. The silkscreen’s; ability to reproduce the same images precisely at a high quality allowed Warhol to create works that were almost impossible. He chastised for the use of repetition by traditional artists who shrieked at the perceived laziness of it all.

Today art historians still debate the meaning of it all. Why did he print so many cans of soup? Was it to give everyday dull objects the opportunity to become artistic superstars and downgrade the superstars of the time by repeating them like they were everyday objects? Was his work a social commentary on modern day idol worship? What was the artistic meaning of such a thing?

“Because I used to drink it. I used to have the same lunch every day, for twenty years, I guess, the same thing over and over again.”
Andy Warhol, 1963,
ARTnews

I suppose our environments also shape the things we make.

Typography and typesetting were specialist disciplines before the digital revolution. Collectively Apple’s GUI, Adobe’s PostScript font file format, Photoshop and PageMaker tooling democratized the graphic design world forever. These new tools gave access to a traditionally expensive process and allowed anyone to layout text.

Optical sizes in Garamond. 
Left: The correct use of optical sizes, “Green” set in a slimmer style for text printed large, “authority” in a thicker style for text printed small. 
Right: The wrong way round, “Green” appears too strong and “authority” too fine. Image: CC

Typographers shrieked. Because when scaling up a font, each size had slight alterations known as “Op­tical sizes”. Optical sizes were created by typographers who made “punches”, letters set in wood or metal, that had optical adjustments so the smaller sizes were still legible and the larger sizes didn’t appear clumsy.

Original punches for the Grecs du Roi metal type by Garamond. Image: CC

This loss in control meant typographers felt the tools that were designed to make their lives easier because of the ease at which anyone could set type, also meant the world’s appreciation for good type decreased. Despite the damage to a generation of designers not knowing these basic principles of typography, as the technology removed the limitations, it was design software that saw their flaws and reintroduced and educated new makers about optical sizing.

When the world wide web came, it too had its technical limitations. Digital designers were stuck with a few choice system fonts until the introduction of a new @font-face property in CSS that meant potentially you could use any font. Sadly though this comes at a cost, as every custom font used must be downloaded separately. Technical limitations struck again. That is until variable fonts.

Variable Fonts

As every custom font file, such as ‘Bold’ or ‘Light’ styles, has to be downloaded, issues can arise on a web page that cause the text to appear blank for a few seconds or to be seen in a different typeface altogether, before the custom fonts have loaded correctly.

Now consider each one of these font styles as a Master. A variable font is a collection of these masters, with one ‘default’ master (usually the Regular font style) and multiple registered “axes” which tie the ‘default’ to the other masters.

Typeface Amstelvar, designed by David Berlow, type designer and typographer at Font Bureau.

For example, the Weight axis could connect a Light style master to the default master and through to the Bold style master. The individual styles located along an axis are called instances.

Why is this important? It means that you can download a single file on the web and have multiple variations of a font. It also means that you could change these settings on the fly. Such as the Weight and Width in this example;

Visit the live example here.

Web designers prayed for better typography controls, and with variable fonts, they have the opportunity to do things on the web that were previously impossible. After all the web has been a place that seems visually tired and exhausted. Lots of repetitions like Warhol’s canned soup. Variable fonts seem to be the design kick the web needs.

The danger, however, is the potential misuse this could offer. As each one of these axis’ are designed into the variable font, the variations could be anything from the weight, to grade or even the styles of the glyphs terminals. As all of these settings could be exposed, perhaps this new typographic revolution will not only democratizes web typography but lead to illegibility much as Photoshop did to print. The likes of David Carson had a huge image on print design but also tainted a generation of designers who thought lack of clarity in design was a good stylistic thing.

Typeface Decovar, designed by David Berlow, type designer and typographer at Font Bureau.

Or perhaps this is the pendulum swinging back in favor of the people and a better access to design tools. Either way, there is a responsibility of the tool maker to guarantee that by giving the artists power to create they do not inadvertently create unintended consequences that make text hard to read. I think there is a degree of ethics that the technology world owes to everyone, rather than pursuing the idea that disrupting everything is positive. Disruption is quite rude after all. Then again trying to force artists to create in a certain way only leads to rebellion.

Power to the people.

You can learn more about variable fonts here at Web Fundamentals.

Like what you read? Give Mustafa Kurtuldu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.