Variable Schriften: Einsatzbereit in Adobe und Chrome

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Die Idee variabler Schriften gibt es schon länger. Statt mehrerer verschiedener Schriftschnitte sollten Strichstärke und Schriftweite einer Schrift zukünftig variabel in einer einzelnen Schriftdatei vereint werden. Mit der neuen Creative Cloud von Adobe und dem neuen Chrome von Google lassen sich variable Schriften nun auch in der Praxis anwenden.

Eine Schrift, aber beliebige Strichstärken und Schriftweiten

Bislang mussten unterschiedliche Strichstärken und Weiten einer Schrift in einzelne Schnitte aufgeteilt werden. Bei gut ausgebauten Schriften findet man Schnitte, deren Strichstärke von „thin“ bis „heavy“ geht. Dazu kommen Schnitte mit unterschiedlichen Schriftweiten wie „condensed“, „compressed“ oder „wide“. In Kombination entstehen nicht selten dutzende einzelne Schnitte pro Schrift – vor allem wenn man die kursiven Schnitte in verschiedenen Variationen auch noch dazu rechnet.

Bei den neuen variablen Schriften sind alle diese einzelnen Merkmale in einem einzelnen Schnitt vereint. Besser noch: Die Strichstärke und die Schriftweite können stufenlos angepasst werden. Bislang war man auf festgelegte Werte angewiesen. Mit variablen Schriften ist man wesentlich flexibler unterwegs und kann die Strichstärke passgenau für verschiedene Schriftgrößen anpassen.

Formal handelt es sich bei den neuen variablen Schriften um OpenType-Schriften der Version 1.8. Bei dem Format werden Eigenschaften für das Aussehen einer Schrift definiert – einschließlich der möglichen Strichstärken und Schriftweiten. Die jeweilige Darstellung der Schrift mit bestimmten Werten wird über die Anwendung – zum Beispiel Adobes Illustrator oder Googles Chrome – interpoliert.

Creative Cloud 2017 unterstützt variable Schriften

Dass es bislang kaum variable Schriften gibt, liegt natürlich auch daran, dass man sie bislang einfach nicht einsetzen konnte. Mit der neuen Version der Creative Cloud hingegen lassen sich die neuen Schriften endlich auch anwenden.

So unterstützen jetzt zum Beispiel Illustrator und Photoshop variable Schriften. Hat man eine solche Schrift ausgewählt, gibt es im „Zeichen“-Fenster ein zusätzliches Icon, welches ein Fenster mit drei Schieberegler öffnet. Dort kannst du dann die Stärke, Breite und Neigung der Schrift definieren.

Variable Schriften in Adobe Illustrator

Darüber hinaus besteht auch weiterhin die Möglichkeit, vordefinierte Schnitte wie “Bold Condensed Italic” auszuwählen, ohne die Einstellungen selbst vorzunehmen.

Natürlich liefert Adobe auch gleich erste variable Schriften mit. So sind die „Myriad“, „Minion“, „Acumin“, und „Source“ fortan als variable Schriften in der Creative Cloud enthalten.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Auch Chrome 62 unterstützt variable Schriften

Fast zeitgleich mit Adobe hat auch Google eine neue Version seines Browsers Chrome herausgebracht, der variable Schriften unterstützt. Denn variable Schriften lassen sich auch als Webfonts bereitstellen und in gewohnter Weise in ein Stylesheet einbinden.

So kannst du dir in Chrome 62 mit den bekannten CSS-Eigenschaften „font-weight“, „font-stretch“ und „font-style“ deinen eigenen Schnitt zusammenstellen, ohne per „@font-face“ mehrere Schriftdateien einbinden zu müssen.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-weight: 700;
  font-stretch: 75;
}

Im Beispiel wird für ein „<h1>“-Element die Strichstärke auf 700 und die Schriftweite auf 75 gesetzt.

Die genannten CSS-Eigenschaften unterstützen allerdings nur gängige Werte. So kennt „font-weight“ neben den Schlüsselwörtern „normal“ und „bold“ auch Zahlen wie „100“ und “900”. Die Bandbreite der Möglichkeiten ist mitunter jedoch größer als die Werte, welche die Eigenschaften „font-weight“, „font-stretch“ und „font-style“ kennen.

Mit der der CSS-Eigenschaft „font-variation-settings“ hast du jedoch Zugriff auf alle Eigenschaften einer OpenType-Schrift. Je nach Schrift stehen dir also zusätzliche Werte zur Verfügung, welche die normalen „font-*“-Eigenschaften nicht unterstützen.

So definierst du zum Beispiel per „wght“ die Strichstärke und per „wdth“ die Schriftweite einer Schrift.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-variation-settings: “wght” 700, “wdth” 75;
}

Das zweite Beispiel enthält die identischen Werte für die Stärke und Weite, allerdings über die „font-variation-settings“-Eigenschaft definiert.

Die Eigenschaft „font-variation-settings“ hat im Übrigen noch den Vorteil, dass sie animierbar ist. Zusammen mit der CSS-Eigenschaft „transition“ oder „animation“ lassen sich auf diese Weise auch schöne bewegliche Texteffekte realisieren.

Zur Hervorhebung eines Textes kann dann zum Beispiel die Strichstärke oder die Schriftweite per Animation verändert werden.

Wie variable Schriften im Einsatz aussehen, kannst du dir auf der Seite Axispraxis anschauen. Du wählst zwischen verschiedenen variablen Schriften aus und hast dann die Möglichkeit, anhand von Schiebereglern die Strichstärke und Schriftweite anzupassen.

Variable Schriften auf Axispraxis

Per JavaScript werden dabei die entsprechenden CSS-Eigenschaften dynamisch verändert.

Ein weiterer Vorteil variabler Schriften – vor allem im Webdesign – ist die geringere Dateigröße. Statt mehrere Schriftdateien ist fortan nur noch eine Datei nötig, in welcher die Schriftinformationen wesentlich kompakter untergebracht sind.

Weitere Browserunterstützung und Einsatzmöglichkeiten

Neben dem Chrome unterstützt auch Apples Safari bereits variable Schriften. Das ist insofern nicht verwunderlich, weil das neue Schriftformat von Adobe, Microsoft und Apple entwickelt wurde. Aber auch andere Browser werden in naher Zukunft nachziehen.

Neben Schriften lassen sich mit dem neuen Format im Übrigen auch Iconfonts realisieren, bei denen sich dann zum Beispiel die Strichstärke der Icons dynamisch anpassen lässt.

Das neue Format der variablen Schriften wird für Grafik- und Webdesigner also eine große Bereicherung sein.

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz