Variable Font Tipps von Charles Nix

Wahrscheinlich haben Sie inzwischen gesehen, dass die Variable Fonts verwendet wird. Diese matschigen, springenden, hüpfenden, animierten Wörter sind überall in unseren Social-Media-Feeds zu sehen, sie lenken unsere Aufmerksamkeit auf Wörter und Überschriften und erregen unsere Aufmerksamkeit. Obwohl die meisten von uns in den letzten Jahren vor allem durch die Animation mit der Variable Fonts in Berührung gekommen sind, ist dies nur die Spitze des Eisbergs dessen, was mit dieser dynamischen neuen Funktion Font möglich ist. Aber was ist eine Variable Font?

Im Grunde genommen ist eine Variable Font alle möglichen Stile einer Schrift in einer Font Datei zusammengefasst. Anstelle von einem Dutzend oder fünf Dutzend einzelner Font Dateien erhalten wir eine Font Datei, in die alle diese Dateien eingebettet sind. Aber selbst das ist ein wenig irreführend (auf eine gute Art und Weise): eine variable Font Datei enthält alle Stile, die wir normalerweise mit Fontsin Verbindung bringen - wie z. B. Variationen in der Gewichtung - aber sie enthält auch das gesamte Spektrum des Raums dazwischen. Es handelt sich also um eine Font Datei mit allen üblichen Schriftstilen und allen möglichen Schattierungen, die man sich nur wünschen kann.

Designer Und da die Variable Font ein Spektrum von Möglichkeiten ist, haben wir, clever wie wir sind, schnell erkannt, dass ein Spektrum gemischt und animiert werden kann. Daher die hüpfenden, sich biegenden Fonts überall. Und es ist nicht nur das Gewicht, das sich biegen kann. Einige variable Fonts haben auch ein Spektrum von Breiten. Darüber hinaus ist es für die Schrift Designer möglich, eine beliebige Anzahl von benutzerdefinierten Achsen (Spektren von Variationen) zu einer Font hinzuzufügen. Dies hat zu noch mehr Experimenten und Ausdrucksmöglichkeiten geführt: Achsen für Schatten, Glanz, Emotionen, Achsen für das Wetter und die Tageszeit und so weiter und so fort.

Das ist eine aufregende neue Funktion für Fonts und eine aufregende neue Zukunft für die Typografie. Lesen Sie weiter, um einen tieferen Einblick in die Variable Fonts mit Myfonts zu erhalten!

Das Format Variable Font reduziert auf magische Weise alle Stile einer Schrift in eine einzige Font Datei. Wie wird das gemacht? Indem es den Anfang und das Ende der Geschichte schreibt und Ihnen die Möglichkeit gibt, alle dazwischen liegenden Ereignisse zu wählen. Variable Font Designer entwerfen die Enden der Reise - zum Beispiel das leichteste und das schwerste Gewicht - und achten darauf, dass jede Station auf dem Weg perfekt funktioniert. Sie planen dann die erwarteten Haltestellen (z. B. leicht, normal, halbfett, fett usw.), lassen aber die Möglichkeit offen, dass man an jedem beliebigen von Hunderten oder Tausenden von Orten zwischen diesen Stationen anhalten möchte. Das Ergebnis ist eine Art unbegrenzter Fahrschein - Tausende von Zielen für einen einzigen Fahrpreis.

Nehmen wir zum Beispiel Avenir Nächste Variable. Die herkömmliche Version von Avenir Nächste enthielt bis zu 60 Font Dateien - von UltraLight bis Heavy und von Condensed bis Regular, plus die Kursivschrift. Das ist eine Menge Font Dateien, die man kaufen und verfolgen muss - und selbst wenn man die gesamte Familie kauft, ist man an die verfügbaren Schriftgrade und -breiten gebunden. Wenn Sie jedoch mit Variable eine etwas leichtere Schriftart für Überschriften oder eine etwas fettere Schriftart für Bildunterschriften oder eine etwas schmalere Schriftart benötigen, um mehr Text auf engem Raum unterzubringen, können Sie dies einfach einstellen. 32.500 mögliche Stile stehen Ihnen für einen Bruchteil der Kosten der bisher verfügbaren 60 Stile zur Verfügung.

Oder nehmen Sie die berühmteste Schrift aller Zeiten: Helvetica. Bei Helvetica Now Variable hat Designer sogar Zugriff auf 2.470.000 mögliche Stile. Das ist ein Spektrum von Variationen in Gewicht, Breite und optischer Größe. Und es ist eine Kombination aus all diesen Achsen. Wenn Sie eine halbfette, halbfette, halbfette, leicht kondensierte Schrift für die Verwendung in wirklich kleinen Schriften benötigen (und wer braucht das nicht?), dann ist Helvetica Now Variable genau das Richtige für Sie. Wenn Sie eine elegante Schrift benötigen, die etwas schlanker als die Normalschrift ist, um sie in großen Überschriften zu verwenden, dann ist Helvetica Now Variable genau das Richtige für Sie. Und auch hier gilt: All diese kreative Feuerkraft steht Ihnen für einen Bruchteil der Kosten der 96 "statischen" Stile der Font zur Verfügung .

