Die Nutzung von Schriftarten im Web - Eine Einführung

30.06.2018 - Von Bastian Kres

Wenn es um das Design von Websites geht, ist meist die Rede von Dingen wie Struktur, Layout, Bildsprache, Farbpaletten und Animationen. Alles wichtige Komponenten die das Endergebnis stark beeinflussen, keine Frage. Was allerdings oft ein wenig ins Hintertreffen gerät ist die Entscheidung, welche Schriftarten zum Einsatz kommen sollen. Ein Fehler, denn gerade die Wahl der Schriftarten bestimmt sehr stark den Gesamteindruck, den Besucher schon beim ersten Kontakt mit der jeweiligen Website gewinnen. Aber natürlich sind nicht nur ästhetische Gesichtspunkte wichtig. Vor allem die Lesbarkeit der Inhalte steht in direkter Abhängigkeit zur verwendeten Schriftart.

Nun hat sich in den letzten Jahren viel bei der Verwendung von Schriftarten im Web getan, trotzdem ist eine so freie Nutzung wie im Printbereich immer noch schwierig.

In diesem Artikel geht es nicht darum, welche Schriftarten sich am besten für Websites eigenen. Stattdessen soll geklärt werden, wie verschiedene Schriftarten im Web eingesetzt werden können und was dabei (aus technischer Sicht) zu beachten ist.

 

Standardschriftart des Browsers

Als es in den frühen Neunzigern mit dem Internet losging, war das Web eine Zeit lang nichts anderes, als eine Sammlung von Textdokumenten. Diese Dokumente konnten damals wie heute mithilfe eines Webbrowsers betrachtet werden. Eine Festlegung, welche Schriftart für eine bestimmte Seite verwendet werden sollte gab es noch nicht, es wurde ein Standard vom Browser vorgegeben.

Diesen Standard gibt es auch heute noch. Wer eine leere HTML-Datei erstellt und beginnt Text hineinzuschreiben, wird feststellen, dass dieser Text im Browser mithilfe einer vorher festgelegten Standardschriftart dargestellt wird. Bei den meisten Betriebssystemen und Browsern handelt es sich dabei um die Times New Roman.

Hier eine Beispielseite, bestehend aus reinem HTML.

Nun ist die Times New Roman sicher keine schlechte Schriftart! Durch ihre massive Übernutzung sowohl im Print-, als auch im Webbereich, erscheint sie aber mittlerweile langweilig und unkreativ. Das dachten sich auch sehr bald „die Macher des Internets“ und es wurde nach Möglichkeiten gesucht, andere Schriftarten auf Websites verwenden zu können.

 

Systemschriftarten

Betriebssysteme werden mit einem Set an vorinstallierten Schriftarten ausgeliefert, die dann z.B. in Textverarbeitungsprogrammen wie Microsoft Word verwendet werden können. Netscape, einer der ersten Webbrowser, hat 1997 die Fähigkeit erhalten, diese bereits vorhandenen Schriftarten zu verwenden, um damit Texte auf Websites nach Wunsch der Designer darzustellen. Kurze Zeit später wurde auch bei allen anderen gängigen Browsern dieses Feature umgesetzt und ist mittlerweile Standard.

Das Problem: Betriebssysteme haben nicht alle das gleiche Set an Schriftarten installiert. Das ist auch heute noch so. Unter Windows gibt es beispielsweise eine vorinstallierte Schriftart namens „Corbel“. Diese ist aber standardmäßig nicht unter macOS oder Linux verfügbar. Dagegen ist die „Lucida Grande“ in der Regel nur auf Macs verfügbar, Windows und Linux haben diese wiederum nicht.

Eine Beispielseite, die je nach verwendetem Betriebssystem anders aussieht findet sich hier.

Verwendet ein Designer oder Webentwickler nun also eine Schriftart, die nur auf einem bestimmten Betriebssystem verfügbar ist, führt das zu Darstellungsfehlern auf vielen anderen Systemen. Dort wo die entsprechende Schriftart fehlt, wird standardmäßig wieder die Times New Roman verwendet. Das ist unerwünscht, da die angestrebte einheitliche Darstellung verloren geht.

Es musste also eine bessere Lösung gefunden werden.

 

