Variable Fonts for Responsive Design (original) (raw)

Article Continues Below

Choosing typefaces for use on the web today is a practice of specifying static fonts with fixed designs. But what if the design of a typeface could be as flexible and responsive as the layout it exists within?

The glass floor of responsive typography

Except for low-level font hinting and proof-of-concept demos like the one Andrew Johnson published earlier this week, the glyph shapes in modern fonts are restricted to a single, static configuration. Any variation in weight, width, stroke contrast, etc.—no matter how subtle—requires separate font files. This concept may not seem so bad in the realm of print design, where layouts are also static. On the web, though, this limitation is what I refer to as the “glass floor” of responsive typography: while higher-level typographic variables like margins, line spacing, and font size can adjust dynamically to each reader’s viewing environment, that flexibility disappears for lower-level variables that are defined within the font. Each glyph is like an ice cube floating in a sea of otherwise fluid design.

The “glass floor” of responsive typography

The continuum of responsive design is severed for variables below the “glass floor” in the typographic hierarchy.

Flattening of dynamic typeface systems

The irony of this situation is that so many type families today are designed and produced as flexible systems, with dynamic relationships between multiple styles. As Erik van Blokland explained during the 2013 ATypI conference:

If you design a single font, it’s an island. If you design more than one, you’re designing the relationships, the recipe.

Erik is the author of Superpolator, a tool for blending type styles across multiple dimensions. Such interpolation saves type designers thousands of hours by allowing them to mathematically mix design variables like weight, width, x-height, stroke contrast, etc.

Superpolator allows type designers to generate variations of a typeface mathematically by interpolating between a small number of master styles.

The newest version of Superpolator even allows designers to define complex conditional rules for activating alternate glyph forms based on interpolation numbers. For example, a complex ‘$’ glyph with two vertical strokes can be automatically replaced with a simplified single-stroke form when the weight gets too bold or the width gets too narrow.

Unfortunately, because of current font format limitations, all this intelligence and flexibility must be flattened before the fonts end up in the user’s hands. It’s only in the final stages of font production that static instances are generated for each interpolated style, frozen and detached from their siblings and parent except in name.

The potential for 100–900 (and beyond)

The lobotomization of dynamic type systems is especially disappointing in the context of CSS—a system that has variable stylization in its DNA. The numeric weight system that has existed in the CSS spec since it was first published in 1996 was intended to support a dynamic stylistic range from the get-go. This kind of system makes perfect sense for variable fonts, especially if you introduce more than just weight and the standard nine incremental options from 100 to 900. Håkon Wium Lie (the inventor of CSS!) agrees, saying:

One of the reasons we chose to use three-digit numbers [in the spec for CSS font-weight values] was to support intermediate values in the future. And the future is now 🙂

Beyond increased granularity for font-weight values, imagine the other stylistic values that could be harnessed with variable fonts by tying them to numeric values. Digital typographers could fine-tune typeface specifics such as x-height, descender length, or optical size, and even tie those values to media queries as desired to improve readability or layout.

Toward responsive fonts

It’d be hard to write about variable fonts without mentioning Adobe’s Multiple Master font format from the 1990s. It allows smooth interpolation between various extremes, but the format was abandoned and is now mostly obsolete for typesetting by end-users. We’ll get back to Multiple Master later, but for now it suffices to say that—despite a meager adoption rate—it was perhaps the most widely used variable font format in history.

More recently, there have been a number of projects that touch on ideas of variable fonts and dynamic typeface adjustment. For example, Matthew Carter’s Sitka typeface for Microsoft comes in six size-specific designs that are selected automatically based on the size used. While the implementation doesn’t involve fluid interpolation between styles (as was originally planned), it does approximate the effect with live size-aware selections.

The Sitka type system by Matthew Carter for Microsoft

The Sitka type family, designed by Matthew Carter, automatically switches between optical sizes in Microsoft applications. From left to right: Banner, Display, Heading, Subheading, Text, Small. All shown at the same point size for comparison. Image courtesy of John Hudson / Tiro Typeworks.

There are also some options for responsive type adjustments on the web using groups of static fonts. In 2014 at An Event Apart Seattle, my colleague Chris Lewis and I introduced a project, called Font-To-Width, that takes advantage of large multi-width and multi-weight type families to fit pieces of text snugly within their containers. Our demo shows what I call “detect and serve” responsive type solutions: swapping static fonts based on the specifics of the layout or reading environment.

One of the more interesting recent developments in the world of variable font development was the the publication of Erik van Blokland’s MutatorMath under an open source license. MutatorMath is the interpolation engine inside Superpolator. It allows for special kinds of font extrapolation that aren’t possible with MultipleMaster technology. Drawing on masters for Regular, Condensed, and Bold styles, MutatorMath can calculate a Bold Condensed style. For an example of MutatorMath’s power, I recommend checking out some type tools that are utilizing it, like the Interpolation Matrix by Loïc Sander.

Loïc Sander’s Interpolation Matrix tool harnesses the power of Erik van Blokland’s MutatorMath

A new variable font format

All of these ideas seem to be leading to the creation of a new variable font format. Though none of the aforementioned projects offers a complete solution on its own, there are definitely ideas from all of them that could be adopted. Proposals for variable font formats are starting to show up around the web, too. Recently on the W3C Public Webfonts Working Group list, FontLab employee Adam Twardoch made an interesting proposal for a “Multiple Master webfonts resurrection.”

