Variable-type-2020Variable-type-2020

Variable Font in use

An infinitely good year!

Following my yearly tradition, I designed and developed an interactive card – or in that case a micro site – to send out New Year greetings. As the numbers 2 and 0 are repeated in “2020”, I had the idea of an infinite scroll, where numbers are being repeated (almost) endlessly.

Custom Variable Font

The variable font I designed for this project contains two axes: width and weight. Whereas the weight is being interpolated on hover/tap input, the font’s width depends on the container width.

All this works without distorting or rasterizing the outlines, thanks to OpenType Font Variations which are by now supported by all major browsers.

Recursion

Reacting to scroll input, containers slide in one after the other from the bottom or from the right. All those containers are stacked in each other like a matryoshka doll. To fit everything in, I had to do a lot of calculations. And since there are two layouts, I had to do everything twice …

While one container is sliding in, another container is being scaled and simultaneously, the figure is interpolating along the width axis.

Obviously, the site has to work on all devices and formats, so I defined two layouts. Since the figures have narrow and wide styles, they adapt easily to both versions.

Try it out yourself: christinegertsch.net/2020