Variable Fonts und System Font Stacks

Warum weiß ich als Webentwicklerin eigentlich, was eine Punze ist?

Na ja, wer eine neue Website baut oder eine alte aufhübscht, schlägt sich mit vielerlei Fragen der Navigation, der Usability, des Look-and-Feels, des Layouts, der Bildsprache und allerlei anderer ästhetischer Aspekte herum. Einer dieser Aspekte, mit dem oft die ganze Seite steht und fällt, ist die Typografie. Welche Schriftarten sollen wofür eingesetzt werden? Wie groß soll die Schrift sein, wie groß die Laufweite?

Da die allermeisten Webseiten noch immer dafür da sind, irgendwelche Informationen möglichst klar strukturiert zu vermitteln, ist Textgestaltung auch heute unser tägliches Brot. Und eine gute Typografie kann im Zweifel ein ganzes Design tragen.

Schriftarten sind hübsch aber Performance-Killer

Oft gibt das Corporate Design Schriftarten vor, die dann auf der Seite eingebettet – und beim Seitenaufruf heruntergeladen werden müssen. Die Datenmenge, die sich dabei für unterschiedliche Schriftstile und -schnitte ansammeln kann, beeinträchtigt die Performance und damit das SEO-Ranking der Seite in manchen Fällen massiv. Einen gewaltigen Schritt in die richtige Richtung machen hier Variable Fonts. Hier wird eine einzige Schriftart geladen, die aber so angelegt ist, dass sie unterschiedliche Stärken abbilden kann. Was Designer*innen und Frontender*innen zu so manch Schabernack befähigt.

Schnell, schneller, Systemschriftarten

Noch besser für die Performance – und durch die eingesparte Datenmenge übrigens auch für die CO2-Bilanz einer Webseite – ist jedoch die Nutzung des System Font Stacks. Das klingt im ersten Moment fancy, bezeichnet aber nur die Schriftarten, die auf dem Betriebssystem der Nutzer*innen ohnehin schon installiert sind. Und nein, das muss nicht Times New Roman und Comic Sans bedeuten. Auf dieser Seite sind zum Beispiel System Font Stacks für unterschiedliche Stile zusammengetragen, die eine richtig gute Figur machen.

Die Vorteile von Systemschriftarten einmal zusammengefasst:

• Schnellere Ladezeiten, gut für SEO und UX
• Keine unschönen Flackereffekte durch nachladende Schriftarten
• Kleinere Datenmenge – bessere CO2-Bilanz
• Systemschriftarten sind den User*innen vertraut

Natürlich können nicht alle Stile und Anwendungsfälle mit Systemschriftarten abgedeckt werden, doch eine ansprechende und funktionale Typografie muss nicht das Rad neu erfinden. Wer keine Sonderwünsche oder Vorgaben für die Typo hat und damit leben kann, dass die Schriftarten sich je nach Betriebssystem ein kleines bisschen unterscheiden, ist gut damit beraten, den Einsatz eines System Font Stacks in Erwägung zu ziehen.

Eine Punze – vielen Dank, unnützes Typografiewissen – ist übrigens der Weißraum innerhalb eines Buchstabens.