TwitterFacebookCallback


Melanie Gerber
Art Direction
 
041 318 34 53
m.gerberbag.ch
Newsletter abonnieren

10.10.2018

Kategorie: Design & Interactive


Variable Fonts – Yoga für Buchstaben

 

Ende August fand in Zürich die internationale «Frontend Conference» statt. Zwei Tage News und Inspiration aus der Tech- und Design-Sparte. Ein Vortrag hat mich besonders gefesselt: der Österreicher Oliver Schönfelder stellte die Technologie der variablen Fonts vor. Ein kleiner Einblick in diese bewegende Typo-Welt.

 

 

Was sind variable Fonts?

Variable Fonts sind eine Erweiterung des bekannten Open-Type-Fonts-Formates (OTF). Diese Erweiterung lässt zu, nicht nur auf die bestehenden Schnitte (regular, bold, italic) einer Schrift zurückzugreifen, sondern z.B. die Strichstärke der Schrift individuell zu steuern. Aber nicht nur die Strichstärke, auch die Zeichenbreite oder -neigung kann beeinflusst und nach Gusto justiert werden – dies natürlich mit entsprechenden Programmen. Zurzeit stehen noch nicht viele Schriften in diesem neuen Format zur Verfügung. Ich denke aber, dass künftig mehr dazukommen werden.

 

 

 

Wie verwende ich variable Fonts?

Mit einem weiteren Update der Adobe-CC-Programme kann ich die Funktion der variablen Fonts zum Beispiel direkt in Illustrator anwenden. Voraussetzung dafür ist, dass die Fonts entsprechend dafür konzipiert wurden. Mit dem Einsatz von Adobe Typekit erkenne ich diese tauglichen Schriften daran, dass sie nebst dem gewohnten «O» (für OTF) den Zusatz «VAR» bekommen. Sobald ich diesen Font auswähle, z.B. Acumin Variable Concept, bekomme ich beim Menü «Zeichen» einen zusätzliche Funktionsfläche (siehe Bild, roter Kreis). Mit einem Klick darauf öffnet sich ein Menü, in dem ich dann meinen Font beliebig steuern kann – und das in sehr feinen Abstufungen.

 

 Im Menüfenster «Zeichen» in Adobe Illustrator erscheint eine neue Funktionsfläche, sobald ein variabler Schriftschnitt ausgewählt wurde.

Im Menüfenster «Zeichen» in Adobe Illustrator erscheint eine neue Funktionsfläche, sobald ein variabler Schriftschnitt ausgewählt wurde.

 

 

Wo setze ich variable Fonts ein?

Okay, es grenzt schon an Spielerei mit diesen unzähligen Möglichkeiten, Schriften zu kombinieren ... Aber wenn ich an das Medium Web denke, sehe ich schon sinnvolle Anwendungsmöglichkeiten. Zum Beispiel können Headlines auf eine effektvolle Art visualisiert werden. Im Printbereich sieht es schon wieder anders aus, dort kann ich natürlich keine bewegte SVG-Animation machen. Hier sehe ich aber Vorteile darin, dass ich Einfluss nehmen kann auf die Strichstärke. Denn je nach Bedruckstoff habe ich unterschiedliche Anforderungen an die Typografie und ihre Lesbarkeit.

 

Beispiele, wie einfach Strichstärke oder Zeichenbreite verändert werden können.

Beispiele, wie einfach Strichstärke oder Zeichenbreite verändert werden können.

Beispiele, wie einfach Strichstärke oder Zeichenbreite verändert werden können.

  Beispiele, wie einfach Strichstärke oder Zeichenbreite verändert werden können.

 

 

Kleiner Wermutstropfen

Variable Typografie tönt spannend, vielseitig und setzt der Kreativität fast kein Ende. Doch ein kleiner Wermutstropfen hat diese neue Font-Technologie dennoch. Wer eine Animation für eine Website plant, muss wissen, dass diese Technologie noch nicht für alle Browser spruchreif ist. Aber nichtsdestotrotz: Ausprobieren und sich an den Ergebnissen freuen lohnt sich alleweil.

