For the New Year greeting card of 2019, I wanted again to combine some typographic design with a small technical innovation. Nowadays, the outlines of a font may react to user input whereas 2015 and 2016, I used svg paths for interpolation.

Variable Fonts

Thanks to the new OpenType variable font format published in 2016, typefaces can contain muteable glyphs while remaining (machine) readable text. In fact, one font may contain the equivalent of several fonts.

Design space

The interpolation runs between two or more extremes (masters). The axes define how the variations take place. The typeface can become wider/narrower or bolder/lighter, for example.

Every instance in the design space can be selected in the layout software or via CSS. This means that the typeface can also be animated or react to user input, which is one of the big potentials of variable fonts.

I gave an extensive talk on variable fonts at the “Tag der Schrift” 2018 in Zurich.

Interpolation

Normally, three masters are enough for two axes, but since the shapes vary a lot, I added a fourth master. The movement of the points can be controlled better in that way. 

A combination of the two axes is being calculated depending on the user’s mouse position: 10% weight and 75% dance or 50% weight and 12% dance, and so on. The user decides in which direction the dance is going.

My small font “Dancing Queen” for the New Year card contains 2 axes: one for the weight and another one named “dance”. The latter is inspired by joyful lettering with glyphs bouncing up and down the baseline.