Variable fonts

Last decade the web has been catching up with print. The advent of better delivery formats for type (WOFF(2)) and the rise of services such as Typekit and Google Fonts made the web for typography as interesting as print. But now a new specification is gaining popularity, and it may make the web more interesting than print: variable fonts.

Some background: In word processors you can typically choose between a few basic type variants Bold, Italic and Bold Italic. Some types appear with a ‘Black’ or ‘Light’ version in the font list. More professional products for graphic professionals (think Illustrator, Indesign, QuarkXpress), paired with a complete font-family, are, however able set type using ‘font-weight’. While CSS has a font-weight-property, offering ‘variable’ weights (typically rounded to the nearest 100) to a web page would make that page load much slower.

Variable fonts, bring us, euh, variables. And because many properties turn out to be ‘just’ mathematical variables, these variable fonts also become much smaller, which is a mayor gain for web-performance. Depending on what the maker decides to expose, different parameters of a font can be changed. Such as the aforementioned ‘font weight’, but in theory really any property (it is up to the font-designer and/or publisher). You may find fonts that allow you to change their ‘width’, but also the ‘ascender height’ and ‘descender height’ and more. While these fonts are also available to the professional print designer it is only on the web where the variability can be put to dynamic use, hence my statement that I believe the web is now starting to get more interesting for typography than print.

Some nice demonstrations are here (note: use the latest Chrome, Safari or Edge; Firefox is still lacking in this respect):

• Variable Fonts
• Microsoft Variable Fonts Demo

Like any feature, you may find designers not knowing what they’re really doing, abusing the variability of a font, neglecting the primary purpose of type: presenting readable text. I know that I’m ill suited to tune the knobs correctly, so I will be reluctant to use it without proper guidance. But I love to see the creative new designs made possible with this technique.