Ein neues responsives Schriftformat für das Web

Nick Sherman hielt Anfang des Monats auf der Ampersand einen faszinierenden Vortrag, der auf einem Artikel basierte, den er geschrieben hatte: Variable Fonts for Responsive Design. Sowohl im Vortrag als auch in der Abhandlung schlägt er vor, dass wir ein neues Schriftformat benötigen, um komplexe responsive Designprobleme zu lösen.

…die Glyphenformen in modernen Schriftarten sind auf eine einzige, statische Konfiguration beschränkt. Jede Variation in Gewicht, Breite, Strichkontrast usw. – egal wie subtil – erfordert separate Schriftdateien. Dieses Konzept mag im Bereich des Printdesigns, wo Layouts ebenfalls statisch sind, nicht so schlimm erscheinen. Im Web ist diese Einschränkung jedoch das, was ich als „gläserne Decke“ der responsiven Typografie bezeichne: Während übergeordnete typografische Variablen wie Ränder, Zeilenabstand und Schriftgröße dynamisch an die jeweilige Ansichts­umgebung des Lesers angepasst werden können, verschwindet diese Flexibilität für untergeordnete Variablen, die innerhalb der Schrift definiert sind. Jeder Glyphe ist wie ein Eiswürfel, der in einem Meer von ansonsten flüssigem Design schwimmt.

Die Manipulation eines Zeichens auf diese Weise wird in der Typografen-Community üblicherweise als Interpolation bezeichnet: Designer wählen mehrere Polstellen, wie z. B. dicke oder dünne, kondensierte oder erweiterte Zeichen, und lassen einen cleveren Algorithmus einen Zwischenwert erstellen. Das folgende Beispiel aus Andrew Johnsons SVG-Interpolationsexperiment erklärt diesen Prozess gut.

Wie Nick erwähnte, ist die Interpolation von hell zu fett oder von dünn zu breit bei den aktuellen Schriftformaten, die wir für das Web haben, leider unmöglich. Er ist jedoch nicht der einzige Designer, der Verbesserungen fordert, denn Andrew Johnson hat ähnliche Forderungen nach einem responsiven Schriftformat gestellt.

…die heutigen Webfonts binden unsere responsiven Websites und Anwendungen an unflexible Typografie, die sich nicht skalieren lässt. Infolgedessen erhalten unsere Nutzer schlechte Leseerlebnisse und längere Ladezeiten durch zusätzliche Schriftstärken.

Aber warum sollten wir überhaupt responsive Funktionen wie diese in einem Schriftformat wollen? Wie würde uns das helfen, Designprobleme zu lösen?

Die Vorteile eines variablen Schriftformats

Dieses neue Format würde den Designern eine minutiöse typografische Kontrolle bieten, insbesondere wenn eine normale Stärke zu dünn und eine fette Stärke zu dick aussieht. Stattdessen könnten wir einen Wert zwischen dünn und fett wählen, und die Schrift würde dazwischen interpolieren – mit anderen Worten, Designer könnten die Lesbarkeit erheblich verbessern.

Außerdem könnten wir endlich Layouts erstellen, bei denen Wörter oder Sätze den gesamten Platz ihres übergeordneten Containers ausfüllen, ähnlich wie in der Demo namens Font to Width.

Diese Technik mag FitText oder der Verwendung von Viewport-Einheiten zur Einstellung responsiver Texte ähneln, aber es gibt eine klare Unterscheidung, die der Typograf Erik van Blokland herausgearbeitet hat.

Breitenvariationen werden sofortige Anwendung finden, um Typografie an das Zielrechteck anzupassen. Wörter müssen auf die Seiten­geometrie reagieren können.

Um also bestmöglich auf die „Seiten­geometrie“ zu reagieren, benötigen wir mehr Kontrolle über die Schriften, die wir auf unsere Designs anwenden, und die Breite jedes Glyphen ist genauso wichtig wie die Möglichkeit, einen responsiven Wert für die font-size festzulegen.

Ein weiterer Grund für die Implementierung eines neuen variablen Schriftformats könnte die Leistung sein, da wir nur eine einzige Datei herunterladen müssten, anstatt der mehreren Schriftarten, die wir heute benötigen, wenn wir mit Systemen arbeiten, die große Schriftfamilien mit Extra-Light-, Light-, Regular-, Medium-, Semi-Bold-, Bold- und Black-Varianten erfordern.

Diese Idee eines responsiven Schriftformats ist nicht neu, und es gab in der Vergangenheit mehrere Versuche, etwas sehr Ähnliches zu schaffen. Adam Twardoch, Direktor für Produkte bei Fontlab, rief bereits 2013 zu einer Wiederbelebung dieser Ideen auf.

Im Web-Kontext denke ich, dass mindestens eines dieser variablen Schriftmodelle eine Wiederbelebung verdient – weil es enorme Kompressionspotenziale bietet, gut in das „responsive Web“-Paradigma passt, neue Möglichkeiten für Text­layout im Web eröffnet und vor allem im Web viel einfacher implementiert werden kann, als es jemals auf Desktop-Plattformen möglich war.

Nick fasste die Vorteile weiterhin wie folgt zusammen:

