Die Wahl der passenden Schrift (Englisch: «font») ist für das gesamte Design einer Website sehr wichtig. Sie trägt massgeblich zum Erscheinungsbild und zur Lesbarkeit bei. Wer eine eigene Website gestaltet, sollte sich deshalb auch unbedingt frühzeitig Gedanken über die Schriften machen.
Beim Design einer Website sollte ein möglichst barrierefreier Lesefluss für die Besuchenden eines der obersten Ziele sein. Je lesbarer der Text gestaltet ist, desto besser kommen beispielsweise Menschen mit eingeschränktem Sehvermögen oder Legastheniker damit zurecht. Aber auch für Menschen ohne Seheinschränkungen können die eingeblendeten Schriften unterschiedliche Auswirkungen auf das Leseempfinden haben. Denn insbesondere für das Lesen am digitalen Bildschirm kann eine einladende und möglichst bequem zu lesende Schrift den Unterschied ausmachen. Punkto Gestaltung gilt als Faustregel beispielsweise, dass starke Kontraste und – bei Lauftexten – eine linksbündige Ausrichtung die Lesbarkeit erhöhen.
Webfonts sorgen für einen individuellen Touch
Einige der bekanntesten Schriftarten wie Arial, Verdana oder Times New Roman sind auf Rechnern mit Windows- oder Mac-Betriebssystemen sowie in den verbreitetsten Browsern vorinstalliert. Solche vorinstallierten Fonts werden «websichere Schriften» genannt, üblich sind auch die Bezeichnungen «Systemschriften» oder «Browserschriften». Eine Ausnahme ist das Android-Betriebssystem, das gänzlich ohne websichere Schriften auskommt.
Websichere Schriften haben den Vorteil, dass sie auf beinahe allen Geräten und Browsern bereits zur Verfügung stehen und immer genau gleich aussehen. Weil sie auf sehr vielen Websites zum Einsatz kommen und auch für Textdokumente verwendet werden, fehlt ihnen jedoch etwas die individuelle Ausstrahlung. Für Anwendungen, bei denen Originalität gefragt ist (beispielsweise für Marketing- und Branding-Zwecke), sind Systemschriften deshalb meist ungeeignet und daher selten gefragt.
Wer die eigene Website persönlicher gestalten und ihren Wiedererkennungswert erhöhen möchte, sollte Schrifttypen verwenden, die von Designern individuell gestaltet wurden. Im Fachjargon heissen solche Schriftarten Webfonts. Viele Content-Management-Systeme (CMS) enthalten eine Reihe vorinstallierter Webfonts, die sich einfach einsetzen lassen.
Eine umfassendere Auswahl an Webfonts bieten allerdings zahlreiche spezialisierte Schriftdatenbanken im Internet. Von diesen Fonts-Bibliotheken können individuelle Webfonts – oft kostenlos – heruntergeladen und in die eigene Website eingebunden werden. Dabei gilt es jedoch einige Regeln zu beachten: Ähnlich wie bei Bildern gibt es nämlich lizenz- und kostenpflichtige sowie lizenzfreie und kostenlose Fonts. Je nach Standort der Datenbank gelten beim Download von Webfonts zudem spezifische Datenschutzvorschriften.
Thema Schriftlizenzen: Das müssen Sie wissen
Wie beim Bildmaterial gilt auch bei Schriften, dass sie grundsätzlich urheberrechtlich geschützt sind. Das Eigentum an einem Font kann man nicht kaufen: Wer eine Lizenz für eine Schrift erwirbt – sei es kostenlos oder gegen eine Lizenzgebühr – erhält immer nur das Nutzungsrecht, nicht aber das Eigentum.
Es gibt eine Reihe von bekannten Schriftenbibliotheken im Netz, die lizenz- und kostenpflichtige Fonts anbieten. Dazu zählen unter anderem Adobe Fonts, Linotype oder (zum Teil) auch MyFonts. Und für solch kostenpflichtige Schriften gibt es verschiedene Bezahlmodelle.
Beim «Pay as you go»-Modell wird dem Website-Betreiber mit der initialen Bezahlung eine gewisse Menge an Pageviews zugestanden. Ist diese aufgebraucht, muss der Betreiber weitere Pageviews nachlizenzieren und bezahlen. Daneben gibt es das Bezahlmodell «Pay once», bei dem eine Annahme für den durchschnittlichen Traffic pro Monat getroffen wird. Solange sich die Pageviews in diesem Rahmen bewegen, sind nach den initialen Gebühren keine Zusatzkosten mehr fällig.
Beide Modelle basieren auf dem technischen Prinzip, dass die Schriften auf dem jeweiligen Webserver eingebettet bzw. gehostet werden, wobei beim «Pay as you go»-Modell ein Tracker im Code eingebaut ist, welcher die Pageviews zählt. Demgegenüber gibt es noch das Schriftlizenzierungsmodell, bei dem Fonts über einen abonnierten Web-Service ausgeliefert werden und nicht selbst gehostet werden müssen.
Kostenlose Schriftendatenbanken bieten Nutzenden häufig «lizenzfreie» Schriften zum Herunterladen an. Dies bedeutet allerdings nicht, dass für die Verwendung dieser Schriften keine Lizenz nötig ist. Und vor allem: «Lizenzfrei» heisst nicht automatisch auch kostenlos. Kostenlos sind lizenzfreie Schriften immer nur dann, wenn dies in der jeweiligen Lizenz so festgelegt ist.
«Lizenzfrei» bedeutet nämlich einzig, dass eine Schrift nach dem Erwerb einer einmaligen Lizenz frei oder mit nur geringen Einschränkungen genutzt werden kann, ohne dass erweiterte Lizenzen notwendig sind. Bei lizenzpflichtigen Schriften ist der Umfang ihrer Nutzung dagegen an genau definierte Vorgaben gebunden. Mehr zum Thema Lizenzen erfahren Sie auch in diesem Blogartikel.
Kostenlose Schriftdatenbanken im Internet
Nachfolgend stellen wir einige bekannte und beliebte Font-Datenbanken vor, die vollumfänglich oder zum Teil kostenlose Schriften enthalten. Je nach gewünschtem Verwendungszweck empfiehlt es sich zudem, vor dem Herunterladen zu prüfen, ob eine Schrift nur zu privaten oder auch zu kommerziellen Zwecken genutzt werden darf. Auskunft geben in der Regel die jeweiligen Lizenzbestimmungen.
- Google Fonts
Google Fonts ist eine der populärsten Bibliotheken mit derzeit mehr als 1400 kostenlosen Schriften, die frei genutzt werden können. Die 2010 ins Leben gerufene Plattform wird konstant aktualisiert und um neue Fonts erweitert. - MyFonts
Die 1999 gegründete Plattform MyFonts umfasst mehr als 130’000 digitale Schriften und ist damit eine der weltweit grössten Schriftdatenbanken. MyFonts bietet ihren Nutzenden sowohl kostenpflichtige als auch kostenlose Schriften. - Fontspace
Auf Fontspace finden Webdesigner eine Auswahl an über 92’000 kostenlosen Schriften, die teilweise auch für die kommerzielle Nutzung lizenziert sind. - DaFont
Die DaFont-Schriftendatenbank verfügt über rund 10’000 Schriften für den kostenlosen Download, vor allem für die private Nutzung. - Font Squirrel
Font Squirrel ist eine bekannte Plattform für kostenlose Schriften, die auch kommerziell verwendet werden dürfen. - Font Freak
Von Font Freak lassen sich mehr als 9000 kostenlose Schriften herunterladen. Zusätzlich bietet die Plattform eine Auswahl von Zehntausenden kostenpflichtigen Schriften. - 1001Fonts
Auch 1001Fonts bietet mit einer Bibliothek mit mehr als 20’000 Schriften eine umfangreiche Auswahl. Ein Teil der Fonts darf allerdings nur zu privaten Zwecken verwendet werden. - Schriftarten-Fonts
Die deutsche Schriftenbibliothek Schriftarten-Fonts umfasst rund 13’000 kostenlose Schriften. Alle Fonts eignen sich laut den Angaben der Plattform für die Verwendung in MS Word. - Designer in Action
Die Plattform Designer in Action bietet Gestaltern neben Schriften auch Photoshop-Effekte, Plugins und andere nützliche Tools zum kostenlosen Download. Die Auswahl ist mit gerade mal 340 Schriften klein, aber fein.
Webfonts in die eigene Website einbinden
Webfonts werden in der Regel auf einem Webserver gespeichert und in die Website eingebunden. Bei einem Seitenbesuch werden die Schriften dann vom jeweiligen Browser geladen. Etwas anspruchsvoller ist die direkte Einbindung von Fonts in das CSS (Cascading Style Sheet) der Website.
Webfonts zum Herunterladen können unterschiedliche Dateiformate haben, verbreitet sind vor allem das TTF (TrueType-Format) und das OTF (OpenType-Format). Der Download von TTF- und OTF-Webfonts aus Schriftdatenbanken erfolgt heute standardmässig im komprimierten WOFF-Dateiformat (Web Open Font Format). Die Komprimierung erlaubt einen schnelleren Download; die Metadaten von WOFF-Dateien können zudem Zusatzinformationen zu den Lizenzen enthalten. WOFF-Dateien werden von allen gängigen Browsern unterstützt und lassen sich in das CSS einer Website einbinden.
Achtung
Nach der Einbindung eines Webfonts tritt beim Laden der Website möglicherweise das Phänomen «Flash of unstyled text» («FOUT») auf. Die Website wird in diesem Fall zunächst nicht mit dem gewünschten Webfont, sondern mit einer websicheren Systemschriftart dargestellt. Grund dafür kann eine schwache Internetverbindung oder ein schlecht performender Webfont sein. Sobald der Webfont richtig geladen ist, sieht auch die Website wieder wie gewünscht aus. Ein FOUT ist harmlos, kann Seitenbesucher aber verwirren und ist nicht zuletzt unästhetisch. Deshalb empfiehlt es sich, gute Fallback-Schriften zu definieren, die optisch möglichst nahe an der finalen Schrift sind. Der FOUT wiegt dann visuell nicht so schwer und wird von Google in Bezug auf SEO auch besser bewertet. Lesen Sie dazu mehr in unserem kürzlich erschienenen Blogartikel zu den Core Web Vitals.
Vorsicht vor Datenschutz-Regelungen
Auch wenn das Laden und Einbinden kostenloser Schriften über Webservices wie Google Fonts einfach und dadurch verlockend ist, sollten sich Website-Betreiber (auch in der Schweiz) bewusst sein, dass dies unter Umständen der Europäischen Datenschutz-Grundverordnung (DSGVO) unterliegt und eine ausdrückliche Einwilligung der Website-Besucher erfordert. Sobald ein User auf eine Website mit Google Fonts oder Schriften einer anderen Font-Plattform gelangt, werden gewisse Daten zu Analysezwecken an die Plattform-Betreiber gesendet.
In einem Aufsehen erregenden Gerichtsurteil des Landgerichts München vom 20. Januar 2022 wurde festgehalten, dass die dynamische Einbindung von Webservices wie Google Fonts ohne Einwilligung der Besucher datenschutzwidrig ist. Dieses Urteil könnte sich zum Präzedenzfall entwickeln, dessen sich auch Schweizer Website-Betreiber bewusst sein sollten. Denn schliesslich gibt es bereits seit 2002, also einige Jahre vor Einführung der DSGVO, die sogenannte «Datenschutzrichtlinie für elektronische Kommunikation» (auch ePrivacy-Richtlinie), welche 2009 durch die Cookie-Richtlinie erweitert wurde.
Wer aber trotzdem nicht auf seine Lieblings-Schrift von Anbietern wie Google Fonts, Adobe Fonts oder MyFonts verzichten will, der sollte diese nicht als Webservice einbinden, sondern sie stattdessen herunterladen und lokal hosten. Ebenfalls empfiehlt es sich, den Benutzern beim Aufruf der Website ein DSGVO-konformes Zustimmungsfenster (sog. «consent banner») anzuzeigen.
Webfonts für meine Hostpoint-Website
In gebräuchlichen Content-Management-Systemen wie WordPress, Drupal oder Joomla! können Nutzende neben den vorinstallierten Schriftarten zusätzlich auch Webfonts für ihre Website hochladen und einbinden. Dabei spielt es keine Rolle, ob es sich um Fonts einer kostenlosen Plattform oder um einen eigens für die jeweilige Website designte Schrift handelt. Je nachdem ist jedoch ein gewisses Mass an technischem Wissen nötig, um Webfonts einzubinden. So ist dies beispielsweise mit dem kürzlich veröffentlichten WordPress 6.0 nicht ganz so einfach, wie man vielleicht erwarten würde (lesen Sie dazu mehr in unserem Blogbeitrag zu WordPress 6.0). Unser Hostpoint-Support steht Website-Betreibenden jedoch jederzeit gerne für Fragen zur Einbindung von Schriften zur Verfügung.
