lets-dance-2019-c-gertschlets-dance-2019-c-gertsch

Interaktive Grusskarte

Tanzende Typen

Für die 2019er Neujahrskarte wollte ich erneut einen eigenen Schriftentwurf mit einer technischen Neuerung kombinieren. Während 2015 und 2016 noch SVG-Schriftzüge interpoliert wurden, kann heute die Outline eines Fonts variiert werden.

Variable Fonts

Ermöglicht durch das 2016 publizierte Variable Font Format, kann Schrift eine veränderliche Form enthalten, bleibt jedoch lesbarer Text. Es geschieht also keine Vektor- oder Pixelumwandlung.

Let’s
dance!

Have a joyful new year!

The font in this interactive greeting card can dance. Well, at least if you help it by moving your mouse around ;o)
Enjoy and have a healthy happy 2019!

BEWEG DIE MAUS!

Designspace

Die Veränderung verläuft auf sogenannten Achsen zwischen zwei oder mehr Extremen (Master). Die Achsen definieren, wie sich die Schriftform verhält. Sie kann zum Beispiel breiter/schmaler oder leichter/fetter werden.

Per CSS respektive im Layoutprogramm ist dann jede Instanz auf der Achse abrufbar. Auf dieser Basis kann die Schrift natürlich auch animiert oder interaktiv manipulierbar werden. Dies ist eines der grossen Potenziale von Variable Fonts.

Am Tag der Schrift in Zürich habe ich einen umfassenden Vortrag über Variable Fonts gehalten.

dance-sketch-cgertschdance-sketch-cgertsch

Interpolation

Für zwei Achsen reichen im Prinzip drei gezeichnete Master. Da die Formen auf den beiden Achsen jedoch stark variieren, habe ich einen vierten Master eingesetzt. Damit kann die Bewegung der Ankerpunkte besser kontrolliert werden. 

In Abhängigkeit von der Mausposition wird eine Kombination der beiden Achsen berechnet: 10% Stärke und 75% Tanz oder 50% Stärke und 12% Tanz etc. In welche Richtung der Tanz verläuft, entscheidet der User.

In der Serife von n läuft die Bewegung noch etwas unrund, das liesse sich mit einer komplexeren Berechnung korrigieren – eine Aufgabe fürs nächste Mal…

Im Beispiel der Neujahrskarte enthält die Schrift 2 Achsen: eine für die Schriftstärke und eine weitere namens „Dance“, die aus dem Lettering inspiriert ist und die Zeichen in freiere Formen mit flatternder Grundlinie übergehen lässt.

new-year-2019-christine-gertschnew-year-2019-christine-gertsch