Speaker Spotlight: Bianca Berning on Variable Fonts and the Future of Web Typography

What are variable fonts, and what's their support like?

Variable fonts were introduced as an extension to the OpenType font format in 2016. They allow multiple font weights and styles to be contained in a single file as pre-defined instances.

Through the intelligent sharing of data that is common between the different weights and styles, and by compressing the data which differs, the resulting file is considerably smaller than the equivalent traditional font files, leading to easier installs, smaller apps, and faster web fonts.

But there’s more to variable fonts than the grouping together of existing styles; through careful design and engineering a variable font can also deliver additional variations, for example every possible style and weight combination between the pre-defined instances in the file.

The technology is supported in most OSes, all current web browsers, and a decent number of design and graphics applications. Notably support is still missing in Microsoft Office applications (and Apple’s and Google’s equivalent apps) and in most major video and motion applications apart from DrawBot and Cavalry.

What can we expect to take away from your talk at Pixel Pioneers Bristol?

I'll take a look at the motivations behind the introduction of variable font technology, outline how it works, and provide some information about the support, implementation, and pricing.

What's your favourite variable font right now and why?

We just had a gloriously sunny weekend in the South East, so it will have to be Caraque, a super jolly typeface designed by Pablo Gámez for Dalton Maag and inspired by chocolate in all its forms.

The variable font version features both a weight and melt axis which morphs between the two extremes – from ‘solid’ to ‘melted’ – allowing you to control the expression. As the melt axis is manipulated, the letterforms expand like melting chocolate, taking on a soft and playful shape. There's something about the typeface that screams ice cream vans and sunny afternoons in the park.

How can typography, in particular variable fonts, make text on digital devices more user-friendly and accessible?

A complex question with many possible answers. One of the many benefits of variable font technology is that we can optimise for legibility at small sizes, and optimise for personality at large sizes. Optical Size is one of five predefined variable font axes in the OpenType specification.

This axis can be used to introduce size-specific designs to compensate for the loss of fine details in small sizes.

Exploring a very similar idea, we can also utilise variable font technology to compensate for the irradiation illusion – the visual perception effect which, in design, results in text presented white-on-black being perceived as larger and bolder than the same text presented black-on-white.

Apart from variable fonts, what excites you most about web typography at the moment?

I’m particularly excited about the advancement of Incremental Font Transfer and the possibilities of Color Fonts. Incremental Font Transfer and variable font technology are both excellent news for web performance and font loading times. I hope these things will allow us to finally stop compromising and embrace web typography's great potential.

At Pixel Pioneers Bristol, Bianca Berning will explore the functional and creative possibilities of variable fonts. The conference will also cover new CSS features, accessibility and performance, best practices in JavaScript development, sustainability, and more. Get your ticket today!