Damit Ihre Website gut lesbar ist: Hier finden Sie Schriften Damit Ihre Website gut lesbar ist: Hier finden Sie Schriften

Damit Ihre Website gut lesbar ist: Hier finden Sie Schriften

Die richtige Schrift erhöht nicht nur die Lesbarkeit einer Website, sondern ganz allgemein das Lesevergnügen. Weil Fonts oft einen hohen Wiedererkennungswert haben, spielen sie auch für das Marketing eine wesentliche Rolle. Wir zeigen Ihnen, worauf es ankommt.

Mauro Landolt Mauro Landolt · Head of Communication

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.

Drei übliche kostenpflichtige Webfont-Lizenzmodelle und ihre funktionale Einbindung (eigene Darstellung nach type-together.com).

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.

Webfont-Bibliotheken bieten oft einen Vorschau-Modus, mit dem sich ein beliebiger Beispieltext in verschiedenen Schriften anzeigen lässt (Screenshot von fonts.google.com).

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.

Anordnung von Bildern zur Veranschaulichung einer schönen Website über Reisefotografie Anordnung von Bildern zur Veranschaulichung einer schönen Website über Reisefotografie

So einfach wie möglich zur neuen Website?

Mit unserem Website-Baukasten «Sites» stellen Sie in wenigen Schritten und ohne technische Vorkenntnisse Ihre eigene Website selber zusammen. Ganz einfach!

Sites 30 Tage kostenlos testen Sites 30 Tage kostenlos testen