PAGE online

Das können Sie mit Variable Fonts jetzt schon machen

Flexibel und anpassungsfähig in Web und Print: Die neue OpenType-Technologie Variable Fonts ist der Hoffnungsträger für hochqualitative Typografie im Web. Was genau können die neuen OpenType-Schriften und wem nützen sie?

● Menschen jenseits der vierzig hatten ein Déjà-vu, als Apple, Adobe, Google und Microsoft kürzlich die neueste OpenType-Spezifikation veröffentlichten. Sie umfasst nun Variable Fonts, eine Technologie, die stufenlos wählbare Zwischenschritte aus einer einzigen Fontdatei heraus ermöglicht. Hat es nicht genau das schon in den 1990er Jahren mit den Multiple Master Fonts gegeben? »Stimmt, das technische Format ist nicht neu«, sagt Indra Kupferschmid, »variable Fonts aber können mehr. Sie erlauben es nicht nur, die Strich stärke stufenlos zu verändern, sondern auch jede Interpolationsachse anzulegen, zu der man Lust hat: Breite, x-Höhe, Kontrast, Serifenlänge, Punzengröße, Punktdekor, was auch immer«, erklärt die Typografin und Professorin an der HBKsaar, die mit ihren Studierenden schon fleißig mit Variable Fonts experimentiert hat.

Ein Font statt zehn

Während die neue Technik in Printanwendungen weniger Sinn macht – größere Schriftfamilien stellen meist mehr als genug Strichstärken zur Verfügung –, ist sie fürs Webdesign durchaus interessant. Denn sie erweitert das Responsive Design um den Aspekt Schrift. »Im Responsive Design ist alles flexibel und kann sich fluide bewegen, nur die Schriften waren bislang statische Zeichen, die entsprechend ausgetauscht wurden«, so Indra Kupferschmid. »Jetzt aber können sie sich mitbewegen: Zieht man etwa ein Fenster breiter auf, wird auch die Typo breiter.« Dass dabei auch Fürchterliches entstehen kann, ist klar – wie bei jeder neuen Technologie wird auch hier etwas Erziehung notwendig sein.

Webdesigner werden besonders zu schätzen wissen, dass sie nun allein noch eine Fontdatei laden müssen, die dann alle Schnitte, Small Caps, Condensed- und Extended-Varian ten und so fort enthält. Das geht natürlich schneller, als zehn einzelne Dateien zu laden, und erhöht so die Performance einer Webseite. Vielleicht werden wir also künftig noch mehr typografische Vielfalt im Web erleben.

Webfonts, Typografie, FontsWebfonts, Typografie, Fonts

Webfonts, Typografie, Fonts
Icon Design mittels Variable Fonts: Typedesignerin Ulrike Rausch experimentierte schon mal mit der neuen Technik – mit Würsten statt Buchstaben

Schwierig wird es jedoch bei Kursiven. »Es gibt zwar eine Slant-Achse, aber das sind nur schräg gestellte Buchstaben«, erklärt Indra Kupferschmid. »Nun sind ja bei einer serifenlosen Kursiven nicht alle Zeichen komplett umgestaltet. Man könnte den Font zum Beispiel so anlegen, dass zusätzlich zum Schrägstellen einige Buchstabenformen wie e, a oder g ausgetauscht werden. Für eine Serifenschrift wie die Garamond bräuchte man aber eine echte Kursive, das heißt einen zweiten variablen Font.« Oder man ändert das Designkonzept und arbeitet im Web nicht viel mit Kursiven, sondern mit verschiedenen Fetten, Small Caps oder anderen Auszeichnungen.

Vielleicht doch nicht so neu?

Deutlich kritischer als viele seiner Kollegen sieht Typedesigner Akiem Helmling von Underware in Den Haag das Ganze. »Extreme zu gestalten und daraus dann Gewichte zu interpolieren – so arbeiten wir schon seit fast zwanzig Jahren. Bei vielen Variable-Fonts-Animationen, die das Potenzial die ser Technik demonstrieren sollen, bewegt sich viel, aber es passiert wenig, was wirklich neue Möglichkeiten für den De signer bietet und nicht nur theoretisch ist, sondern praktisch ein Problem behebt.«

Ein solches Problem ist zum Beispiel die Kombination von Schriften, deren Gewichte nicht vollständig zueinanderpassen. Für Fälle wie diese entwickelte Underware die Sans Serif Zeitung: eigentlich eine ganz normale Schriftfamilie in acht Fetten, mit Italics, Small Caps und Micro-Fonts für kleine Größen, doch in der Variante Flex lassen sich die Gewichte stufenlos verstellen. Im Web funktioniert das mit einem jQuery-Plug-in, für Illustrator und InDesign gibt es eine Extension.