Web Safe Fonts

Bei den „Web Safe Fonts“ handelt es sich um ein Subset (eine Teilmenge) der Systemschriftarten. Diese Schriftarten zeichnen sich dadurch aus, dass sie auf allen gängigen Betriebssystemen vorinstalliert sind. Somit können diese auch bedenkenlos auf Websites verwendet werden, da (bis auf wenige Spezialfälle) davon ausgegangen werden kann, dass die Systeme der Endbenutzer diese Schriftarten problemlos darstellen können.

Hier eine Auswahl der gängigsten Web Safe Fonts, jeweils als Link zum passenden Wikipedia-Eintrag.

Serifenschriften

Serifenlose Schriften

Monospaced

Eine Beispielseite mit allen genannten Web Safe Fonts ist hier zu finden.

Ein wichtiger Vorteil von Systemschriftarten und Web Safe Fonts: Sie müssen nicht extra aus dem Netz heruntergeladen werden, sondern können direkt verwendet werden. Das führt zu einer höheren Geschwindigkeit beim Öffnen der Website.

Nachteilig ist die mit Web Safe Fonts vorherrschende Einschränkung der Gestaltungsmöglichkeiten. Zwar umfasst die obige Liste der Web Safe Fonts einige Einträge, umfangreich ist sie aber trotzdem nicht.

 

Schrift als Bild

Um den Einschränkungen der wenigen Web Safe Fonts zu entgehen, fingen Designer schon recht früh damit an, Texte in exotischeren Schriftarten als Bilder abzuspeichern und auf Websites einzubinden. Das ist eine verständliche, aber gleich aus mehreren Gründen schlechte Idee.

  • Texte, die nur als Bilder zur Verfügung stehen, können nur sehr schwer oder gar nicht von Menschen mit Sehbehinderung oder ähnlichen Einschränkungen erkannt und gelesen werden. Es ist nicht möglich solche Texte verlustfrei zu vergrößern, um die Lesbarkeit zu erhöhen. Ebenfalls können diese Texte nicht vorgelesen werden, da Hilfsprogramme nur „echten“ Text, aber keinen Text in Bildern, erfassen können.
  • Das Gleiche gilt für Suchmaschinen. Diese finden Texte, die als Bilder dargestellt werden, ebenfalls nicht. Das führt dazu, dass solche Inhalte von Google und anderen Anbietern nicht indiziert werden. Bedeutet: Diese Inhalte tauchen nicht in den Suchergebnissen auf, die Besucher bleiben aus.

Heute findet man aufgrund der genannten Probleme dieses Vorgehen nur noch in Ausnahmefällen. Vor allem Fließtext ist auf modernen Seiten nahezu nicht mehr als Bild zu finden.

Gängige und auch sinnvolle Praxis ist die Nutzung dieser Technik aber weiterhin im Logodesign. Dort ist die richtige Darstellung der Schriftart und der Proportionen des darzustellenden Textes ein Muss.

 

Web Fonts

Als Web Fonts werden Schriftarten bezeichnet, die noch nicht auf dem System des Websitebesuchers vorhanden sind, sondern beim Öffnen einer Seite heruntergeladen und dann verwendet werden.
Dabei findet keine feste Installation statt, die Web Fonts werden nur temporär vom Browser verwendet und später wieder aus dem Zwischenspeicher gelöscht.

Die erste Implementierung, die die Nutzung von Web Fonts ermöglicht hätte, gab es bereits 1998, mit dem Internet Explorer der Version 4. Dann tat sich ca. 10 Jahre lang nichts, bis 2008 dieses Feature auch für Safari und Firefox zur Verfügung stand.
Der Grund für diese lange Verzögerung war nicht technischer, sondern rechtlicher Natur. Schriftenhersteller und Typografen hatten Angst, dass ihre mühsam entwickelten Schriftarten durch den einfachen Download über das Web illegal kopiert werden würden. Das hätte zum Verlust ihrer Existenzgrundlage geführt, da niemand mehr Lizenzgebühren zu zahlen bereit gewesen wäre.
Durch das Aufkommen von Subscription-Services für Schriften, mit klaren rechtlichen Vorgaben bezüglich der Verwendung dieser im Web, entspannte sich die Lage.

