Bei der Entwicklung einer Website spielt die Arbeit mit Schriften eine wichtige Rolle. Schriften gelten als layouttragende Elemente und haben enormen Einfluss auf eine ansprechende Gestaltung.
Zwar liegt der Fokus bei der Auswahl von Schriften nachwievor auf einer guten Lesbarkeit der Inhalte, aber vor allem aufwändige Schmuckschriften werden gerne als attraktive Eyecatcher eingesetzt.
Was sind Standardschriften?
Es gibt eine Handvoll Schriftarten, die so weit verbreitet sind, dass sie von nahezu allen aktuellen (und älteren) Betriebssystemen von Haus aus unterstützt werden.
Mit anderen Worten: Sie können sich als Webdesigner darauf verlassen, dass diese Schriftarten mit hoher Wahrscheinlichkeit auf allen Endgeräten die gewünschten Ergebnisse liefern. Daher bezeichnet man sie auch als „websichere Schriften“.
Verfügbare Standardschriften im Web
Die folgenden Schriftarten gelten als Standardschriften:
- Andale Mono
- Arial, Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Helvetica, Helvetica Neue
- Impact
- Lucida Sans
- Times New Roman
- Trebuchet MS
- Verdana
- WebdingsWebdings (Symbolfont)
Beschränken Sie sich bei der Entwicklung einer Website auf diese Schriften, sollten keine Probleme auftreten und der Text auch tatsächlich so dargestellt werden, wie ursprünglich geplant.
Was sind individuelle Webfonts?
Der Begriff „Webfont“ setzt sich zusammen aus „Web“ als Abkürzung für „World Wide Web“ und „Font“, dem englischsprachigen Wort für „Schriftart“.
Bei Webfonts handelt es sich also um Schriftdateien, die bei der Gestaltung von Websites zum Einsatz kommen. Sie sind auf alle Formen von Text (z.B. Überschriften, Fließtext, Aufzählungen) anwendbar.
Grundsätzlich unterscheidet man zwei Arten von Webfonts:
- Schmuckschriften (z.B. für Überschriften und Hervorhebungen)
- Grundschriften (z.B. für Fließtext)
Nicht jede Schrift eignet sich gleichermaßen für alle Anwendungen…
Besonders aufwendige Fonts mit stark dekorativem Charakter würden beispielsweise die Lesbarkeit von Fließtexten stark herabsetzen und sollten deshalb für diese Textart nicht gewählt werden.
Bezugsquellen für Webfonts
Webfonts können direkt von spezialisierten Anbietern bezogen werden, den sogenannten Font Foundries. Alternativ finden sich im Web eine Vielzahl an Schriftportalen und -sammlungen.
Wer es besonders individuell mag, kann auch einen Schriftdesigner mit der Gestaltung einer eigenen Schriftart beauftragen. Vor allem große Unternehmen nutzen diese Möglichkeit einer „Hausschrift“ für ihre Corporate Identity.
Erste Anlaufstellen für Fonts finden Sie im Internet unter den Suchbegriffen „fonts download“ oder „webfonts“.
Implementierung eigener Schriften via CSS
Heruntergeladene Schriften können mit der CSS-Regel @font-face relativ unkompliziert in jede beliebige Website eingebunden werden.
Bei CSS (Cascading Style Sheets) handelt es sich um eine Möglichkeit, das Aussehen von Websites zu definieren. Die in CSS definierten Gestaltungsanweisungen werden dann vom Webbrowser des Nutzers auf den Inhalt der Website angewendet.
Hier ein paar Lesetipps zum Thema CSS (Links öffnen in einem neuen Tab):
- Einführung in CSS
- Tutorial: Schriften via CSS in Websites einbetten
- Stichwort „CSS“ (weitere Artikel zu Cascading Style Sheets)
Webfonts – worauf Sie achten sollten
Lizenzbestimmungen und Kosten
Im Netz finden Sie sowohl kostenlose als auch kostenpflichtige Fonts mit den verschiedensten Lizenzmodellen (ja, auch „kostenlose“ Fonts sind oft nicht uneingeschränkt nutzbar!).
Es ist daher sehr wichtig, sich mit dieser Thematik auseinanderzusetzen und zu prüfen, ob der gewünschte Font vom Rechteinhaber auch so angeboten wird, wie er schlußendlich genutzt werden soll.
Eine gesunde Portion Skepsis ist bei „Gratis-Fonts“ angebracht: Im Netz tummeln sich etliche unseriöse Schriftdatenbanken, die Tausende von Fonts für lau anbieten – in vielen Fällen ohne Zustimmung der tatsächlichen Eigentümers. Und das kann für Sie böse enden:
Im Zweifelsfall haften Sie nämlich für Urheberrechtsverletzungen und können für die unautorisierte Nutzung einer urheberrechtlich geschützten Schrift straf- und zivilrechtlich belangt werden.
Ähnliches gilt für gekaufte Schriften, die Sie beispielsweise zusammen mit einer Publishing-Software erworben haben. Ob Sie diese Schriften auch für Ihre Website einsetzen dürfen, sollten Sie vorab mit dem Hersteller klären.
Anmerkungen zum Urheberrecht bei Schriften
Die Frage, inwieweit Schriften überhaupt Urheberrechtsschutz genießen, hängt vom jeweiligen Rechtssystem ab, ist also mitunter tatsächlich eine Frage des eigenen Standorts.
Im deutschen Urheberrecht sind alle Werke der angewandten Kunst geschützt. Ob die sogenannte „Schöpfungshöhe“ (Maß an Individualität von persönlicher, geistiger Arbeit) aber tatsächlich von (allen) Schriften erreicht wird, gilt als umstritten:
Fakt ist, dass man zwischen Gebrauchsschriften (ich habe sie weiter oben „Grundschriften“ genannt) und Schmuckschriften unterscheidet.
Bei einer Grundschrift kommt es vor allem auf eine gute Lesbarkeit an. Das wäre nicht wirklich ein starkes Merkmal für eine individuelle, geistige Schöpfung; dennoch ist ein urheberrechtlicher Schutz möglich.
Bei Schmuckschriften sieht die Sache definitiv anders aus, denn hier kommt es ja gerade auf die kreative Umsetzung an. Daher ist ein urheberrechtlicher Schutz auch wahrscheinlicher.
Sie sehen, es hängt vom Einzelfall ab; wirklich klare Regeln existieren nicht und sind dann vor Gericht tatsächlich Auslegungssache. Seien Sie deshalb vorsichtig beim Einsatz von Webfonts und holen am besten stets die schriftliche Erlaubnis des Designers ein!
Datenschutz
Viele Anbieter von Schriften bieten die Möglichkeit, Fonts direkt von deren Servern zu laden, sozusagen „aus der Cloud“. Das mag wie eine gute Idee klingen, ist es aber aus zwei Gründen nicht:
Erstens verlieren Sie die Kontrolle über die eingebundene Schrift. Geht der Server des Fontslieferanten offline, sieht Ihre Website schnell um einiges weniger attraktiv aus. Außerdem können Sie die Ladezeiten der Fonts – und damit die Performance Ihrer Website – nicht beeinflussen.
In der Vergangenheit gab es bereits Fälle, in welchen Anbieter für Fonts-Hosting mehr oder weniger „über Nacht“ ihre Dienste einstellten und so vielen Webmastern und Agenturen Kopfschmerzen bereiteten.
Zweitens gilt eine solche Einbindung nicht als datenschutzkonform im Sinn der DSGVO (Datenschutz-Grundverordnung). Insbesondere Betreiber kommerziell genutzter Websites setzen sich hier einem nicht unerheblichen Abmahnrisiko aus.
Der Grund liegt darin, dass beim Laden der Fontsdatei die IP-Adresse des Besuchers Ihrer Website an den Fontslieferanten übertragen wird. Laut einer (umstrittenen) Gerichtsentscheidung gelten IP-Adressen als personenbezogene Daten, deren Weitergabe explizit zustimmungspflichtig wäre.
Kurz gesagt: Es ist sinnvoller, Webschriften lokal auf dem eigenen Server zu hosten!
Auswirkungen auf die Seitenperformance
Je nach Zeichenvorrat und Dateiformat benötigt eine Schriftart zwischen unter 50 KB und über 500 KB Speicherplatz. Im Großen und Ganzen ist sie also mit einem gut aufgelösten Foto vergleichbar.
Aus gestalterischen Gründen sollten nicht mehr als zwei bis drei verschiedene Schriftarten auf einer Website zum Einsatz kommen.
Zusammengefasst lässt sich festhalten, dass die Auswirkungen von Webfonts auf die Ladezeit eher gering ausfallen. Jedenfalls, wenn Sie es nicht allzu sehr übertreiben.
Suchmaschinen-Optimierung (SEO)
Haben Sie schon einmal etwas vom Cumulative Layout Shift (CLS) als Bewertungskriterium für die Nutzererfahrung gehört?
Auf gut Deutsch ist das so etwas wie die „aufsummierte Layoutverschiebung“: Dabei handelt es sich um für den Nutzer unerwartete Layoutverschiebungen während des Ladevorgangs einer Webseite.
Bei eingebundenen Webfonts kann dieser Effekt auftreten, wenn der betreffende Font bereits genutzt wird, obwohl er noch gar nicht definiert wurde. In diesem Fall verwendet der Webbrowser nämlich eine Standardschriftart.
Aufgrund unterschiedlicher Laufweiten und anderer Attribute können nach dem Laden des Webfonts dann Verschiebungen des Inhalts auftreten. Das könnte wiederum Nutzer verwirren. Was bei Suchmaschinen zur Abstufung der betreffenden Site im Ranking führen kann.
Verhindern lässt sich CLS beispielsweise, indem der Webfont beim Laden der Seite direkt im Kopfbereich definiert wird, noch bevor das erste Zeichen der Website im Browser dargestellt wurde. Siehe dazu unser Tutorial zur Einbindung von Schriften via CSS.
Verfügbare Dateiformate
Je nach Anbieter liegen Webfonts in unterschiedlichen Formaten vor. Zu den von den meisten modernen Webbrowsern unterstützten Formaten zählen die folgenden (sortiert nach Popularität):
- WOFF, WOFF2 (Web Open Font)
- OTF (OpenType Format)
- TTF (TrueType Fonts)
Die gute Nachricht: Alle modernen Webbrowser unterstützen das Einbinden externer Schriftarten via CSS mit diesen Formaten! 🙂
Insbesondere WOFF und WOFF2 bieten eine starke Komprimierung und erreichen dadurch sehr kurze Ladezeiten, was sich positiv auf die Performance der Website auswirkt.
Wenn Sie absolut sichergehen möchten, bieten Sie dem Browser beim Laden der Website mehrere Formate an (z.B. WOFF2 und TTF). Der Browser wählt dann automatisch die für ihn geeignete Variante.
Zeichenvorrat
Gerade günstige (oder kostenlose) Webfonts unterstützen oft nur einen begrenzten Zeichenvorrat. Vor der Nutzung sollten Sie daher prüfen, ob beispielsweise deutsche Umlaute und andere von Ihnen benötigte Sonderzeichen vorhanden sind.
Fallback?!
Es gibt viele Gründe, weshalb ein Webfont vom Browser nicht geladen werden kann. Zum Beispiel:
- Die Fontsdatei ist beschädigt oder liegt in einem inkompatiblen Format vor.
- Ein Privacy-Plugin auf dem Endgerät des Besuchers verhindert das Laden der Schrift.
- Der Browser wurde in den Einstellungen angewiesen, nur Standardschriften zu nutzen.
Sie sollten deshalb während der Entwicklung einer Website prüfen, wie sich deren Layout in solchen Fällen verhält und sicherstellen, dass die Inhalte stets lesbar bleiben. Oft genügt es, eine ähnliche Standardschrift als Fallback festzulegen.
Autor: Tobias Eichner | Datum der Veröffentlichung: März 2023
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
