PAGE online
Produkt: eDossier »Ratgeber Schriftlizenzen«
eDossier »Ratgeber Schriftlizenzen«
Free Fonts, Desktop-Fonts, Webfonts lizenzkonform nutzen: Das müssen Freelancer, Designbüros und Agenturen beachten

Variable Color Font animieren

Der niederländische Designer Arthur Reinders Folmer erstellt animierte Typoillustrationen, die mit Schrift nur noch wenig gemein haben.

Variable Fonts Initialienalphabet Arthur Reiners Folmer
Eis adé
Das schmelzende M – mit dem Arthur Reinders Folmer auch auf das Verschwinden der Gletscher aufmerksam machen will – ist Teil eines ganzen animierten Initialenalphabets.

Schritt für Schritt zeigte Arthur Reinders Folmer in der PAGE 05.2020, wie sich in Glyphs ein Variable Color Font erstellen lässt. Um diesen dann zu animieren braucht es ein wenig Code, den wir hier für Sie zusammen gestellt haben.

 

<html>
<head>
<style>
@font-face {
font-family: “Ice Color”;
src: url(“IceColor.wo_2”) format(“wo_2-variations”);
}
body,td,th{
background-color: #46b4_;
}
@keyframes melting {
0% {font-variation-settings: “wght” 100; }
10% {font-variation-settings: “wght” 100; }
65% {font-variation-settings: “wght” 800; }
90% {font-variation-settings: “wght” 800; }
100% {font-variation-settings: “wght” 100; }
}
p{
font-family: “Ice Color”;
font-size: 70vw;
animation: melting in_nite;
animation-duration: 6s;
animation-timing-function: ease;
}
</style>
</head>
<body>
<p>
M
</p>
</body>
</html>

 

PDF-Download: PAGE 05.2020

Weblayout: Fluide Gestaltungsraster ++ Identities für Floristinnen und Floristen ++ DesignOps in Unternehmen ++ Step by Step: Vom Variable Color Font zur animierten Illu ++ Corporate Language: Branding in Zeiten von Chatbots und Co ++ Agenturen mit Public Space ++ How-to: Video-triggered AR

8,80 €
10,80 €
Lieferzeit: 2-3 Werktage
AGB
Produkt: eDossier »Ratgeber Schriftlizenzen«
eDossier »Ratgeber Schriftlizenzen«
Free Fonts, Desktop-Fonts, Webfonts lizenzkonform nutzen: Das müssen Freelancer, Designbüros und Agenturen beachten

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte Sie auch interessieren