Die Verwendung von UI-Systemschriften im Web-Design mit Modern Font Stacks

Eine kurze Geschichte der Typographie im Netz

In den frühen Tagen des Webdesigns war die Typografie stark eingeschränkt. Den Webdesigner:innen standen lediglich Systemschriftarten wie Arial, Times New Roman und Verdana zur Verfügung, die direkt vom Betriebssystem des Nutzers geladen wurden. Die Kontrolle über Schriftgrößen und Formatierungen war minimal und erfolgte über einfache HTML-Tags wie <font>. Kreative Gestaltungsmöglichkeiten blieben weitgehend aus. Im Ergebnis blieb das Schriftbild statisch und eintönig.

Wer sich daran nicht erinnern kann, dem sei ein Besuch im Web Design Museum (https://www.webdesignmuseum.org/exhibitions/web-design-in-the-90s) ans Herz gelegt. 

Obwohl die @font-face-Regel bereits Ende der 90er eingeführt wurde, wurde sie kaum genutzt. Es gab kaum optimierte Schriften und ohne Kantenglättung waren die Texte schlecht lesbar. 

Um diese Einschränkungen zu umgehen, mussten Designer:innen auf Bilddateien zurückgreifen, um z.B. Überschriften in individuellen Schriften darzustellen, was die Ladezeiten und die Barrierefreiheit der Seiten stark beeinträchtigte. Es entstanden auch Technologien wie sIFR (Scalable Inman Flash Replacement) oder Cufón. Sie ermöglichten es, Schriften mithilfe von JavaScript und Flash, bzw. HTML-Canvas in Webseiten einzubinden. Dies war eine innovative Lösung, hatte jedoch weiterhin Nachteile, wie etwa eine eingeschränkte Barrierefreiheit und die Abhängigkeit von Flash. 

Die Webfont Revolution

Ab ca. 2008 feierte @font-face ein Revival. Die Browser und Betriebssysteme waren endlich so weit. Mit dem Aufkommen von neuen Font-Formaten wie woff und Webfont-Technologien wie Google Fonts oder Adobe Fonts änderte sich das Bild radikal. Designer:innen erhielten die Freiheit, aus einer Vielzahl von Schriften zu wählen und diese mit präzisen Stileigenschaften wie Schriftstärken, Abständen und Ausrichtungen zu versehen. Variable Fonts erweiterten die Möglichkeiten zusätzlich, indem sie dynamische Anpassungen mit nur einer Schriftdatei erlaubten. Heute spielen typografische Entscheidungen oft eine zentrale Rolle im Webdesign und tragen maßgeblich zur Benutzererfahrung sowie zur Markenidentität einer Website bei.

There’s no such thing as a free lunch

Webfonts können aber auch Nachteile haben.

Zum einen natürlich die Ladegeschwindigkeit: Auch wenn unsere Internetleitungen stetig besser werden, es gibt Anwendungen in denen auch 100 bis 200 kB einen Unterschied machen können

Auch beim Thema Datenschutz gibt es einiges zu beachten. Oft werden Webfonts von externen Servern geladen. Das ermöglicht zumindest theoretisch Tracking von Besuchern. Es ist jedenfalls juristisch umstritten. Wir müssen also auf die Datenschutzmaßnahmen einer Drittpartei vertrauen und unsere Besucher darauf aufmerksam machen (Stichwort Cookie Consent).

Und gibt es noch das Problem von Layout-Verschiebungen: je nachdem wie man im CSS die Eigenschaft font-display definiert hat, kommt es eventuell entweder zum sog. Flash of invisible text (FOIT) oder Flash of Unstyled Text (FOUT). Bevor der Webfont geladen wird, wird die Seite ohne Texte oder in einer Fallback-Schriftart gerendert. Sobald die Schriftdatei geladen wird, muss der Browser das Layout neu rendern und es kommt zu Verschiebungen – eine unangenehme Nutzererfahrung. Man kann natürlich sehr viel Zeit und Energie investieren, um dieses Problem zu bekämpfen. 

Einen ausführlichen Artikel dazu hat Simon Hearne verfasst: https://simonhearne.com/2021/layout-shifts-webfonts/

Zurück zum Ursprung

Mit der Zeit hat sich aber nicht nur das Angebot an Webfonts verbessert. Auch die Betriebssysteme wurden mit einer steigenden Anzahl an qualitativ hochwertigen Schriften von Top Schriftdesignern ausgeliefert. Und mit der Verbesserung von Schriftenglättung sahen sie auch gut aus. Plötzlich standen – statt der angestaubten Helvetica und Times – tolle, zeitgemäße Fonts zur Verfügung, wie San Francisco, Segoe und Roboto. 

Das eröffnete die Möglichkeit, moderne, schöne Schriftarten ohne Latenz fürs Web zu verwenden. Die Grundlagen der Idee hat Marcin Wichary in seinem Smashing Magazine Artikel bereits 2015 zusammengefasst: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

Modern Font Stacks

Der Gedanke wurde weitergesponnen und eine der beliebtesten Ausformulierungen davon sind die Modern Font Stacks von Dan Klammer. Hierbei handelt es sich um eine Sammlung von font-family Definitionen mit System-Schriftarten von allen modernen Betriebssystemen. Das Versprechen: Die schnellsten verfügbaren Schriftarten. Kein Herunterladen, keine Layout-Verschiebungen, keine Flashes, nur sofortiges Rendern.

Die Fontstacks sind nach Schriftklassifikation in Gruppen unterteilt – so kann man der Website einen Charakter verleihen. Wer sich nicht sicher ist, ob er eher Slab Serif oder eine Geometrische Sans verwenden möchte, kann auf https://modernfontstacks.com/ unter Article View eine einfache Vorschau nutzen und so schnell einen Eindruck von den verschiedenen Schriftarten bekommen.

Eine genaue Beschreibung der einzelnen Gruppen und die CSS-Definitionen findet man auf der GitHub Seite des Projektes: https://github.com/system-fonts/modern-font-stacks

Sehen wir uns den einfachsten Stack an – System UI. Hier wird folgendes im CSS definiert:

font-family: system-ui, sans-serif;

Als Resultat verwendet der Browser unter macOS die San Francisco, in Windows die Segoe UI, in Android die Roboto, und unter Linux – je nach Distro – die Ubuntu, Cantarell oder Noto Sans.

Möchte man lieber eine Humanistische Sans verwenden, kann man stattdessen folgenden Stack einsetzen:

font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

 
Modern Font Stacks in Joomla nutzen

In Joomla lassen sich moderne Font Stacks einfach und flexibel integrieren. Entweder ergänzt man die Definitionen direkt in CSS-Dateien oder mit dem integrierten Style-Customizer vieler Templates. 

Besonders einfach macht es einem das Standard-Template Cassiopeia. Das hat nämlich die Definitionen bereits integriert und sie lassen sich sehr komfortabel mit wenigen Klicks ändern. 

Hierzu geht man im Backend zu System / Site Template Stile und klickt den Stil an um ihn zu bearbeiten (meistens Cassiopeia - Default)

Im Reiter Erweitert findet man die Einstellung Schriften-Schema. Aktiviert man die Option Systemschriften auswählen, erscheinen zwei weitere Select-Felder. Jetzt kann man jeweils einen Font Stack für die Überschriften und für den Fließtext definieren. 

Einleitungsbild von Stefan Schweihofer auf Pixabay