Variable Font am Start

Ganz gemäss meiner eigenen Tradition, habe ich auch für 2020 wieder eine interaktive Grusskarte entwickelt. Da sich die Zahlen 2 und 0 in «2020» wiederholen, kam ich auf die Idee des «unendlichen» Scrollens, worin sich die beiden Ziffern immer weiter wiederholen.

Entwicklung Variable Font

Der Variable Font, den ich für dieses Projekt entworfen habe, enthält zwei Achsen: Breite und Stärke. Während die Stärke bei hover/tap-Input interpoliert wird, passt sich die Breite der Schrift mit der Containerbreite an.

Mit OpenType Font Variations ist dies möglich ohne die Schrift zu verzerren oder in ein Bild umzuwandeln. Variable Fonts werden inzwischen von praktisch allen verbreiteten Browsern unterstützt.

Rekursion

Ein kleiner Einblick hinter die Kulissen: Alle Container, die jeweils eine Ziffer enthalten, sind ineinander verschachtelt, wie bei einer Matrjoschka. Je nach Scroll Position werden die Container nach einander in den Viewport reingeschoben. Damit das Layout in jedem Format nach demselben Prinzip ausgefüllt wird, habe ich mit Viewport Units gearbeitet. Dies erforderte einige Berechnungen. Und da es zwei Layoutversionen gibt für Quer- und Hochformat, habe ich alles zweimal berechnet …

Natürlich muss die Microsite auf allen Geräten und sowohl im Hoch- wie auch im Querformat funktionieren. Deswegen habe ich zwei Layouts entwickelt. Der Variable Font passt sich dabei mit seiner “Width”-Achse problemlos an.