Heute gibt es mehrere solcher Anbieter, die als Vermittler zwischen den Schriftenherstellern und Endkunden agieren. Die bekanntesten kommerziellen Anbieter sind hierbei Typekit, Fonts.com und Fontspring.

2010 startete Google mit dem Produkt „Google Fonts“ eine kostenlose Alternative und setzte dabei von Beginn an auf Schriften, die unter einer freien Lizenz zur Verfügung stehen. Somit fallen bei der Nutzung keine Gebühren an.

Der Vorteil der bisher aufgelisteten Dienste ist die Einfachheit der Nutzung. Meist reicht es, einen Link auf der Website einzubinden und zu definieren, dass eine bestimmte Web Font verwendet werden soll. Im Anschluss kommt die entsprechende Schriftart sofort zum Einsatz.

Wer unter den vielen hundert Schriftarten bei Google Fonts nichts Passendes findet und auch nicht auf einen kommerziellen Anbieter ausweichen möchte, dem stehen weitere Alternativen zur Verfügung.
Auf Fontsquirrel und dafont.com lassen sich viele weitere freie Schriftarten finden und herunterladen. Diese müssen dann allerdings selbst gehostet werden, die Verwendung ist etwas komplizierter.

Auch wenn Web Fonts wie die Lösung aller bisherigen Probleme erscheinen, gibt es trotzdem einige Punkte zu beachten.

  • Web Fonts müssen beim erstmaligen Aufruf der Seite mit heruntergeladen werden. Dadurch kann es sein, dass Nutzer die Website im ersten Moment mit einer Standardschriftart angezeigt bekommen und erst kurz darauf – nach dem abgeschlossenen Ladevorgang – den Text in der eigentlichen Schriftart sehen. Das ist im Großen und Ganzen nicht schlimm, kann aber leicht irritieren wirken.
  • Je nachdem welche Schnitte (normal, fett, kursiv, fett-kursiv) einer Schriftart verwendet werden sollen, wächst die zu herunterladende Dateigröße dieser Schriftart. Für Nutzer mit langsamer Internetverbindung kann das aufgrund der längeren Wartezeit zu einem Problem werden.
  • Bei der Einbindung von Web Fonts über einen externen Anbieter entsteht ein Datenschutzproblem. Zwar ruft der Nutzer eine europäische Website auf, gleichzeitig lädt der Browser aber Daten (die Schriftart) vom Server eines amerikanischen Unternehmens (z.B. Google). Auf diese Tatsache muss in der Datenschutzerklärung hingewiesen werden. Um dieses Problem zu umgehen, können vor allem freie Schriftarten auch selbst gehostet werden. Schwierig wird das aber bei Schriftarten, die nur über eine Vermittlungsseite wie Typekit gegen Zahlung einer nutzungsabhängigen Lizenzgebühr zur Verfügung stehen.

 

Reale Anwendung

Trotz der genannten Probleme ist der Einsatz von Web Fonts heute der Standard. Gleichzeitig wird aber meist noch mit sogenannten Fallbacks gearbeitet. Bedeutet: Der Entwickler legt als erste zu nutzende Schriftart eine Web Font fest, gleichzeitig aber noch einige weitere Alternativen. Diese kommen zum Einsatz, wenn es Probleme beim Ladevorgang der Web Font gibt.

Konkret kann das dann so aussehen:

body {
    font-family: 'Muli', 'Helvetica', sans-serif;
}

Hier soll für den Text der kompletten Seite die Web Font „Muli“ verwendet werden. Ist diese nicht verfügbar, greift der Browser auf den zweiten Eintrag in der Liste zurück. Das wäre dann die Schriftart „Helvetica“. Dabei handelt es sich um eine Web Safe Font, die im Normalfall auf dem System des Nutzers vorhanden ist. Ist aber auch das nicht der Fall, soll eine serifenlose Standardschrift verwendet werden. Welche das ist, hängt dann vom jeweiligen Betriebssystem und Browser des Nutzers ab.

 


Fragen, Wünsche, Anregungen? Webentwickler aus Regensburg gesucht? Schreiben Sie mir einfach!

Kontakt