Eine variable Schrift würde weniger Bandbreite, weniger Roundtrips zum Server, schnellere Ladezeiten und deutlich mehr typografische Flexibilität bedeuten. Es ist ein Gewinn auf ganzer Linie. (Der noch ungetestete variable Faktor ist hier, wie viel Zeit für zusätzliche Rechenverarbeitung aufgewendet werden könnte.)

Es gibt jedoch viele technische Überlegungen, die bei der Einführung eines neuen Schriftformats für das Web zu berücksichtigen sind. Wie könnten wir diese Funktionen in unseren Designs implementieren?

Wie dieses neue Format in CSS funktionieren könnte

In seinem Vortrag schlug Nick ein praktisches Beispiel in CSS vor, das ich hier mit einer imaginären Eigenschaft namens font-width etwas weiterentwickelt habe, die es uns ermöglicht, die Breite eines Zeichens festzulegen, so wie wir heute die font-weight eines Elements festlegen können.

@font-face {  
  font-family: WebFont;
  src: url('webfont.new') format('new format');
}

body {
  font-family: WebFont;
  font-weight: 450;
  font-width: 200;
}

h1 {  
  font-weight: 600;
  font-width: 999;
}

Wir könnten dann ein anderes Element mit einer font-weight von 601 oder 411 oder einem beliebigen Wert, den das Design für dieses spezielle Element erfordert, festlegen, und der Text würde sich entsprechend anpassen.

Nun gibt es definitiv Schwächen im obigen Beispiel, aber ich denke, es trifft den Kern der Sache: Unsere Websites wären zu viel mehr Feinheit und Nuance fähig, als sie derzeit besitzen. Und ich kann mir viele Beispiele vorstellen, wo dieses neue Format eindrucksvollere und schönere Layouts schaffen würde, ganz zu schweigen davon, wie nützlich es in zoom­baren Benutzeroberflächen sein könnte.

Was ist mit WOFF?

Es gibt ein weiteres Schriftformat, das derzeit an Popularität gewinnt, namens WOFF 2.0. Es wurde entwickelt, um den Kompressionsalgorithmus seines Vorgängers erheblich zu verbessern, und wird für asiatische Schriftsysteme und andere Sprachen, die Schriften mit vielen Glyphen benötigen, äußerst nützlich sein. WOFF 2.0 bietet uns jedoch immer noch nicht die Designvariation, die wir von einem variablen Schriftformat erhalten, da wir für unterschiedliche Breiten und Stärken immer noch mehrere Schriftarten benötigen.

Ich halte WOFF also kurzfristig für großartig, aber es hilft unseren langfristigen Zielen, diese Schriftformate wirklich responsiv zu gestalten, nicht wirklich weiter.

Potenzielle Probleme

So sehr ich auch die Vorteile dieses neuen Formats in Bezug auf Design und Entwicklung diskutiert habe, gibt es auch Probleme damit. Hier sind einige der dringendsten Probleme, die mir bisher eingefallen sind.

• Wenn dieser Interpolations­algorithmus clientseitig ausgeführt wird, ist es nur fair zu sagen, dass er schlecht für die Leistung sein könnte.
• Die Lizenzierung von Webfonts müsste überdacht werden, da Kunden nun nur eine einzige Schriftdatei benötigen, anstatt der mehreren Stärken und Breiten, die sie heute benötigen.
• Spiele hier für einen Moment den Advocatus Diaboli: Aber ist es wirklich notwendig, dass Typografie auf dem Gerät des Benutzers dynamisch ist?
• Ich habe mit ein paar Designern darüber gesprochen, und sie erwähnten, dass ein halb funktionierender Vorschlag in Browsern schlimmer wäre als gar nichts.
• Typografen müssten herausfinden, wie sie Designer darüber aufklären können, warum dieses neue System ihnen bei ihrer Arbeit helfen könnte und welchen Nutzen es für das Web insgesamt hat. Ich sprach kürzlich mit einem Typografen, und er erwähnte, dass er es vermeidet, OpenType-Funktionen in seine Schriften aufzunehmen, wie z. B. Kapitälchen und Ligaturen, weil viele Grafikdesigner sie einfach nicht kennen und/oder sich nicht darum kümmern.
• Ebenso können Typografen bestehende Schriftschnitte nicht einfach neu gestalten, um diese neuen Variablen zu verwenden, da sie von Grund auf neu entworfen werden müssten, um diese Technologie von Anfang eines Projekts an zu nutzen.

Zusammenfassung

Ich denke, es gibt ein riesiges Potenzial dafür, dass ein neues variables Schriftformat zu einem Schlüsselwerkzeug für Designer wird. Es würde auch die Leseerfahrung der allgemeinen Webnutzer erheblich verbessern. Aber das bedeutet nicht, dass wir die vielen Probleme und Hürden ignorieren können, die wir überwinden müssen, um einen Entwurf dafür zu vereinbaren.

Was denken Sie? Würden Sie variable Schriftdateien mit offenen Armen begrüßen? Oder ist die ganze Idee ein idealistischer Wunschtraum? Wir würden uns freuen, Ihre Meinung unten in den Kommentaren zu hören.

Verwandt

• Thomas Phinneys Vortrag über die Geschichte von Multiple Masters und warum sie gescheitert sind
• Erik van Bloklands responsives Vektorbeispiel
• Apples eingestelltes Format TrueType GX