Kommentare (4)
Vollmeier Martin schrieb am 18.10.2018Hallo Melanie Danke für den Blog zum Thema variable Fonts. Dazu meine Überlegungen: Adrian Frutiger und andere Schriftentwickler würden sich im Grab umdrehen! Neu ist ja die Sache nicht, Schriften können seit langem beliebig vergewaltigt werden. Aber die variablen Fonts laden geradezu ein, dies auch zu tun. Ich finde, dass ein professionelles Medienhaus nicht die Schrift als Tummelfeld für die Gestaltung anpreisen soll, sondern eben alles andere: Farben, Bilder, Grafiken, gute, freche Gestaltung. Schrift dient der Kommunikation. Sätze sollen ohne Stolpersteine ins Hirn rutschen und Verständigung ermöglichen . Ich ärgere mich oft, wenn die junge Kulturszene Publikationen verbreitet, die kaum mehr zu lesen sind – weil Schriften zur Unkenntlichkeit verzerrt werden. Insofern sind variable Fonts wohl eine unprofessionelle Geldmacherei von Programmierern, die sich kaum je über Grundsätze der schriftlichen Kommunikation Gedanken gemacht haben. Nüt für Ungut und liebe Grüsse, Martin
Dani B.  schrieb am 19.10.2018@Vollmeier Martin scheinst mir ein ``Nerd`` auf deinem Gebiet zu sein. Ich bin sehr intressiert an Leuten, die sich in einem Themengebiet sehr, sehr gut auskennen. Ich selbst würde mich als Hosting & Webtechnik Nerd bezeichne n. Leider hat mein Tag zu wenig Stunden um mich noch zusätzlich, vertieft in verwandte Themen zu stürzen. Trotzdem verspühre ich riesiges Intresse und suche nun andere Themen Nerds, die Lust haben sich auszutauschen und zu profitieren. Es besteht null kommerzielle Absicht, nur das teilen von Wissen & Leidenschaft. Martin meld dich doch via danielbieli@outlook.de (Spam Adresse, Antwort kann 1-2 Tage dauern). Alle anderen dürfen mich ebenfalls kontaktieren. System Requirements: IT & Design und du liebst was du tust, auch wenns nicht immer gesund ist. ;-) Grüsse Daniel
Fischer Thomas schrieb am 22.10.2018@MartinVollmeier: Lieber Martin - schön von dir zu lesen. Ich gebe dir vollkommen recht. Schriften wurden mit einem enormen Aufwand entwickelt, um sich genau so zu verhalten, wie es vom Erfinder angedacht wurde. Diese Grundwerte der Typografie sind zu wahren und zu verteidigen. Aber: Es wirkt eine neue Dimension. In der Online-Welt, wird das animierte Manipulieren von Schriften durchaus gerechtfertigt, oder sogar ganz einfach notwendig. Man stelle sich als Beispiel die Bedienung eines Text-Links auf dem Smartphone per Berührung vor: Eine leichte Animation oder «Feedback», welches Benutzern zu erkennen geben kann, dass sie oder er eben mit dem Finger eine Aktion ausgelöst hat. Die minimale Dynamik – zum Beispiel ein leichtes Pulsieren der Schrift - reicht dazu bereits aus. Auch ich bin kein Fan von sinnloser Veränderung der aufwändig erstellten Schriften – aber eben für das Thema der Bedienbarkeit – oder neudeutsch «Usability» oder «User Experience» werden diese Techniken wichtig und sinnvoll. Im Print eher weniger ;-) Herzliche Grüsse und zeig dich mal wieder!
Züger Mike schrieb am 25.10.2018@Vollmeier Martin: Hallo Martin. Schön zu lesen, dass du dich immer noch mit deiner bekannten Leidenschaft dem Thema Typografie verschrieben hast. Ich bin mit deiner Ansicht aber nicht ganz einverstanden. Grundsätzlich geht es hier um das Thema Variable „Web“ Fonts. Und dieses Thema ist ziemlich neu. Ich war als Entwickler auch selbst vor Ort mit Melanie und durfte den spannenden Vortrag miterleben. Du musst sehen, dass es hier – wie von Thomas schon erwähnt – um ein eigenes Medium geht. In der Web-Welt eröffnen sich durch „Variable Web Fonts“ spannende neue Möglichkeiten. Der Grundgedanke dahinter ist genau der, dass Schriften durch professionelle Schriftdesigner erstellt werden. Die Schrift wird nun aber nicht für Print, sondern für eine dynamische Ausgabe konzipiert. Es werden also nicht für jeden Schriftschnitt wie zum Beispiel „normal/bold/extended“ eigene Schriftsätze erstellt, sondern lediglich ein globaler Satz. Der Schriftgestalter hat nun die nicht ganz triviale Aufgabe, Achsen (axis) zu definieren, in welchen die Schrift verändert werden kann. Nun muss er sämtliche Zwischenstufen der einzelnen „Vektorpunkte“ des Fonts definieren und wie sich diese verhalten, wenn die Schrift z. B. horizontal gestreckt wird. Letztendlich passiert dies durch Programmierung (CSS), dynamisch und direkt im Webbrowser. Vorteile die dadurch entstehen können, sind z. B. Verringerung der Ladezeiten, weil – abhängig vom Design – nicht mehrere Schriftvarianten eingebunden werden müssen. Je nach Lizenzmodell und Preis des „Variable Fonts“ auch Kosteneinsparungen, weil nicht mehrere Schriftschnitte eingekauft werden müssen. Weiter kann responsiver Textinhalt besser (dynamisch) auf unterschiedlichsten Geräten ausgegeben werden. Auf einem Tablet kann zum Beispiel eine Schrift (aus einem Schnitt!) als „condensed“ angezeigt werden, während auf dem Desktop der Font „normal“ angezeigt wird. Es geht hier also nicht um einfaches „verzerren“, sondern um kontrolliertes ansteuern bereits vorher definierter Schrift-Zwischenstufen. Adrian Frutiger hätte vielleicht seine helle Freude, könnte er für die heutige Zeit und die neuen Ausgabemedien Schriften gestalten. Ich behaupte also einfach mal, einen schönen „Variable Web Font“ zu erstellen ist bei weitem anspruchsvoller, als einen „einfachen Printfont“. Ich als Webentwickler musste mich jahrelang mit dieser Thematik auseinandersetzen, da wir Anforderungen von Grafikern und Agenturen zum Thema „Typografie“ und sogar „Mikrotypografie“ im Web nur schwer gerecht werden konnten. Wir haben auch immer davon abgeraten, Schriften mit irgendwelchen technischen Tricks zu „vergewaltigen“ oder komische Scripts einzubauen, um „Pixelschieberei“ im Schriftbereich zu ermöglichen. Die Zeiten haben sich aber mit solchen Entwicklungen grundlegend geändert. Schriftschnitte haben bis jetzt im Web immer die Gestaltungsmöglichkeiten limitiert. Grafikdesigner können sich also freuen, über die unendlichen neuen Möglichkeiten die sich ihnen in Zukunft bieten. „Wer nicht mit der Zeit geht, geht mit der Zeit“ – Herzlichste Grüsse Mike


Zur ÜbersichtMehr Artikel dieses AutorsMehr Artikel dieser Kategorie

Teilen Sie uns Ihre Meinung oder Anfrage mit


Gerne ergänzen wir unsere Beiträge mit Ihren Meinungen und Kommentaren.