And while such a thing would help improve typographic control, it could also improve a lot of technicalities related to serving fonts on the web. Currently, accessing variations of a typeface requires loading multiple files. With a variable font format, a set of masters could be packaged in a single file, allowing not only for more efficient files, but also for a vast increase in design flexibility.

Consider, for example, how multiple styles from within a type family are currently served, compared to how that process might work with a variable font format.

Static fonts vs. variable fonts

| | With static fonts | With a variable font | | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------ | | *It is actually possible to use three masters to achieve the same range of styles, but it is harder to achieve the desired glyph shapes. I opted to be conservative for this test. **This table presumes 120 kB per master for both static and variable fonts. In actual implementation, the savings for variable fonts compared with static fonts would likely be even greater due to reduction in repeated/redundant data and increased efficiency in compression. | | | | Number of weights | 3 | Virtually infinite | | Number of widths | 2 | Virtually infinite | | Number of masters | 6 | 4* | | Number of files | 6 | 1 | | Data @ 120 kB/master** | 720 kB | 480 kB | | Download time @ 500 kB/s | 1.44 sec | 0.96 sec | | Latency @ 100 ms/file | 0.6 sec | 0.1 sec | | Total load time | 2.04 sec | 1.06 sec |

A variable font would mean less bandwidth, fewer round-trips to the server, faster load times, and decidedly more typographic flexibility. It’s a win across the board. (The still-untested variable here is how much time might be taken for additional computational processing.)

But! But! But!

You may feel some skepticism about a new variable font format. In anticipation of that, I’ll address the most obvious questions.

This all seems like overkill. What real-world problems would be solved by introducing a new variable font format?

This could address any problem where a change in the reading environment would inform the weight, width, descender length, x-height, etc. Usually these changes are implemented by changing fonts, but there’s no reason you shouldn’t be able to build those changes around some fluid and dynamic logic instead. Some examples:

Multiple Master was a failure. What makes you think variable fonts will take off now?

For starters, the web now offers the capability for responsive design that print never could. Variable fonts are right at home in the context of responsive layouts. Secondly, we are already seeing real-world attempts to achieve similar results via “detect and serve” solutions. The world is already moving in this direction with or without a variable font format. Also, the reasons the Multiple Master format was abandoned include a lot of political and/or technical issues that are less problematic today. Furthermore, the tools to design variable typefaces are much more advanced and accessible now than in the heyday of Multiple Master, so type designers are better equipped to produce such fonts.

How are we supposed to get fonts that are as compressed as possible if we’re introducing all of this extra flexibility into their design?

One of the amazing things about variable fonts is that they can potentially reduce file sizes while simultaneously increasing design flexibility (see the “Static fonts vs. variable fonts” comparison).

Most interpolated font families have additional masters between the extremes. Aren’t your examples a bit optimistic about the efficiency of interpolation?

The most efficient variable fonts will be those that were designed from scratch with streamlined interpolation in mind. As David Jonathan Ross explained, some styles are better suited for interpolation than others.

Will the additional processing power required for interpolation outweigh the benefits of variable fonts?

Like many things today, especially on the web, it depends on the complexity of the computation, processing speed, rendering engine, etc. If interpolated styles are cached to memory as static instances, the related processing may be negligible. It’s also worth noting that calculations of comparable or higher complexity happen constantly in web browsers without any issues related to processing (think SVG scaling and animation, responsive layouts, etc). Another relevant comparison would be the relatively minimal processing power and time required for Adobe Acrobat to interpolate styles of Adobe Sans MM and Adobe Serif MM when filling in for missing fonts.

But what about hinting? How would that work with interpolation for variable fonts?

Any data that is stored as numbers can be interpolated. With that said, some hinting instructions are better suited for interpolation than others, and some fonts are less dependent on hinting than others. For example, the hinting instructions are decidedly less crucial for “PostScript-flavored” CFF-based fonts that are meant to be set at large sizes. Some new hinting tables may be helpful for a variable font format, but more experimentation would be in order to determine the issues.

If Donald Knuth’s MetaFont was used as a variable font model, it could be even more efficient because it wouldn’t require data for multiple masters. Why not focus more on a parametric type system like that?

Parametric type systems like MetaFont are brilliant, and indeed can be more efficient, but in my observation the design results they bear are decidedly less impressive or useful for quality typography.

What about licensing? How would you pay for a variable font that can provide a range of stylistic variation?

This is an interesting question, and one that I imagine would be approached differently depending on the foundry or distributor. One potential solution might be to license ranges of stylistic variation. So it would cost less to license a limited weight range from Light to Medium (300–500) than a wide gamut from Thin to Black (100–900).

What if I don’t need or want these fancy-pants variable fonts? I’m fine with my old-school static fonts just the way they are!

There are plenty of cases where variable fonts would be unnecessary and even undesirable. In those cases, nothing would stop you from using static fonts.

Web designers are already horrible at formatting text. Do we really want to introduce more opportunities for bad design choices?

People said similar things about digital typesetting on the Mac, mechanical typesetting on the Linotype, and indeed the whole practice of typography back in Gutenberg’s day. I’d rather advance the state of the art with some growing pains than avoid progress on the grounds of snobbery.

Okay, I’m sold. What should I do now?

Experiment with things like Andrew Johnson’s proof-of-concept demo. Read up on MutatorMath. Learn more about the inner workings of digital fonts. Get in touch with your favorite type foundries and tell them you’re interested in this kind of stuff. Then get ready for a future of responsive typography.