Die Entwicklung der Typografie mit variablen Schriftarten: eine Einführung

Dünn, dick und alles dazwischen: FF Meta Variable von Monotype

Worte haben Macht und Typografie ist ihre Stimme

Typ ist seit Jahrhunderten die Art, wie wir das, was wir lesen, „hören“. Es ist auch allgemein bekannt, dass Schriften und Typografie ein zentrales Element des Brandings, des Ausdrucks und des Stimmumfangs sind. Gute Typografie beeinflusst das Verständnis, die Stimmung und die Bedeutung auf unzählige Weise und ist ein wesentlicher Bestandteil des Designs. Leider konnten wir nach dem Aufkommen des Webs viele Jahre lang nur die grundlegendsten Aspekte der typografischen Gestaltung auf Online-Inhalte anwenden. Mit der Möglichkeit, echte Schriftarten und OpenType-Funktionen wie Ligaturen, bestimmte Zeichensätze, Brüche und echtes Kerning zu verwenden, hat sich die typografische Landschaft enorm verbessert. Die Realität beim Anzeigen von Inhalten im Web macht es jedoch erforderlich, dass die Geschwindigkeit der kritischste Aspekt des Designs ist. Daher haben wir den typografischen „Sprachumfang“ gegen die Seitengeschwindigkeit eingetauscht. Das bedeutet weniger Schriftschnitte und eine geringere Markentreue und -stimme.

Von vielen eins (Paradigma: gewechselt)

Eine variable Schriftart ist eine einzelne Schriftart, die genauso viele Funktionen hat
- John Hudson

Das Aufkommen variabler Schriftarten verändert die gesamte Dynamik. Wie von John Hudson beschrieben, handelt es sich bei einer variablen Schriftart um eine einzelne Schriftart, die so viele Funktionen hat: Alle Variationen von Breite und Gewicht, Neigung und sogar Kursivschrift können in einer einzigen, hocheffizienten und komprimierbaren Schriftartdatei enthalten sein. Darüber hinaus ist das Format (das technisch Teil der OpenType 1.8-Spezifikation ist) vollständig erweiterbar. Der Schriftdesigner hat die vollständige Kontrolle über die verwendeten Achsen, deren Bereiche und sogar die Definition neuer Achsen. Derzeit gibt es 5 "registrierte" Achsen (Breite, Gewicht, Neigung, Kursivschrift und optische Größe), aber der Designer kann jede Achse variieren, die er wählt. Einige Beispiele umfassen die Höhe von Auf- und Abwärtsbewegungen, die Textqualität und sogar die Serifenform. Die Möglichkeiten sind nahezu unbegrenzt. Indem wir die Leistungsbarriere beseitigen, öffnen wir die Tür für ein interessanteres und dynamischeres Design und eine weitaus größere Fähigkeit, die wahre Stimme der Marke auszudrücken. Dies alles unter Beibehaltung der Treue zur Schrift selbst: Nur vom Schriftdesigner belichtete Achsen können variiert werden. Keine künstliche Verzerrung erlaubt.

Webdesign, neu erfunden

Während die Technologie noch ausgereift ist und Schriftdesigner daran arbeiten, diese neue Arbeitsweise fließender zu gestalten, ist das Versprechen für das Design im Web bahnbrechend. Das typische Szenario besteht darin, ein bestimmtes Design auf 3 bis 5 verschiedene Schriftarten zu beschränken, um jeden Aspekt der Designsprache und -stimme einer Site darzustellen - einschließlich aller Permutationen für Textkopien und Überschriften. Bei der einfachsten Implementierung würden uns variable Schriftarten die Freiheit geben, für jede Überschriftenebene unterschiedliche Gewichte zu verwenden, was ihre Klarheit und Lesbarkeit erheblich erhöht.

Kaufmännisches und von 100 bis 900 Gewichten

Man könnte auch etwas schmalere Zeichenbreiten für Überschriften oder für datenreiche Informationsanzeigen verwenden. Tatsächlich könnte das gesamte typografische System proportional gestaltet werden: Gewicht und Breite könnten zu Multiplikatoren für die Standardeinstellungen für die Körperkopie werden. Auf diese Weise können diese Aspekte problemlos zusammen mit der Arbeitskopie skaliert werden, wenn sich die Einstellungen je nach Bildschirmgröße oder Benutzerpräferenz ändern. All dies mit einer damit einhergehenden Leistungssteigerung aufgrund weniger HTTP-Anforderungen (weniger Schriftdateien) und einer Gesamteinsparung beim Herunterladen von Daten (die jedoch je nach verwendeter Schriftart und Komprimierung variieren wird).

