How-To

Variable Fonts: Das neue Schriftformat erobert das Web

Seite 3 / 3

Granulare Einstellungen

Dank der stufenlosen Anpassung variabler Fonts ist es möglich, feinere typografische Einstellungen vorzunehmen. Ist der fette Schriftschnitt etwas zu fett, der nächstdünnere Schriftschnitt aber nicht fett genug, kann mit einem variablen Font eine ­beliebige Strichstärke dazwischen angegeben werden, die den Anforderungen besser gerecht wird. Das lässt sich auch im ­Responsive Webdesign nutzen, indem die Schriftdarstellung ­passend zur jeweiligen Bildschirmauflösung optimiert werden kann.

Für kleinere Geräte könnte zum Beispiel auch die Schriftbreite variiert werden. Gerade bei Überschriften sind Webdesigner bisher gezwungen, die Schriftgröße stark zu reduzieren, damit eine Überschrift nicht über zu viele Zeilen läuft. Dadurch geht aber oft der Größenkontrast zwischen Überschrift und Fließtext verloren. Mit variablen Fonts kann die Schriftbreite losgelöst von der Schriftgröße verringert werden. Auch längere Button- oder Menütexte können auf diese Weise daran gehindert werden, mehrere Zeilen einzunehmen.
Eine Einstellung im Browser oder im Betriebssystem könnte es Nutzern zudem ermöglichen, die Strichstärke selbstständig zu erhöhen – falls sie ihnen zu filigran ist und die Lesbarkeit einschränkt. Ein Pluspunkt für bessere Zugänglichkeit.

Optische Größe

Ein weiterer interessanter Aspekt ist die Variation der optischen ­Größe. Sie dient dazu, die Darstellung der Schrift, basierend auf der aktuell eingestellten Schriftgröße, zu optimieren. Für gute Lesbarkeit in kleinen Schriftgraden sind offene Buchstabenformen, eine große x-Höhe sowie ein geringer Kontrast der Strichstärke hilfreich. Genau diese Maßnahmen können in einem größeren Schriftgrad, zum ­Beispiel in einer Überschrift, aber dafür sorgen, dass die Schrift grob und plump wirkt. Daher ist es sinnvoll, für große Schriftgrade den Schriftschnitt kontrast- und detailreicher auszuarbeiten, um so das Schriftbild visuell aufzuwerten.

Während diese Anpassungen im Bleisatz noch üblich waren, verfügen die meisten digitalen Schriften nur über eine einzige optische Größe, die auf alle Schriftgrade angewendet wird. ­Variable Fonts umgehen diesen Kompromiss, verbessern für kleine Schriftgrade die Lesbarkeit und bereichern gleichzeitig das Schriftbild in Überschriften. Das Beste daran: Verfügt ein variabler Font über eine Achse für die optische Größe, so wird sie vom Browser automatisch angewendet.

Editorial Design

Umfangreiche, abwechslungsreiche Typografie, wie wir sie aus der Gestaltung von Magazinen und Zeitschriften kennen, wird nun auch im Web leichter möglich sein. Oliver Schöndorfer hat ein schönes ­Beispiel erstellt, das zeigt, wie durch den Einsatz eines variablen Fonts das Schriftbild eines Artikels bereichert werden kann. Ein weiteres Beispiel von Jason Pamental für Monotype verwendet die variable FF Meta. Wer selbst mit der FF Meta experimentieren möchte, kann diese bei Monotype kostenlos herunterladen4. Auch die Decovar von David Berlow und die Pixelschrift Lab DJR von David Jonathan Ross (djr.com/lab-variable/) zeigen, dass es jenseits der Standardachsen auch deutlich kreativer und experimenteller zugehen kann.

Die Schriftzeichen der Decovar sind modular aufgebaut: Durch Verändern der immerhin 15 Achsen lassen sich höchst unterschiedliche ­Buchstabenformen erzeugen. (Abbildung: TypeNetwork via Github)

Animationen

Da die Achsen der variablen Fonts über CSS angesteuert werden, können diese auch mit CSS animiert werden. Beispielsweise für abwechslungsreiche und kreative Hover-Effekte, wie sie Roel Nieskens in einem Artikel zeigt. Ebenso können variable Schriften beim Seitenaufbau elegant eingeblendet werden. Geschieht dies über die vorhandenen Achsen, sieht es wesentlich interessanter aus, als einfach nur die opacity hochzuschrauben. Die Schrift Duos Write auf very-able-fonts.com bietet zur Ani­mation sogar eine eigene Achse, mit der sich ein Schreibschrifteffekt erzeugen lässt. Und David Jonathan Ross lässt mit seiner Lab DJR eine Welle über den Bildschirm tanzen. In diesem Fall sicher Spielerei, aber dennoch spannend zu sehen, was mit variablen Fonts alles möglich ist. Zu guter Letzt ist noch die Website www.axis-praxis.org zu nennen, auf der sich mit den Möglichkeiten variabler Fonts spielen lässt.

Fazit

Variable Fonts bieten neben Einsparungen in der Dateigröße viele weitere Vorteile wie Feinjustierung der Webtypografie oder Anpassung an verschiedene Gegebenheiten wie Displaygröße und -auflösung. Bis Ende 2018 werden alle großen Browser variable Fonts unterstützen. Und wenn Schriftgestalter und -anbieter diese dann mit sinnvollen Preis- und Lizenzmodellen bereitstellen, steht der Kreativität nichts mehr im Wege. Allerdings sollten Webdesigner die neuen Freiheiten auch mit Bedacht einsetzen. Denn zu viel Spielerei mit variablen Fonts wird Website-Besucher eher ablenken, als ihnen nutzen.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung