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.
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.
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.
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.
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.
|
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:
- Condensing the width of a typeface for narrow columns
- Subtly tweaking the weight for light type on a dark background
- Showing finer details at large sizes
- Increasing the x-height at small sizes
- Adjusting the stroke contrast for low resolutions
- Adjusting the weight to maintain the same stem thickness across different sizes
- Adjusting glyphs set on a circle according to the curvature of the baseline. (Okay, maybe that’s pushing it, but why should manhole covers and beer coasters have all the fun?)
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.
Great article. Love to see this implemented.
I was a fan of Multiple Masters when they came out, but the UI wasn’t good and they littered your font menu with generated instances. Service bureaus didn’t like them. If the technical and UI issues were ironed out, I think they could catch on.
My understanding is that most MM fonts use “intermediate masters” to give good results rather than just designing the extremes. So having just four masters for two axes might not be realistic. Myriad MM, for instance, has 15 primary fonts on its width and weight axes.
@Max: Yes, that is also a limitation of Multiple Master fonts. As Erik explained it:
MutatorMath allows for more advanced extrapolation stuff that requires fewer masters, making it much more efficient.
Many interpolated type families do indeed include intermediate masters between the extremes, because it offers more precise control in the most used styles without any loss in efficiency for the final binary fonts that are delivered to the end user. But if you start out from scratch with the idea of minimal masters as a target, you’d be surprised what’s possible. My co-worker David Jonathan Ross is really good at designing type like that, claiming laziness as motivation 🙂
Great piece, but I wouldn’t be so quick to dismiss directions like Metafont’s. I would have agreed with you as recently as a few years ago, but spending quality time with back issues of Dot Dot Dot and Bulletins of the Serving Library have convinced me that many of my negative reactions to Metafont’s products were the result of unfamiliarity. The same could be said of negative reactions to larger-scale historical shifts in letterforms (e.g., classical to transitional to modern faces), to the introductions of slab and sans serif faces in the 19th century …
Once we have eliminated the barrier between the directions for drawing letterforms (and spacing, kerning, substituting, hinting them, etc.), on the one hand, and information about the context in which they’re being drawn, on the other, there appears the potential for a lot more than dynamic microtypography. (Which is not to dismiss any of that, by the way — it’s exciting that we are on the verge of being able finally to observe such central and well-established principles of typography.) What if we could use, not just color, or decoration, or size, but the shapes of the letters themselves to signal different kinds of content or semantics? What if, for example, we could distinguish among different kinds of links: to background material or context, to references, to opposing points of view, to tangents? What if we could signal how often text is being commented on, or linked to, or referenced or discussed on other sites? And do all of this dynamically, in ways that go beyond the capacity of what you have in past articles called ‘detect and serve’ — offering up different discrete and static collections of outlines of letterforms — to handle?
As Andrew himself suggests in his article, even dynamic microtypography based on interpolation will require us to consider using and creating letterforms that can handle such adjustment. And what I’m suggesting would probably be even more demanding — moving past interpolation (filling into the gaps between static outlines) towards parametric or what we could also call ‘extrapolated’ outlines (starting from skeletons of letterforms and using algorithms to work outwards). I would argue that this would require us to start examining our assumptions about what ‘quality typography’ is supposed to look like. At the very least it means that we should start taking parametric design projects seriously, as more than just ways of making the type designer’s job easier.
One can look to the enlarged type families of the phototypositor era, from Photo-Lettering Inc, Headliners International, and Techni-Process etc., to see that the personality of a typeface does in fact hold up across a range of transformations.
Nonetheless, users (and algorithms) should beware of Bold weights in which vertical stroke and counter width are identical.
A Myriad MM of thanks! Love it!
+ Thanks too for Nick Shinn’s memory nudge: I’d blissfully forgotten all those hours cranking films back and forth in 1970 on a then “state of the art” VGC PhotoTypositor: (http://www.forgottenartsupplies.com/?what=artifacts&image_id=38 😉
It’s obvious that responsive design has created the need for new standards, and this seems like a step in the good direction, we must start from somewhere, right?
I would love to see this approach used to respond to different pixel densities / devices. Beautiful webfonts often turn into smudged approximations of themselves when the outline points fall on subpixels; very few fonts are really as “screen-tuned” as they ought to be.
If I’m not mistaken, this very site uses device detection to dynamically switch stylesheets – it swaps out Georgia for a narrower body copy typeface on mobile devices.
That said, there’s some basics we need to fix first – like standardizing hyphenation, CSS widows and orphan support (and how they interact with columns). Different browsers seem to apply faux-bolding even if you’re using the approved methods to avoid it. There’s lots of JS, plugin and other server-side fixes for these, but the browser ought to be able to do it by itself.
Was just asking the twitter-sphere about this the other day, albeit with a little less complexity (I was asking if anyone knew of any graded fonts designed for screen). This would certainly take the place of that. It’d be a lot more to QA, but definitely worth it if we’re going to continue to see a burgeoning amount contexts for reading.
OS X and iOS actually still support Apple’s variable font mechanism, as does the open source FreeType rendering engine used in many browsers cross platform. It is part of the TrueType standard, documented here: https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6fvar.html.
It supports multiple variation axes, including weight, width, slant, and optical size. Glyphs are interpolated along these axes, allowing a fine degree of control. It even supports non-linear interpolation via the avar table. It also supports named variation instances, which allow the font designer to specify specific designs, for example, multiple weights that would normally be separate font files. Additionally, glyph hints can be adjusted to account for variations.
Apple only ships one font with variation support with OS X: Skia. There used to be a UI for specifying the variation you want in apps like TextEdit, but that has since disappeared. However, when you select Skia Bold, for example, you’re actually using a variation font, not a separate font file.
This format has been around for a long time, seems fairly complete, relatively easy to implement, and is still supported by a wide variety of devices. Perhaps it could be resurrected for web fonts.
I understand the concept. But I’m having trouble envisioning this. Is it possible to put a page together that allows for toggling between what’s possible now and what this kind if responsive type can provide so we can see the difference?
@Devon: TrueType GX has been suggested as a good starting point as a variable font technology for the web. Indeed, as you pointed out, there is even some lingering support for Apple’s variable font mechanisms. (In case you haven’t seen it, Adam Twardoch from FontLab recently posted some video of the Apple font variation stuff as it worked in older versions of OS X, including with Skia:
I would say the main issue with resurrecting the old format is that it’s, well, old. In an ideal world, there would be all kinds of improvements that could be made that were impractical, impossible, or just not imagined yet back in the 1990s when the format was born. On the other hand, it would be much more practical, politically, to get more people on board with something that already exists (and was partially supported) than it would be to start from scratch.
To be totally honest, I would be surprised if we didn’t see some hack (potentially JavaScript-based) for variable font interpolation reach the market before any new or resurrected standard is widely adopted. At this point I’m excited to see any and all movements on this front, so I say bring it on!
@Richard: If you want a rough visual before/after comparison of just one potential use for variable fonts, try loading font-to-width.com with JavaScript enabled and then again with it disabled.
I invite everyone interested in what problems a new format should address to edit https://meta.wikimedia.org/wiki/Future_Global_Font_Format_Requirements with their ideas 🙂 There’s also a discussion at http://typedrawers.com/discussion/1014/the-next-font-format
excellent article, website designing is best services to increase more conversion. this type of business is rapidly growing in the marketing you should start business of web designing as well as web development.
Great perspective and insight, thanks!
Be fond of variable fonts, most equipment that tells a website of the guest backgrounds is still in its immaturity. But latest HTML5 APIs and forthcoming CSS media inquiries make look tracking to verify viewing distance and responding to surrounding light a realism soon.
Really it is awesome post. Thank you for such an informative post.
Hello Nick Sherman – I must say beautiful webfonts, very few fonts are really as you mentioned above. It would be very useful for the web designers. Thanks