Aber während diese Freiheiten es uns ermöglichen, ausdrucksvoller zu sein, werden einige der wirklich interessanten Fähigkeiten dazu beitragen, das Leseerlebnis selbst zu transformieren. Diese Seite (nun ja, die eigentliche Demoseite) wurde mit einer neuen variablen Schriftartversion von FF Meta erstellt, dem klassischen serifenlosen Design von Erik Spiekermann, das erstmals 1991 veröffentlicht wurde. Selbst mit nur einer Variationsachse (Gewicht) von beiden In den Varianten roman und italic kann eine wundervolle Bandbreite an Stimmen erzielt werden, die sich durch einen enormen Leistungszuwachs auszeichnet: 18 Dateien und über 288.000, die durch eine einzige Datei mit nur 84.000 ersetzt wurden.

Das Lesen auf dem Bildschirm wurde neu erfunden

[Meta] muss mehr als nur hübsch aussehen: Es muss ziemlich hart arbeiten
- Erik Spiekermann

Einige der größten Herausforderungen bei der Schaffung eines guten Leseerlebnisses hängen mit dem Mangel an Finesse in Proportionen und feinen Details zusammen. Die Kombination aus modernen CSS- und OpenType-Funktionen und -Variationen bietet eine leistungsstarke Kombination. Die Möglichkeit, Funktionen wie Ligaturen und Silbentrennung basierend auf der Sprache festzulegen, die Silbentrennung basierend auf der Bildschirmgröße zu aktivieren und zu deaktivieren und sogar die Zeichenbreite auf den kleinsten Bildschirmen anzupassen, um mehr Zeichen pro Zeile anzupassen, ohne die Schriftgröße zu verringern, kann zu dramatischen Verbesserungen führen die Geschmeidigkeit und den Komfort des Leseerlebnisses.

Bereit für eine Nahaufnahme

Garamond-Schliff aus dem 18. Jahrhundert, in optischen Größen geschnitten. Das erste Bild ist 6pt groß, das zweite 72. Beachten Sie den Unterschied im Strichkontrast. Es ist viel raffinierter in der größeren Größe.

Ein weiteres Merkmal, das bei Metalltypen üblich war, bei der Übersetzung in Fotosatz und Digitaltechnik jedoch verloren ging, war die optische Größenanpassung (einige Designer erstellen zwar immer noch separate optische Größen für verschiedene Bereiche, dies ist jedoch selten und etwas eingeschränkt). Nicht so häufig wie bei serifenlosen Entwürfen, aber in den vergangenen Jahrzehnten (in der Tat seit Jahrhunderten) war es durchaus üblich, dass die physisch kleineren Schriftgrößen mit etwas stärkeren Strichen, offeneren Schalen und Zählern geschnitten wurden In einigen Fällen sind die Öffnungen noch breiter, um die Lesbarkeit zu gewährleisten. Insbesondere Zeitungen empfanden dies als kritisch, um sicherzustellen, dass keine Zeilen verloren gingen oder Briefe nicht zu stark unter dem Tintenzuwachs litten.

Die optische Größenanpassung hat sich bei variablen Schriftarten als nützlich erwiesen und kann, sofern verfügbar, automatisch angewendet oder vom Webdesigner oder -entwickler explizit festgelegt werden. Wie bereits erwähnt, ist dies bei serifenlosen Schriften wie dieser nicht so häufig der Fall, kann jedoch bei Serifen mit höherem Strichkontrast zu einem dramatischen Effekt führen.

Polnisch und gelassen

Mit den bereits diskutierten Vorteilen ist die Argumentation für variable Schriftarten ziemlich überzeugend. Gute Typografie ist jedoch nicht alles, was gutes Design ausmacht. Der Bereich von Achsen wie Breite und Gewicht gibt uns enorme Freiheit, mehr redaktionelles Design im Web aufzunehmen, ohne eine exorbitante Anzahl von Datei-Assets laden zu müssen. Da diese wenigen erforderlichen variablen Schriftarten bereits vorhanden sind, besteht die Möglichkeit, sie für die Verwendung durch Inhaltsverleger selbst bereitzustellen. Stellen Sie sich eine Rolle für Designer im Content Management System (oder CMS) vor, in dem sich die Website befindet. Dieser Designer könnte einige einfache Steuerelemente verwenden, die in das CMS integriert sind und die es ihm ermöglichen, bestimmte Überschriften oder Pull-Quotes zu setzen, wodurch ein völlig neues Designniveau ermöglicht wird, das dem im Druck ähnelt, ohne jedes Mal benutzerdefinierten Code schreiben zu müssen.

Wir sind vielleicht noch am Anfang dieser neuen Ära, aber die Zukunft ist mit Sicherheit vielversprechend

