Lesbarkeit priorisieren
Diese Methode beschreibt vorrangig Möglichkeiten, den negativen Fußabdruck durch Datenreduktion von Schriftdateien zu minimieren.
Dennoch: die bewusste Auswahl von Schrift gehört zu den elementaren Grundpfeilern guten Designs. Menschen und ganze Professionen beschäftigen sich seit Jahrtausenden, mit guter Schriftgestaltung.
Dabei entwickelten sich naturgemäß unfassbar viele Facetten und Detailfragen, die wir an dieser Stelle nicht betrachten. Im Endeffekt ist eine gute Schriftart immer eines: gut lesbar.
Informationen müssen durch sie mühelos übertragen werden. Im besten Fall merkt man gar nicht, dass man liest. (Eine Ausnahme sind Schriften, die hauptsächlich dekorative Zwecke erfüllen.) Stehen wir vor der Entscheidung, welche Schriftart wir auf unseren Websites einbinden: Im Zweifel ist es immer die am besten lesbare.
Systemschriften erwägen (System Font Stack)
Systemschriftarten sind auf den Anzeige-Geräten (PC, Smartphones, Tablets etc.) bereits vorinstalliert. Es müssen also überhaupt keine Daten übertragen werden, um sie anzuzeigen. Damit stellen sie die absolut nachhaltigste Möglichkeit zur Schriftanzeige dar.
Bis vor ein paar Jahren war die Auswahl der Schriften nicht sonderlich attraktiv. Doch die Zeiten, in denen wir auf Arial, Times New Roman und co. zurückgreifen mussten, sind glücklicherweise vorbei.
Die Hersteller von Betriebssystemen haben mittlerweile ihre eigenen Systemschriften kreiert und diese sind, auch aus ästhetischer Sicht, durchaus zu gebrauchen: Apples „San Francisco“, Googles „Roboto“, Microsofts „Segoe UI“. Sie sind zurückhaltend und machen in vielen Schriftgewichten eine gute Figur.
Die Schriften deklarieren wir simpel über „font-family“ in CSS und schon werden sie, je nach Betriebssystem der Besucher*innen, auf den Endgeräten angezeigt. (Guide siehe Ressourcen)
Ein weiterer Vorteil dieser Systemschriften ist, dass Besucher*innen sie bereits kennen (zumindest unbewusst) und sich beim Lesen spontan „Zuhause“ fühlen.
Das kann gleichzeitig als Nachteil wirken, denn damit fällt ein wichtiges Branding-Element weg. Zudem werden unsere Texte je nach Betriebssystem und Gerät anders dargestellt.
Was tun, wenn Branding über die Schriftart im Projekt essentiell ist? Dann können wir Systemschriften eventuell in Kombination mit der „Hausschrift“ verwenden. Für sie müssten dann weniger Schriftgewichte und -stile geladen werden.
Auswahlkriterien festlegen
Das Laden unterschiedlicher Schriftarten mit vielen verschiedenen Schriftgewichten und -stilen, ist eine weit verbreitete Praxis geworden.
Leider werden für jede Variation (thin, bold, italic, bold-italic etc.) eigene Schriftdateien geladen. Benutzen wir zwei unterschiedliche Schriften, werden es natürlich noch mehr.
Pro Schriftdatei können leicht 200 kB an Daten anfallen, wobei dieser Wert bei Nutzung der großen und optimierten Webdienste (Adobe, Google, Fonts.com) eher bei ca. 50-80kB pro Datei liegt.
Die Verwendung verschiedener Schrift-Stile kann unseren Designs zusätzliche Tiefe verleihen, ohne Frage. Gleichzeitig können viele verschiedene Stile durchaus Verwirrung bei unseren Besucher*innen stiften.
Wählen wir Schriftschnitte aus, stehen die Interessen der Seitenbesucher*innen an erster Stelle: Hilft ihnen ein zusätzlicher Schriftstil, ihr Ziel besser und schneller zu erreichen oder sich besser zurecht zu finden? Ist dieser Effekt auch durch Variation von Schriftgröße, -farbe, -laufweite etc. innerhalb eines Schriftstils zu erreichen?
Können wir vielleicht ganz und gar auf die Einbindung zusätzlicher Schriften verzichten? Ist das Branding tatsächlich stark auf sie angewiesen? Können wir das gleiche Ziel mit anderen Mitteln erreichen?
Mit Blick auf den Fußabdruck unserer Seiten gilt eindeutig: Je weniger Schriftdateien geladen werden, ohne die Nutzererfahrung negativ zu beeinflussen, desto besser.
Schriftarten lokal einbinden
Webschriften werden meist über Skripte eingebunden, die Verbindung mit den Servern großer Anbieter herstellen. Auf diese Weise gelangen Nutzer*innen zur Anzeige der Schriften auf unseren Seiten und die Anbieter (Google, Adobe und co.) gelangen zur IP-Adresse der Seitenbesucher*innen. Dieses Vorgehen ist fragwürdig und ebenfalls nicht DSGVO-konform.
Darüber hinaus verursachen die Skripte (Javascript): höhere Ladezeiten, mehr Serveranfragen, mehr Datenübertragung und mehr Stromverbrauch im Endgerät. Zugegeben: Im Vergleich zur Einbindung eines unnötigen Videos sind die Auswirkungen gering. Aber sie sind da.
Die Lösung all dieser Probleme ist: Benötigte Schriftdateien lokal auf dem Server speichern und von dort aus einbinden.
Das neue Problem: Diese Schriftdateien sind viel größer als bei der Einbindung über Webschrift-Anbieter. Die Datenlast steigt wieder.
Schriftdateien verkleinern (Format und Subset)
Wenn wir uns gegen Systemschriften entscheiden und gegen Webschrift-Anbieter und für die lokale Einbindung, sollten wir die Schriftdateien so weit wie praktikabel optimieren.
Dafür haben wir zwei vielversprechende Hebel: Das Dateiformat und die Zeichenanzahl.
Dateiformat
Das kleinste Format für Webschriften ist woff2 (woff steht für „Web Open Font Format“). Es ermöglicht eine Datenersparnis von ungefähr 75% gegenüber dem Standard TTFormat. Eine Umwandlung des Formats bieten diverse Web-Tools an.
Der Internet Explorer und prä-2018 Safari können zwar mit woff2 nicht umgehen, aber beide zusammen werden 2021 nur noch von 1% der Menschen benutzt. Kommt es auf dieses Prozent an, kann der Vorgänger, das woff-Format, genutzt werden.
Zeichenanzahl
Der zweite Hebel ist die Zeichenanzahl. Gut ausgebaute Schriften unterstützen oft sehr viele Sprachen (mit eigenen Buchstabenvariationen) und teilweise mehrere Alphabete (griechisch, kyrillisch, vietnamesisch etc.).
Daher beinhalten Schriftdateien oft über 2000 einzelne Schriftzeichen. Unser (lateinisches) Alphabet inklusive Umlauten, Satz-, Sonder- und Währungszeichen kommt mit 100-160 Zeichen aus. Je nachdem, wie viel typografische Raffinesse angemessen ist.
Wir können also sogenannte Subsets erstellen, in die wir nur die benötigten Schriftzeichen inkludieren. Damit erreichen wir erneut eine sehr starke Verringerung der Datenmenge. (Tool siehe Ressourcen)
Bei der Anwendung sollten wir die Ergebnisse gut kontrollieren: Einzelne Zeichen werden leicht vergessen, manchmal verschwinden Ligaturen.
Auch die Angemessenheit dieser etwas aufwendigeren Optimierung können wir im Auge behalten: Bei sehr wenigen Seitenaufrufen lohnt sich eine Einzelauswahl von Zeichen kaum.
Kombinieren wir beide Methoden, Format und Subset, ist allerdings eine Datenverringerung von deutlich über 90% möglich. Das sind bessere Werte als Webfont-Anbieter liefern, mit allen anderen Vorteilen. Nachhaltiger ist dann nur noch die Nutzung von Systemschriften.