Variable fonts: a million times the possibilities, in less bandwidth than before — my talk at dotCSS, Paris

Posted 30 November, 2017

I was invited to speak at dotCSS Paris, November 30. Here is the dotCSS page about my talk.

Video (20 mins)

Intro

In September 2016 the font world was super-excited by the announcement (by Google, Microsoft, Adobe and Apple) of the OpenType 1.8 Variable Font format. Development versions of Safari soon supported Variable Fonts via the ‘font-variation-settings’ CSS property. Chrome since added support on all platforms. Yet the technology’s success depends on being embraced by typography’s new vanguard: UX designers and front-end developers.

Laurence explains the manifold benefits for the web: responsive type within responsive design, reduced webfont payload, and much more. He shows how to explore the possibilities of Variable Fonts using his Axis-Praxis website and other tools, encourages dialogue with font makers to make sure they’re making the responsive fonts you need, and explains how to deploy Variable Fonts in real projects.

Synopsis

Laurence Penney, an emissary from the font world to the CSS world, explains how variable fonts are the most exciting thing in typography for over 20 years.

Since webfonts became reality around 2010, web typography has become as expressive as traditional printed type – in particular using multiple weights and widths from a typeface family. Yet that hasn’t been without drawbacks: lots of individual fonts add bandwidth and network requests, which every developer wants to minimize.

Variable fonts are a very powerful answer to these drawbacks. With one font file per type family, typographers now have access to an infinite range of fonts defined by the so-called “design axes” in the variable font. A variable font might have just one axis, say a Weight axis that allows the font to vary between light and bold. Behind the scenes, the Bézier control points (BCPs) for the bold ‘A’ glyph are stored by recording how the BCPs for the regular ‘A’ must be moved; this allows everything between regular and bold to be generated by interpolation. If there are intermediate steps that are not pure interpolation, they can be inserted — just like key frames in animation. Variable fonts often also have a Width axis, so the overall font width can vary between narrow and wide. Again, each new wide and narrow glyph needs to be defined in a compatible manner, by storing deltas from the default.

The effects of multiple axes combine, so that we can get wide+bold fonts, or thin+narrow fonts, or any combination of Weight and Width settings. Variable fonts can in fact contain thousands of axes, each with effects that combine automatically with the effects of the other axis settings. We call a set of axes a “design space” — but don’t try and visualize design spaces with more than three axes!

We can try out variable fonts in Axis-Praxis, a website by the author that runs in Safari and Chrome. There are 30+ fonts to try out — drag & drop is supported for a user’s own variable fonts. The Playground has interface ideas and other demos. The most interesting is perhaps “fit-to-width”, which adjusts a variable font’s width axis, so that a textbox containing a given text and aspect ratio can be filled completely without a geometric stretch.

We discuss how to control variable fonts using CSS font-variation-settings, then explain how to use CSS transition and CSS animation to add movement. We show some early interface ideas for user control of variation axes, but note that these are at an early stage: apart from an array of sliders, no useful standards have emerged, so experimentation is really valuable at this point. Front-end developers should be encouraged to build any UI that makes sense.

We bring things together by presenting an animation based on 16 frames of a running horse, mastered as a variable font. The size is remarkable: under 4000 bytes for the font, with around 300 bytes of HTML and CSS which animates it. It seems unlikely that any other web technology can produce a similar result in a smaller size.

We conclude by calling for collaboration between the CSS world and the world of fontmakers. Fontmakers are not experts at interface design, and nor do we have a monopoly on great ideas for fonts. So don’t be shy! Please suggest ideas for new variable fonts, new ways to play with variable fonts. We’d love to help.