Ab Mai 2018 unterstützen bereits 3 von 4 großen Webbrowsern zusätzlich zu den beiden marktbeherrschenden mobilen Plattformen variable Schriftarten (siehe Unterstützung auf caniuse.com). In diesem Sinne sind wir heute bereit, das Web zu beleuchten.

Hier ist die ganze Seite über CodePen. Schauen Sie sich das Ganze zusammen an und werfen Sie einen Blick auf das CSS, das es antreibt. Dazu gehört ein typografisches Skalierungssystem, das ich auf der Grundlage einiger Ideen erstellt habe, die ich von Jen Simmons und Tim Brown gelernt habe. Dabei wurden Ansichtsfenster-Einheiten, benutzerdefinierte CSS-Eigenschaften (auch als Variablen bezeichnet) und viele Berechnungen verwendet. Sie können es direkt auf CodePen anzeigen oder es unten eingebettet auschecken.

Einige Gedanken zur Schrift und zum Projekt

Ich war schon immer ein Fan von Erik Spiekermanns Werken und ich denke, dass die Chronologie und die Geschichte von Meta, Officina und Fira wirklich interessant sind und für mich in den letzten 25 Jahren einen wesentlichen Teil des Gewebes des digitalen Designs ausmachen. Die Chance, eine Schrift mit dieser Art von Geschichte und Wirkung in der Designwelt zu verwenden und im Kontext einer brandneuen Technologie damit zu arbeiten, war wirklich aufregend. Es hat mir besonders gut gefallen, dass ich sowohl mit Gewicht als auch mit Kursivschrift als Teil derselben Datei arbeiten kann: Sie zeigt den Wert des variablen Schriftformats sehr gut.

Ich beschloss, die Seite erst zu entwerfen, nachdem ich den Artikel selbst geschrieben hatte. Ich wollte eine gute Einführung für Designer und Markeninhaber schreiben, um sie mit den Vorteilen variabler Schriftarten vertraut zu machen, die mit ihren Anliegen in Einklang stehen: Designsprache und Markenausdruck. Sobald ich das Gefühl hatte, einen guten Entwurf zu haben, habe ich das Schriftbild selbst und seinen Platz in unserem Design-Lexikon etwas präzisiert. Dies gab mir einige Ideen, wie ich sowohl die Schrift als auch die Geschichte präsentieren kann.

Bei der Überlegung zum grundlegenden Schriftsatz habe ich mich für die Skalierung entschieden: Ich wollte mit den Extremen von Gewicht und Größe auf eine Weise spielen, die Sie im Web nicht so häufig sehen, da die meisten Designs in Bezug auf die verwendeten Gewichte enger gefasst sind. In diesem Fall habe ich eine ganze Reihe von Gewichten von 100 bis 900 sowohl in lateinischer als auch in kursiver Schrift verwendet. Als ich anfing, ein Layout zu erstellen, das mir gefiel, fiel mir ein, dass es interessanter wäre, Illustrationen nicht nur in Grafiken zu erstellen, sondern in Anführungszeichen und ein paar Schriftdaten im „Infografik-Stil“ zu schreiben.

Die letzte Berührung des kaufmännischen und des oberen Teils wurde von der Musterseite auf der FontFont-Website inspiriert: Es gibt einen Glyphen-Sampler, der alle Gewichte eines kaufmännischen und übereinander geschichteten Textes anzeigt. Ich hatte sie ursprünglich alle auf dieselbe Weise gestapelt, mit einer Animation in einer Schleife - aber das war ein bisschen viel für einige Browser, die noch variable Schriftarten und Keyframe-Animationen implementierten. Als ich mit einer Wiedergabe- / Pausenoption auf das überlappende Layout traf, gefiel mir, wie sie verteilt aussahen (besonders auf Mobilgeräten). Also drehte ich es herum und ließ es statisch anfangen, und dann spielte ich die Animation einmal ab und kehrte zum verteilten / geschichteten Layout zurück.

Alles in allem bin ich sowohl mit dem Inhalt als auch mit dem Design sehr zufrieden und mag, wie es sich über verschiedene Bildschirmgrößen hinweg bewegt und entwickelt. Ich hoffe, es dient auch anderen als Inspiration und Anleitung.

[Monotype hat mich kürzlich beauftragt, eine Demonstrationsseite zu schreiben und zu entwerfen, auf der eine neue Version der variablen Schrift des klassischen Erik Spiekermann-Designs FF Meta veröffentlicht wird. Dies ist der Text dieser Seite und einige der visuellen Elemente. Die vollständige Live-Seite wird auf CodePen gehostet und oben eingebettet. Es ist offen für alle, also zögern Sie nicht, eine Kopie zu erstellen und selbst damit zu spielen. Sie können auch deren Einführung in die Technologie sehen.]

Ursprünglicher Inhalt auf meinem Blog veröffentlicht