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.
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.