Typografie

Code für Variable Color Font in Glyphs

27.04.2020 von Antje Dohmann | Lesezeit: ca. eine Minute

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.

Variable Fonts Achter Schritt: Punkte justieren Arthur Reiners Folmer

Um den Code nicht abtippen zu müssen, können Sie sich den Code hier kopieren. Die einzelnen Schritte bis zum animierten Color Font lesen Sie in der PAGE 05.2020 oder als PAGE+-Abonnent online.

<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

Produkt-Details anzeigen

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 €

AGB