»Kombiniert man unsere Zeitung mit einer Serifenschrift einer anderen Foundry, kann es natürlich passieren, dass die Gewichte nicht wirklich harmonieren, die eine Regular etwa fetter ist als die andere. Mit der Extension kann ich das Gewicht der Zeitung stufenlos regeln, so lange, bis es genau zu der anderen Schrift passt.« Drückt man dann auf den Button »Create Family«, werden passende Light- und Bold-Schnitte generiert. Macht man die Schrift kleiner oder größer, wählt die Extension automatisch die richtige optische Größe. Zusätzlich steht Zeitung als echter variabler Font zur Verfügung. Solange noch nicht alle Browser und Program me die Technik unterstützen, kann man also mit der Extension arbeiten, später dann auch mit echten variablen Fonts.

Das User Interface entscheidet

Noch gibt es lediglich geringen Support für variable Fonts. Während Apple, Google, Microsoft und Adobe von einer baldigen Unterstützung durch alle Browser ausgehen, zeigt sich Akiem Helmling skeptisch: »Gerade im Web ist es wich tig, eine Lösung zu haben, die überall funktioniert. Oft aber werden Sachen präsentiert, die ausschließlich auf wenigen Browsern möglich sind. Denken wir an die OpenType-Features. Noch immer werden sie nicht von allen Browsern unterstützt, dabei sind sie deutlich einfacher zu implementieren als Variable Fonts.«

Webfonts, Typografie, Fonts

Webfonts, Typografie, Fonts
Für ihre neue Schrift Zeitung entwickelte die Foundry Underware eine Flex-Variante, hier lässt sich die Strichstärke mit dem Schieberegler stufenlos verstellen

Ungeklärt ist auch die Frage der Lizenzen. Schließlich bekommt man mit einem variablen Font ja viele Fonts in einem. Von der Idee, die einzelnen Achsen auch einzeln zu verkaufen, bis zum Vorschlag, den Variable Font als Zugabe bei der Lizenzierung einer Schriftfamilie anzubieten, gibt es verschiedene Ansätze. Ähnlich wie bei den Web-Fonts wird es sicher dauern, bis sich ein praktikables Modell durchsetzt.

Neben dem Support macht vor allem eins Kopfzerbrechen: das Handling für Nutzer, die sich nicht auskennen. »Die Multiple-Master-Technik ist auch daran gescheitert, dass sie viel zu kompliziert zu bedienen war«, meint Indra Kupferschmid. »Ob variable Fonts sich durchsetzen, wird in erster Linie eine Frage des User Interfaces sein, und auch in den Desktop-Programmen müssen Anwender die Funktionen ganz klar in einem Drop-down-Menü erkennen können.« Underware hat das mit der Zeitung schon gut gelöst, die Extension lässt sich einfach bedienen.

Flexibleres Design

Schriftgestalter und Developer müssen jetzt herausfinden, für welche Anwendungen variable Fonts sinnvoll sind. »Für Barrierefreiheit beispielsweise«, meint Indra Kupferschmid, »damit mein Vater nicht bloß zwischen Normal und Fett, sondern eine lediglich etwas kräftigere Schrift auf seinem iPad wählen kann. Oder einfach nur den Knopf ›Mach mir lesbare Schrift für Leute über 65‹ drücken muss.«

Interessant sind variable Fonts auch für Appmenüs. Denn stellt man dort von Englisch auf Deutsch, kann es passieren, dass der Platz für die Bezeichnungen nicht mehr reicht. Mit einem variablen Font würde die Schrift etwas schmaler werden.

Auf dieser Entdeckungsreise werden garantiert einige ner vige Sachen, wie zu viele Animationen entstehen, aber sicher auch viel Sinnvolles und Spannendes – wie immer, wenn neue, nützliche Techniken und Spielerei zusammenkommen.

Übrigens sind einige Variable Fonts bereits verfügbar. Welche das sind und was Sie über Browser-Support und Font-Handling variabler Fonts wissen müssen, lesen Sie hier.

Lesen Sie auch, was die Typedesigner und Typografen Tim Ahrens (Just Another Foundry, München) Akiem Helmling (Underware, Den Haag), Indra Kupferschmid (Professorin für Typografie, Saarbrücken), Nick Sherman (Typografieberater aus New York) und der iOS-Entwickler Ivo Wessel (in Best Hands, Berlin) über die Vor- und Nachteile der neuen OpenType-Technologie sagen. 

[831]


    
Produkt: Download PAGE - Perfekte Typo für und Online
Download PAGE - Perfekte Typo für und Online
Perfekte Typo für Print und Online – Tipps und Regeln im Überblick

Schreibe einen Kommentar

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

Das könnte dich auch interessieren