From the blog:

Variable fonts in email

In 2020, variable font usage rose from 1.8–11%, mostly due to Google Fonts throwing their support behind it. There's now a variable font toggle at the top of their homepage, with 88 typefaces available as of March 2021. As this new tech looks increasingly production ready, I wanted to update this introduction which was originally published in Emailzine #01, August 2019. I’ve reworked it, and ran some new tests using the Google Fonts API.


* * *

Variable fonts generate multiple styles from a single font file, shows a crude letter I (like a box) in thin and thick weights

Variable fonts generate multiple styles from a single font file. Glyph outlines
like the letter ‘I’ above can shapeshift into different weights. It’s the type
equivalent of SVG/CSS shape morphing or ‘tweening’ in animation.


Normally when you purchase a webfont you’d choose from a range of individual styles such as condensed or bold, and each of these is a separate file. The change introduced with OpenType variable fonts, is that they can generate multiple styles from a single font file. This is possible as character outlines can morph between extremes, such as a thin to black weight. If you squint and imagine the image above is the letter ‘I’, its outline can shapeshift across a range of weights; all drawn from the same glyph and with the same number of points.


Lowercase letter i repeated in a row showing the weight axis 400 to 800. Both named instances in increments of 100, and inbetweens like 455.

Variable font EB Garamond, weight axis 400–800. Named instances
in increments of 100 e.g. 400=regular, 500=medium, 600=semi-bold.
Values underlined e.g. 455 are inbetweens, and can now be selected.


The full range of weight options falls along a design-variation axis, from which the type designer is able to assign different locations and useful names e.g. thin, regular or bold. These pre-defined options are called named instances. If you require a weight that falls inbetween a named instance you can select it yourself, allowing for more control. As type designer David Jonathan Ross explains, “Variable fonts break down that wall between type designer and type user, because now you have access to stuff that previously only I had access to.”


Continue reading on the blog ⇾