Ein Teil dessen, was Variable Fonts in letzter Zeit so populär gemacht hat, ist, dass der Boden in den letzten zwei Jahrzehnten vorbereitet wurde. Webbrowser und das Grundgerüst des Web-Designs, CSS, haben auf die Ankunft von Variable gewartet. Browser sind die Kinosäle von CSS und HTML, und da sowohl HTML als auch CSS "Variable-ready" sind, ist fast jeder Browser der Welt für Variable vorbereitet worden.

Und jede andere Software, mit der Sie Ihre Entwürfe erstellen, ist bereit für Varialble. InDesign? Variable bereit. Illustrator? Variabel bereit. Photoshop? Skizze? Figma? Bereit, bereit, bereit. Wenn Sie es schaffen, wird Variable dabei sein. Also - fangen Sie an!

Mach ein paar Variable Gifs! Legen Sie los. Es gibt tausend und eine Anleitung im Internet unter Hilfe , um Variablen zu animieren. Du wirst Spaß haben! Sie gestalten die Zukunft der Typografie und des Designs mit!

Markieren Sie Ihre Entwürfe: #myfontsvariable

Sie haben sich näher mit Variablen befasst - was sie sind und was sie können und bewirken. Sie werden sich vielleicht fragen: "Wo kann ich einige dieser erstaunlichen Fonts in die Hände bekommen?" Nun... auf Myfonts, natürlich! Es gibt buchstäblich Hunderte davon, die Sie erkunden und kaufen können. Suchen Sie einfach nach "variable Font", um Ihre MyFonts Variable Reise zu beginnen (oder erkunden Sie die großartige Variable Fonts , die in den E-Mails dieser Woche enthalten ist). Die Bandbreite der Möglichkeiten wird Ihre kreativen Säfte in Wallung bringen - von nützlichen Klassikern wie Helvetica Now Variable über verführerische Neuzugänge wie Tom Foleys Cotford Variable bis hin zu versteckten Perlen wie Carl Crossgroves Wakerobin.

Und wenn Sie bereit sind, in die kreativen Möglichkeiten von Variable einzutauchen, schauen Sie sich unbedingt die Codepen-Experimente von der großartigen Mandy Michael oder dieses kurze Tutorial Über zur Verwendung von Variable Fonts und CSS von CSS-Tricks an und erkunden Sie das unglaubliche Potenzial von Variable Fonts für responsive Typografie im Web.

Und es gibt eine Handvoll wirklich großartiger Websites, die die Möglichkeiten von Variable präsentieren: Variable Font von dem unglaublichen Nick Sherman; AxisPraxis von dem brillanten Laurence Penney; der Variable Font Showcase von unseren Freunden bei Monotype und Wenting Zhang und Hua Shu's Font Playground. Probieren Sie sie aus - machen Sie sich die Füße nass - und springen Sie dann in den Pool von Variable Font !

Und vergessen Sie nicht, nach den variablen Arbeiten Ausschau zu halten, die täglich entstehen und in den sozialen Medien präsentiert werden. Talentierte Foundrys, Designer, Agenturen und Marken posten ständig neue variable Arbeiten - und zwar aus der ganzen Welt.

Es ist an der Zeit, die Ärmel hochzukrempeln und einen Blick auf einige der zukunftsweisenden Aspekte dieses erstaunlichen Formats Font zu werfen. Beginnen wir mit der Idee der Achsen. Keine Sorge, wir werden versuchen, es leicht zu halten.

Wie Sie bereits gelernt haben, sind Achsen die "Variationslinien" in Variablen. Das Gewicht (wght) ist die beliebteste Achse und eine, mit der wir uns alle identifizieren können. An einem Ende der Gewichtsachse befindet sich das leichte Ende des Spektrums, am anderen das schwerste. Die Breite (wdth) ist die zweitbeliebteste Achse: von der schmalsten bis zur größten Ausdehnung. Es gibt eine Achse für Kursivschrift (ital): ein einfacher Ein/Aus-Schalter für Kursivschrift in einer Familie. In einigen Variablen Fonts gibt es eine separate Slant-Achse (slnt), mit der der Grad der "Schrägstellung" gesteuert werden kann. Und einige Variablen enthalten eine Achse für die optische Größe (opsz), um verschiedene Stile für sehr kleine Schriften auf der einen und sehr große Schriften auf der anderen Seite zu ermöglichen.

Dies sind die fünf definierten Achsen, aber Designer kann so viele benutzerdefinierte Achsen erstellen, wie sie wollen. Das hat zu einigen wirklich kreativen Erkundungen geführt: die "Wonk"-Achse, um "Wonkigkeit" hinzuzufügen; die "Casual"-Achse für etwas mehr Freundlichkeit; die "Softness"-Achse für eine griffigere Schrift; und so weiter und so fort.

Benutzerdefinierte Achsen sind großartig, aber es gibt einige verblüffende Beispiele, die rund um die Anwendung von Variable Fonts auftauchen. Gestern haben wir den brillanten Jason Pamental's Leitfaden für responsive Typografie mit Variable erwähnt, aber es kann nicht schaden, ihn noch einmal zu erwähnen! Sehen Sie sich diese unglaubliche Anwendung von Variable (von VBAT und Monotype Studio) für Amsteldok an - ein vollwertiges Variable-Logo! Und eine ganz andere Variable-Identität von Superunion (und dem Monotype Studio) für den britischen Versandriesen EVRi.

Die Zukunft der Typografie mit Variable ist strahlend hell. Verleihen Sie der Geschichte Ihre visuelle Stimme!