Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 22. November 2017

Variable Schriften: Einsatzbereit in Adobe und Chrome

Die Idee varia­bler Schriften gibt es schon län­ger. Statt meh­re­rer ver­schie­de­ner Schriftschnitte soll­ten Strichstärke und Schriftweite einer Schrift zukünf­tig varia­bel in einer ein­zel­nen Schriftdatei ver­eint wer­den. Mit der neu­en Creative Cloud von Adobe und dem neu­en Chrome von Google las­sen sich varia­ble Schriften nun auch in der Praxis anwen­den.

Eine Schrift, aber beliebige Strichstärken und Schriftweiten

Bislang muss­ten unter­schied­li­che Strichstärken und Weiten einer Schrift in ein­zel­ne Schnitte auf­ge­teilt wer­den. Bei gut aus­ge­bau­ten Schriften fin­det man Schnitte, deren Strichstärke von „thin“ bis „hea­vy“ geht. Dazu kom­men Schnitte mit unter­schied­li­chen Schriftweiten wie „con­den­sed“, „com­pres­sed“ oder „wide“. In Kombination ent­ste­hen nicht sel­ten dut­zen­de ein­zel­ne Schnitte pro Schrift – vor allem wenn man die kur­si­ven Schnitte in ver­schie­de­nen Variationen auch noch dazu rech­net.

Bei den neu­en varia­blen Schriften sind alle die­se ein­zel­nen Merkmale in einem ein­zel­nen Schnitt ver­eint. Besser noch: Die Strichstärke und die Schriftweite kön­nen stu­fen­los ange­passt wer­den. Bislang war man auf fest­ge­leg­te Werte ange­wie­sen. Mit varia­blen Schriften ist man wesent­lich fle­xi­bler unter­wegs und kann die Strichstärke pass­ge­nau für ver­schie­de­ne Schriftgrößen anpas­sen.

Formal han­delt es sich bei den neu­en varia­blen Schriften um OpenType-Schriften der Version 1.8. Bei dem Format wer­den Eigenschaften für das Aussehen einer Schrift defi­niert – ein­schließ­lich der mög­li­chen Strichstärken und Schriftweiten. Die jewei­li­ge Darstellung der Schrift mit bestimm­ten Werten wird über die Anwendung – zum Beispiel Adobes Illustrator oder Googles Chrome – inter­po­liert.

Creative Cloud 2017 unterstützt variable Schriften

Dass es bis­lang kaum varia­ble Schriften gibt, liegt natür­lich auch dar­an, dass man sie bis­lang ein­fach nicht ein­set­zen konn­te. Mit der neu­en Version der Creative Cloud hin­ge­gen las­sen sich die neu­en Schriften end­lich auch anwen­den.

So unter­stüt­zen jetzt zum Beispiel Illustrator und Photoshop varia­ble Schriften. Hat man eine sol­che Schrift aus­ge­wählt, gibt es im „Zeichen“-Fenster ein zusätz­li­ches Icon, wel­ches ein Fenster mit drei Schieberegler öff­net. Dort kannst du dann die Stärke, Breite und Neigung der Schrift defi­nie­ren.

Variable Schriften in Adobe Illustrator

Darüber hin­aus besteht auch wei­ter­hin die Möglichkeit, vor­de­fi­nier­te Schnitte wie “Bold Condensed Italic” aus­zu­wäh­len, ohne die Einstellungen selbst vor­zu­neh­men.

Natürlich lie­fert Adobe auch gleich ers­te varia­ble Schriften mit. So sind die „Myriad“, „Minion“, „Acumin“, und „Source“ fort­an als varia­ble Schriften in der Creative Cloud ent­hal­ten.

Auch Chrome 62 unterstützt variable Schriften

Fast zeit­gleich mit Adobe hat auch Google eine neue Version sei­nes Browsers Chrome her­aus­ge­bracht, der varia­ble Schriften unter­stützt. Denn varia­ble Schriften las­sen sich auch als Webfonts bereit­stel­len und in gewohn­ter Weise in ein Stylesheet ein­bin­den.

So kannst du dir in Chrome 62 mit den bekann­ten CSS-Eigenschaften „font-weight“, „font-stretch“ und „font-style“ dei­nen eige­nen Schnitt zusam­men­stel­len, ohne per „@font-face“ meh­re­re Schriftdateien ein­bin­den zu müs­sen.

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 genann­ten CSS-Eigenschaften unter­stüt­zen aller­dings nur gän­gi­ge Werte. So kennt „font-weight“ neben den Schlüsselwörtern „nor­mal“ und „bold“ auch Zahlen wie „100“ und “900”. Die Bandbreite der Möglichkeiten ist mit­un­ter jedoch grö­ßer als die Werte, wel­che die Eigenschaften „font-weight“, „font-stretch“ und „font-style“ ken­nen.

Mit der der CSS-Eigenschaft „font-varia­ti­on-set­tings“ hast du jedoch Zugriff auf alle Eigenschaften einer OpenType-Schrift. Je nach Schrift ste­hen dir also zusätz­li­che Werte zur Verfügung, wel­che die nor­ma­len „font-*“-Eigenschaften nicht unter­stüt­zen.

So defi­nierst 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 zwei­te Beispiel ent­hält die iden­ti­schen Werte für die Stärke und Weite, aller­dings über die „font-variation-settings“-Eigenschaft defi­niert.

Die Eigenschaft „font-varia­ti­on-set­tings“ hat im Übrigen noch den Vorteil, dass sie ani­mier­bar ist. Zusammen mit der CSS-Eigenschaft „tran­si­ti­on“ oder „ani­ma­ti­on“ las­sen sich auf die­se Weise auch schö­ne beweg­li­che Texteffekte rea­li­sie­ren.

Zur Hervorhebung eines Textes kann dann zum Beispiel die Strichstärke oder die Schriftweite per Animation ver­än­dert wer­den.

Wie varia­ble Schriften im Einsatz aus­se­hen, kannst du dir auf der Seite Axispraxis anschau­en. Du wählst zwi­schen ver­schie­de­nen varia­blen Schriften aus und hast dann die Möglichkeit, anhand von Schiebereglern die Strichstärke und Schriftweite anzu­pas­sen.

Variable Schriften auf Axispraxis

Per JavaScript wer­den dabei die ent­spre­chen­den CSS-Eigenschaften dyna­misch ver­än­dert.

Ein wei­te­rer Vorteil varia­bler Schriften – vor allem im Webdesign – ist die gerin­ge­re Dateigröße. Statt meh­re­re Schriftdateien ist fort­an nur noch eine Datei nötig, in wel­cher die Schriftinformationen wesent­lich kom­pak­ter unter­ge­bracht sind.

Weitere Browserunterstützung und Einsatzmöglichkeiten

Neben dem Chrome unter­stützt auch Apples Safari bereits varia­ble Schriften. Das ist inso­fern nicht ver­wun­der­lich, weil das neue Schriftformat von Adobe, Microsoft und Apple ent­wi­ckelt wur­de. Aber auch ande­re Browser wer­den in naher Zukunft nach­zie­hen.

Neben Schriften las­sen sich mit dem neu­en Format im Übrigen auch Iconfonts rea­li­sie­ren, bei denen sich dann zum Beispiel die Strichstärke der Icons dyna­misch anpas­sen lässt.

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

Denis Potschien

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.

Schreibe einen Kommentar

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