Share
Variable Schriftarten wurden in Zusammenarbeit mit den vier größten Tech-Unternehmen entwickelt, die am Typ Design beteiligt sind - Apple, Google, Microsoft und Adobe. Wie der Name vermuten lässt, ermöglichen variable Schriften den Designern, eine unbegrenzte Anzahl von Schriftvarianten aus derselben Schriftdatei abzuleiten. Auf diese Weise wird es möglich, die Schriftart an verschiedene Geräte, Ansichtsfenster, Ausrichtungen und andere Designbeschränkungen anzupassen.
Variable Schriften reduzieren die Einschränkungen der aktuellen Schriftformate erheblich. Heutige Webfonts sind unflexibel und lassen sich nicht gut skalieren. Sie geben uns nur einige feste Stile mit Namen wie "Light", "Bold" oder "Extra Bold". Es gibt sogar Schriften, die nur eine Gewichts- oder Schrägvariante haben. Mit variablen Schriftarten haben wir jedoch eine unendliche Flexibilität in Bezug auf Gewicht, Neigung, x-Höhe, Platten, Rundung und andere typografische Attribute.
Besser noch, variable Schriftarten verbessern die Leistung. Web-Fonts, wie wir sie kennen, benötigen, dass jede Font-Variante in einer separaten Datei gespeichert wird. So sieht zum Beispiel der Ordner der Roboto-Webschriftart aus:
Inhalt des Roboto-WebzeichensatzordnersVariable Schriftarten verwenden eine einzige Schriftartdatei, die der Browser nur einmal laden muss. Nach dem Laden kann es alle Varianten eines einzigen Binärprogramms bedienen.
Hier ist ein kurzer Vergleich:
Wie Sie sich schon vorstellen können, wachsen unsere typografischen Optionen mit variablen Schriftarten enorm.
Welches Dateiformat verwenden variable Schriftarten? Laut den offiziellen Dokumenten:
"OpenType-Schriftarten können die Erweiterung .OTF oder .TTF haben, abhängig von der Art der Gliederung der Schriftart und dem Wunsch des Erstellers nach Kompatibilität auf Systemen ohne native OpenType-Unterstützung."
Um ganz genau zu sein, wurden in Version 1.8 der OpenType-Schriftartendateispezifikation variable Schriftarten eingeführt. OpenType ist eine Erweiterung des TrueType-Schriftformats. Variable Schriftarten sind daher als beide verfügbar .otf oder .ttf Dateien.
Die neue Spezifikation der OpenType-Schriftartdatei umfasst eine neue Technologie namens OpenType Font Variations, die es uns ermöglicht, die Schriftart entlang zahlreicher Konstruktionsachsen bis zu 64.000 zu interpolieren (laut Adobe Typekit Blog).
Die OpenType 1.8-Spezifikation definiert fünf registrierte Achsen-Tags:
Accentsconagua
Darüber hinaus können Typdesigner benutzerdefinierte Achsen zusammen mit ihren eigenen vierstelligen Tags in der "Name" -Tabelle der Schriftartdatei definieren.
Unten sehen Sie eine gute Illustration der Funktionsweise von Designachsen (aus John Hudsons Artikel auf Medium.com, der von Typekit als nicht offizielle Ankündigung von variablen Schriftarten bezeichnet wird). Es zeigt eine dreiachsige variable Schriftart mit Achsen für die Stärke, die Breite und die optische Größe:
John HudsonDie rote Glyphe in der Mitte stellt die Gruppe der Konturen dar, die in der Schriftart gespeichert sind, die grünen Glyphen repräsentieren die Extrema der drei Achsen und die orangen Glyphen repräsentieren die Eckpositionen.
Der gesamte Cube stellt den Designraum dar, auf den wir zugreifen können, wenn wir diese dreiachsige variable Schriftart verwenden. Es ist nur ein Würfel, weil die Schrift drei Dimensionen hat (Gewicht, Breite, optische Größe). Mit weniger Achsen bewegen wir uns nach unten in Richtung eines Rechtecks (2 Achsen) oder einer Linie (1 Achse) und mit mehr Achsen bewegen wir uns nach oben in einen mehrdimensionalen Hyperraum.
Natürlich ist eine echte 3-Achsen-Variable nicht unbedingt ein Würfel, sondern eher ein rechteckiger Quader, da die verschiedenen Achsen in den meisten Fällen nicht die gleiche Länge haben.
Variable Schriftarten ermöglichen es Typ-Designern weiterhin, benannte Instanzen spezifische Schriftartvarianten unter der unbegrenzten Anzahl von Optionen zu definieren. Zum Beispiel enthält der Variable Font-Prototyp von Adobe zwei Achsen (Gewicht und Kontrast) und acht benannte Instanzen (Extra Light, Light, Regular, Semibold, Fett, Schwarz, Schwarz, Mittlerer Kontrast, Schwarzer Kontrast)..
Benannte Instanzen sind wichtiger, wenn Sie eine variable Schriftart mit Designprogrammen wie Adobe Illustrator verwenden möchten. Im Web können wir problemlos jede Instanz (benannt oder unbenannt) mit CSS generieren (z. B. nimmt die in Extra Variable genannte Instanz von Adobe den minimalen Wert der Gewichts- und der Kontrastachse ein)..
Wir können einer Website variable Schriftarten hinzufügen, indem Sie die @ font-face-Regel oben in der CSS-Datei verwenden.
Zum Beispiel können wir die Avenir Next-Variable mit der folgenden CSS-Regel hinzufügen:
@ font-face font-family: "Avenir Next Variable"; src: url ("AvenirNext_Variable.ttf") format ("truetype"); Weitere variable Schriftarten finden Sie auf der Axis Praxis-Website (sie hat auch einen Spielplatz für variable Schriftarten), auf den GitHub-Seiten verschiedener Typ-Design-Unternehmen (z. B. MonoType, Type Network), und Typekit hat mit der Veröffentlichung der Versionen der variablen Schriftarten begonnen der beliebtesten Adobe Originals-Familien.
Hinweis: Nicht jede OpenType-Schriftart, die Sie im Internet finden, ist eine variable Schriftart (sie wurde nur mit Version 1.8 eingeführt)..
Um Schriftvariationen zu definieren, können wir die Font-Variation-Einstellungen CSS-Eigenschaft, die mit CSS Font Module Level 4 eingeführt wurde. Dies ist eine Eigenschaft auf niedriger Ebene, mit der variable Schriftarten durch Angabe eines Werts für jede Achse gesteuert werden können.
Die Avenir Next-Variable enthält zwei Designachsen: Gewicht und Breite - beide sind registrierte Achsen. Avenir Next verfügt außerdem über acht benannte Instanzen (Normal, Mittel, Fett, Schwer, Kondensiert, Mittelkondensiert, Fett Kondensiert, Schwer Kondensiert)..
Avenir Next Bold CondensedDas vollständige CSS (das zu einer zufälligen, unbenannten Schriftvariante gehört) sieht folgendermaßen aus:
body font-family: "Avenir Next Variable"; Farbe: rgb (0, 0, 0); Schriftgröße: 148px; Font-Variation-Einstellungen: 'wght' 631.164, 'wdth' 88.6799;
Wir können einen beliebigen Wert (gerade Gleitkommazahlen) für die Achsen zwischen den minimalen und maximalen Werten verwenden. Im Falle von Avenir Next können wir den Gewichtsbereich [400, 900] und den Breitenbereich [75, 100] verwenden.
Wo finde ich die Bereiche? Die Schriftartendateien enthalten die Fontvariationstabellen (fvar), die die erforderlichen Daten enthalten. Um auf diese Informationen zuzugreifen, müssen wir jedoch den Inhalt der Schriftartdatei mit einem Tool wie FontView anzeigen. Manchmal enthält die Dokumentation der Schrift die Bereiche, dies ist jedoch leider nicht immer der Fall. Die gute Nachricht ist, dass die Axis Praxis-Website die Min-Max-Werte für alle variablen Schriftarten enthält, die sie bietet.
Decovar ist eine der vielseitigsten variablen Schriftarten, die derzeit existieren. Sie finden es auf Axis Praxis, auf GitHub, und es gibt auch eine Demo-Seite auf der TypeNetwork-Website. Decovar enthält eine eingetragene (Gewicht) und vierzehn benutzerdefinierte Achsen sowie siebzehn benannte Instanzen.
In Decovars GitHub-Dokumenten finden Sie einige Varianten, die wir mit dieser 15-Achsen-Variablenschrift erreichen können:
Das CSS, das wir verwenden müssen, ähnelt dem vorherigen Beispiel. Hier müssen wir alle fünfzehn Achsen definieren (Inline, geschert, abgerundete Platte, Streifen, Schneckenterminal, Inline-Skelett, offenes Inline-Terminal, Inline-Terminal, Schnecke, Gewicht, aufgeweitet, abgerundet, Schneckengerüst, Platte, gegabelt)..
div font-family: Decovar; Farbe weiß; Hintergrundfarbe: rgb (0, 162, 215); Schriftgröße: 157,12px; Text ausrichten: links; Polsterauflage: 20px; Schriftart-Variation-Einstellungen: 'INLN' 285.094, 'TSHR' 346.594, 'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 'TOIL' 0, 'TINL' 91.983, 'WORM' 0 "mit 400", "TFLR" 0, "TRND" 0, "SWRM" 0, "TSLB" 277.155, "TBIF" 0;
Hinweis: Wir müssen einen Wert für alle Achsen in angeben Font-Variation-Einstellungen Immobilien - auch diejenigen, die wir nicht nutzen wollen.
Im Falle von Decovar können wir verwenden 0 als Wert für die Achsen sind wir nicht interessiert; Diese werden mit dem Standardwert gerendert. Dies ist jedoch nicht immer der Fall, da dies von den Bereichen abhängt, die die Schrift für die verschiedenen Achsen verwendet. Decovar ist einfach, da für alle Achsen ein Bereich von 0-1000 verwendet wird und 0 der Standardwert für alle Achsen ist.
Sie können ähnlich generieren Font-Variation-Einstellungen Deklarationen mit Axis Praxis müssen Sie die Werte nicht selbst berechnen. Das CSS oben generiert die folgende Schriftartvariante:
Decovar-SchriftartvarianteDas Font-Variation-Einstellungen property ist eine einfache Eigenschaft und sollte gemäß den W3C-Empfehlungen nur verwendet werden, wenn keine anderen Methoden verfügbar sind. Was heißt das genau??
Nach den CSS 4-Spezifikationen können wir in Zukunft registrierte Achsen mit übergeordneten CSS-Eigenschaften steuern, und zwar:
Schriftgewicht (wird das kontrollieren mit Achse)Font-Stretch (wird das kontrollieren wdth Achse)Schriftstil (wird das kontrollieren slnt und ital Achsen)Schrift-optische Größenanpassung (wird das kontrollieren opsz Achse)Die ersten drei Eigenschaften existieren seit CSS2, die CSS4-Spezifikationen erweitern jedoch ihre Verwendung. Wir können sie nicht nur mit vordefinierten Schlüsselwörtern verwenden (z. normal oder Fett gedruckt zum Schriftgewicht) oder runde Zahlen (z. 400, 600, 800, usw.), aber auch mit allen Zahlen einer vordefinierten Skala (z. B., Schriftgewicht wird im Bereich zwischen 1 und 1000 liegen Font-Stretch liegt zwischen 50% und 200%).
Diese Funktionen befinden sich jedoch noch in der experimentellen Phase. Für den Moment ist es sinnvoll, weiter zu verwenden Font-Variation-Einstellungen, Dies ist derzeit die stabilste Eigenschaft für den Zugriff auf die Achsen der variablen Schriftarten.
Da variable Schriftarten noch sehr neu sind, ist die Browserunterstützung noch nicht perfekt. Die neuesten Versionen von Chrome und Safari unterstützen sie bereits, jedoch bleiben Edge und Firefox noch hinterher (variable Schriftarten sind jedoch bereits in Firefox Nightly und Firefox Developer Edition verfügbar). Photoshop und Illustrator unterstützen seit der Veröffentlichung vom Oktober 2017 auch variable Schriftarten.
Wir können erwarten, dass variable Schriftarten unglaubliche Veränderungen in der Welt der Web-Typografie bewirken. Da es immer mehr Unterstützung bekommt, ist es an der Zeit, etwas zu lernen und zu experimentieren. Schauen Sie sich die folgenden Ressourcen an:
