Soon: responsive typography with OpenType Variable Fonts

Years ago I dreamt of webfonts being responsive to both medium and design when consulting for Google. Side suggestions to speed up font delivery were soon after implemented but my main priority—eliminating the variety of how thin or thick a single font looks and differs from screen to screen—wasn’t. The introduction of OpenType version 1.8 offers a great solution to finally make type appear predictable and consistent across readers’ displays.

How it works

A variable font is a single font file that behaves like multiple fonts. It contains information to render numerous instances alongside one or multiple axes given by the font’s type designer. For example a weight and/or width axe. With the new format any instance for a particular range can be displayed, e.g. from light to bold, condensed to normal and even everything in between, say, in this example, a medium semi-condensed. It can generate the exact variations you wish.

Default instances named by the font’s type designer appear to users as if they were separate fonts, like how you see regulars and bolds today in your app of choice. So they’re still there, but just packed into a single file. These styles are selectable in apps and documents exactly as if they were individual non-variable fonts.

Responsive typography

Variable fonts allow for fine tuning typography, which is especially interesting and desirable for digital media. It enables typography to react to things like a reader’s device, screen orientation, or even reading distance. For example one specific font instance can be served to Apple users while Windows users will be served another variation in order to make sure both groups will see the same result. Or, dealing with optical sizes: showing one font’s variation if a web page requires it being displayed below a certain pixel size, rendering another if it should be typed set above another size. Wouldn’t it be cool for a typographer to enlarge or shorten a typeface’ x-height? Or ascenders and descenders? Or boost the family’s contrast? What would you like to control?


Additional benefit is the further reduction of file sizes, meaning faster delivery and loading of webfonts. As multiple traditional fonts will be bundled into a single file, it also means less network requests which further reduces waiting time. This sounds a little silly nowadays with contemporary high speed internet access, but time saving remains important because while photos and such are still loading, you can start reading immediately in the right type instead of fallback fonts.

Patience, please

Although all this sounds very exciting, it will take a while before you’ll see it happening on the screen in front of you now. Things like CSS, browsers, OS, rendering engines, design software, apps and fonts too need to support the new technology. They all require significant updates to let it work in harmony. Hopefully it helps that amongst others the four industry giants Adobe, Apple, Google and Microsoft (in no particular but alphabetical order) collaborated on the new standard. But, you know, even Microsoft Word still doesn’t support key OpenType features, though Microsoft co-developed the OpenType format itself nearly 20 years ago. Fingers crossed for a happy end.

More as we get it.