Ahead of her talk at Pixel Pioneers Bristol on 10 June, we catch up with Bianca Berning, creative director at typeface design studio Dalton Maag, to talk about what currently excites her most about web typography
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.
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.
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.
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.
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!