Schriften auf Websites | In 5 Schritten DSGVO-konform

Schriften – Vorbemerkungen

Schriften sind notwendig, um Texte überhaupt darstellen zu können. Auf jedem PC, Tablet oder Smartphone ist mindestens eine Schriftart vorinstalliert, die sogenannte Systemschrift. Darüber hinaus stehen Ihnen weitere Schriftarten (Fonts) zur Verfügung, die zum Teil ebenfalls systemtypisch sind. Am größten ist die Auswahl auf PCs mit den Betriebssystemen von Apple (macOS) und Microsoft (Windows), während auf Smartphones (iOS oder Android) nur sehr wenige Schriften angeboten werden. Außerdem ist es auf diesen Geräten nur sehr begrenzt möglich, die automatisch verwendete Schriftart durch eine andere zu ersetzen.

Da die systemspezifischen Schriften auf Geräten mit einem anderen Betriebssystem nicht darstellbar sind, werden sie in der Regel beim Aufrufen von externen Dokumenten durch eine „systemeigene“ ersetzt. Das hat zur Folge, dass sich unter Umständen Textzeilen verschieben und sich die ursprüngliche Gestaltung eines Dokuments verändert. Um eine systemübergreifend gleiche Darstellung zu erreichen, können Sie eine der (fast) überall darstellbaren Standardschriften (s. Standard-Schriften) nutzen oder externe Fonts installieren.

Schrifttypen

Einerseits unterscheiden sich Schriften nicht nur in der Höhe, Breite und Stärke der einzelnen Zeichen sowie deren Abstand zueinander, sondern auch in deren Basis-Gestaltung. Dementsprechend werden Sie in fünf Familien (Schrifttypen) unterteilt:

• Serif: Schriften mit kleinen Querstrichen oder Schnörkeln an den Enden der Zeichen.
• Sans Serif: Schriften ohne Serifen.
• Display Fonts: Große, meist fett gestaltete Zeichen.
• Handwriting: Einer Handschrift nachempfundene, geschwungene Schriften.
• Monospace: Nichtproportionale Schriften mit einer festen Zeichenbreite.

Nicht jede Schriftart für jeden Zweck gleich gut geeignet. So werden Serifen-Fonts „auf Papier“ (Bücher, Zeitungen, etc.) als besser lesbar empfunden, wogegen sich im Internet Fonts ohne Serifen bewährt haben. Allerdings ist das kein Muss, sondern primär eine Frage der persönlichen Vorliebe.

Anders sieht das bei Display- und Handschriften aus. Diese sollten Sie nicht für längere Texte (Fließtext) verwenden, sondern nur sparsam und gezielt einsetzen. So eignet sich der Typ Display für auffällige Titel / Überschriften, Handschriften hingegen nur als Schmuckschrift für Titelblätter, besonders hervorgehobene Textzeilen, Zitate o. ä. Aufgrund Ihres gleichmäßigen und eindeutigen Schriftbilds finden Monospace-Schriften vor allem im Programmierbereich / (Text-)Editor Verwendung.

Schriftstile

Der Begriff Schriftstil schließt sowohl die Neigung der Zeichen als auch die Schriftstärke ein. So gibt es Schriften, für die nur ein Stil zur Verfügung steht und andere, die als Paket mit normalen und kursiven (italic) Varianten angeboten werden. Außerdem sind in vielen Paketen auch unterschiedlich Schriftstärken enthalten. Diese sind in folgende CSS-Klassen unterteilt:

• 100: Thin (fein)
• 200: ExtraLight (extraleicht)
• 300: Light (leicht)
• 400: Regular (normal)
• 500: Medium (medium, leichthalbfett)
• 600: SemiBold (halbfett)
• 700: Bold (fett)
• 800: ExtraBold (extrafett, kräftig)
• 900: Black (schwarz, ultrafett)

Zwar können Sie die Neigung bzw. Stärke der Zeichen auch in Ihrem Schreibprogramm ändern, indem Sie Wörter als kursiv (italic) oder fett (bold, strong) markieren. Allerdings ist das Ergebnis nicht unbedingt befriedigend bzw. die Anpassung wird manchmal nicht wirksam, sofern im Schrift-Paket keine kursiven oder fetten Varianten vorgesehen waren.

Schriften auf Websites

Natürlich wird die Wahl der Schriftart(en) auf Websites ebenfalls vom persönlichen Geschmack bestimmt. Allerdings trägt die Schrift in diesem Fall noch mehr zum Gesamteindruck bei als bei anderen Dokumenten. Schriften werden somit nicht nur zur reinen Darstellung von Text eingesetzt, sondern sind auch ein Gestaltungselement – Stichwort Corporate Design. Aus diesem Grund ist bei Websites der Faktor der geräte-, system- und browser-übergreifend einheitlichen Darstellung noch wichtiger.

Außerdem soll bei eine Website sowohl der visuellen Gesamteindruck als auch der Aufbau immer gleich bleiben. Würden beispielsweise die bei der Erstellung verwendeten Schriften auf anderen Geräten durch kleinere, schmalere bzw. breitere, höhere ersetzt, könnten sich die darüber, daneben oder darunter befindlichen Elemente verschieben. Systemspezifische Schriften sind deshalb für Websites nicht geeignet, es sei denn, Sie würden Sie auf dem Server Ihrer Website installieren.

Typografie – Font-Auswahl

Wahrscheinlich werden die meisten Websites heute auf der Grundlage von Themes oder vorgefertigten Vorlagen erstellt. Hierfür laden Sie die zugehörigen Dateien auf den Server, auf dem Sie Ihre Website hosten. Unter anderem ist in dem Paket auch eine Datei mit Icons und Fonts enthalten. Jedoch gibt es dabei einen Haken.

Diese Fonts werden nur für die Texte Ihres CMS bzw. die Beschreibungen der Theme-Optionen usw. verwendet. Dementsprechend sind es nicht die Schriften, die Ihnen später im Customizer bzw. in den Text-Modulen für das Design Ihrer Website angeboten werden. Einerseits finden Sie dort die Standard-Schriften oder zumindest einige. Solange Sie sich für eine dieser Schriften entscheiden, sind Sie auf der sicheren Seite, da die Schriften nicht von einem bestimmten Server geladen werden müssen. Andererseits sind sie für die Gestaltung einer Website weniger beliebt, da sie nicht besonders zur Individualität Ihrer Website beitragen und irgendwie langweilig sind.

Um einiges größer und für die individuelle Gestaltung interessanter ist das Angebot sonstiger Schriften der unterschiedlichsten Typen und Stile. Normalerweise handelt es sich um Google Fonts, die eben nicht auf Ihrem Server installiert sind, sondern jeweils beim Aufrufen der Website direkt von Google Servern geladen werden. Genau das führt auf in der EU betriebenen und/oder in der EU aufrufbaren Websites zu Problemen (s. Schriften und die DSGVO).

Standard-Schriften

Um auf Nummer sicher zu gehen, können Sie sich für eine sogenannte websichere Standard-Schrift entscheiden, die zumindest auf vielen Geräten und in den neueren Browsern korrekt dargestellt wird. Die Auswahl ist jedoch recht begrenzt und hängt auch vom verwendeten Theme ab:

• Mit Serifen: Georgia und Times New Roman (nicht alle bei jedem Theme)
• Ohne Serifen: Arial (Arial Black, Arial Narrow), Trebuchet MS, Verdana (nicht alle bei jedem Theme) sowie
• mit Einschränkungen Lucida Sans Unicode (nur Windows) bzw. Lucida Grande (nur macOS) und Tahoma (nicht iOS).

Besitzer von Android-Geräten bleiben jedoch auch bei den Standard-Schriften außen vor.

Externe Fonts

Als Alternative zu den bereits erwähnten Standard-Schriften können Sie entweder Schriften von Anbietern im Internet verwenden oder sich Ihre eigene Schrift gestalten (lassen). Letzteres dürfte wohl nur für größere Unternehmen in Frage kommen. Im Internet finden Sie eine Reihe von Anbieter, auf deren Websites Sie Fonts auswählen und herunterladen können. Manche bieten kostenlose Schriften an, andere nur kostenpflichtige oder beide Varianten. Einige bekannte Anbieter sind

Alle Fonts sind auf den Servern der jeweiligen Anbieter gespeichert. Deshalb müssen Sie externe Schriften immer herunterladen, selbst auf Ihrem Server installieren und in das CMS einbinden. Am bekanntesten und beliebtesten sind Google Fonts. Zwar besteht die Möglichkeit, diese Schriften direkt vom Google Server abzurufen und nicht selbst zu installieren, aber das ist aktuell keine echte Option.

Unabhängig davon, für welchen Anbieter Sie sich entscheiden, besteht immer das Risiko, dass die Fonts plötzlich aus dem Programm genommen werden bzw. das Unternehmen verschwindet. Wenn Sie sie jedoch bereits heruntergeladen und selbst gehostet haben, entsteht dadurch i. d. R. kein wirklicher Schaden.

Schriften und die DSGVO

Beim Aufrufen einer Website, auf der Google Fonts direkt von Google Servern geladen werden, wird die IP-Adresse der Besucher an Google (u. U. auch in die USA) übermittelt. Die IP-Adresse gehört jedoch zu den personenbezogenen Daten, deren Verarbeitung besonderen Vorschriften unterliegt. So muss der Betreiber sein berechtigtes Interesse an der Datenübertragung darlegen und die Besucher müssen aktiv dazu einwilligen. Jedoch gestaltet sich das bei Schriften schwierig, da sie bereits geladen werden, bevor eine Zustimmung der Website-Besucher überhaupt möglich ist.

Darüber hinaus ist ein Datentransfer in Nicht-EU-Länder generell nicht erlaubt und nach der aktuellen Rechtssprechung betrifft das auch die Verwendung von Google Fonts. Obwohl es in dem Verfahren nur um diese ging, ist das Ergebnis auch auf andere Schriften-Anbieter außerhalb der EU übertragbar, da die Grundlagen dieselben sind. Auch der Nachweis eines berechtigten Interesses ist kaum möglich, da Sie andere Schriften verwenden können, ohne dass eine Verbindung zu externen Servern hergestellt wird.

Schriften selbst hosten

Aufgrund der Problematik des Datentransfers müssen Sie, abgesehen von den Standard-Schriften, alle externen Fonts selbst hosten. Das bedeutet, dass Sie die Schriften auf dem Server installieren, auf dem Ihre Website liegt. Nur so können Sie sie rechtskonform auf Ihrer Website einsetzen.

Bevor Sie eine Schrift bei einem externen Anbieter auswählen und herunterladen, lesen Sie in jedem Fall die Lizenzbedingungen. So gibt es sowohl kostenlose als auch kostenpflichtige Fonts, die Sie frei verwenden dürfen. Andere dürfen Sie zwar für private Zwecke (auf Ihrem PC) nutzen, aber nicht kommerziell, also auch nicht auf einer öffentlichen Website.

Bei den folgenden Ausführungen dienen Google Fonts aufgrund ihrer Popularität als Beispiel. Das beschriebene Verfahren ist jedoch auch auf das Hosten von Schriften aus anderen Quellen übertragbar.

Google Fonts

Der Vorteil von Google Fonts ist, das die Schriften kostenlos sind und auf öffentlichen Websites verwendet werden dürfen. Außerdem sind einige „beliebte“ Schriften in den Themes/Vorlagen bereits „vorhanden“ (s. Typografie – Font-Auswahl). Deshalb erscheinen zumindest einige von ihnen auf vielen Websites und die Internetnutzer haben sich inzwischen an die Schriftbilder gewöhnt. Normalerweise werden sie direkt von Google Servern abgerufen (s. Schriften und die DSGVO).

Allerdings gibt es auch Nachteile. Einerseits ist das Angebot so groß, dass die Entscheidung, welches nun die passende Schrift für einen bestimmten Zweck ist, schwer fällt. Andererseits sind nicht alle Fonts durchgehend sauber gestaltet, so dass zumindest einige nicht unbedingt als qualitativ hochwertig zu bezeichnen sind. So kommt es immer wieder vor, dass bei einem oder wenigen Zeichen Teile fehlen oder anders gestaltet sind. Leider fallen die „Schönheitsfehler“ nicht selten erst dann auf, wenn Sie sie bereits installiert haben und verwenden.

Wie viele Schriften sind notwendig?

Zunächst sollten Sie sich überlegen, für welchen Zweck Sie sie einsetzen möchten. So können Sie die meisten, für Fließtext geeigneten Fonts auch für Überschriften verwenden. Andere, die als Überschrift gut aussehen würden, sind für den Fließtext zu fett oder breit. Auch sehr verspielte Fonts eignen sich höchstens für den Titel auf der Startseite, aber nicht als Zwischenüberschriften oder gar als Fließtext.

Falls Sie für Überschriften eine andere Schrift als für den Text in Erwägung ziehen, stellt sich die Frage, ob beide derselben Gruppe (s. Schrifttypen) angehören sollen oder nicht. Mehr als zwei Fonts / -arten sind normalerweise weder notwendig noch empfehlenswert. Nicht alle Fonts harmonieren miteinander. Einerseits sollten sie sich nicht zu sehr ähneln, andererseits sollte aber der zweite auch nicht zu „exotisch“ sein.

Schritt 1 – Suche

Nachdem Sie die Google Fonts Website aufgerufen haben, können Sie im oberen Bereich gezielt nach einem bestimmten Font suchen sowie den vorgegebenen Beispielsatz durch einen eigenen ersetzen. Es wäre von Vorteil, wenn dieser möglichst viele Buchstaben des Alphabets Ihrer Sprache enthielte. Im Deutschen sollten Sie auch Umlaute und „ß“ berücksichtigen. Rechts können Sie noch die Schriftgröße festlegen, in der der Text für die unterschiedlichen Fonts angezeigt wird.

In der Zeile darunter haben Sie die Möglichkeit, sich unter den Kategorien (Categories) nur für Serif, Sans Serif, Display, Handwriting oder Monospace zu entscheiden. Dadurch wird das angezeigte Angebot etwas eingeschränkt und somit übersichtlicher. Falls Sie keine Auswahl treffen, zeigt Google immer die Fonts aller Kategorien in ungeordneter Reihenfolge an. Unter Sprache (Language) belassen Sie es bei der Voreinstellung, es sei denn, Sie benötigen wirklich exotische Schriftzeichen.

Anschließend können Sie noch die Auswahl durch bestimmte Eigenschaften wie die Anzahl der Stile (Number of Styles), Stärke (Thickness), Neigung (Slant) oder Weite (Width) weiter eingrenzen bzw. nur variable Fonts (zur eigenen Anpassung) anzeigen lassen. Zuletzt bestimmen Sie über das Dropdown-Menü rechts die Sortierung, indem Sie die Reihenfolge absteigend nach im Trend liegenden (Trending), Populärsten (Most popular), Neuesten (Newest) oder „nach Namen“ (Name) festlegen.

Einzelauswahl

Unabhängig davon, welche grobe Vorauswahl Sie getroffen haben, haben Sie nun die Qual der Wahl. Während Sie durch das Angebot scrollen, werden trotz eventueller Eingrenzungen noch viele Schriften angezeigt, die Ihrer Vorstellung von vorne herein nicht entsprechen. Sobald Sie auf eine Schrift stoßen, die Ihren Wünschen zumindest nahe kommt, sehen Sie rechts oben auf der Font-Karte die Anzahl der verfügbaren Stile (Styles).

Falls bei einer fett-gedruckt und kursiv angezeigten Schrift (z. B. Lobster s. oben 1. Abbildung) nur ein Stil angegeben ist, können Sie zwar später in Ihrem CMS die Schriftgröße verändern, nicht aber die Neigung oder die Strichstärke.

Details einzelner Schriften

Sobald eine Schrift in die engere Wahl kommt, klicken Sie auf die entsprechende Karte. In dem neuen Fenster können Sie wiederum einen Beispielsatz in Ihrer Sprache eingeben (s. auch Suche nach Schriften) und die angezeigte Schriftgröße verändern. Darunter finden Sie eine Liste, in der der Satz in allen für diese Schrift verfügbaren Stilen angezeigt wird. So haben Sie einen Eindruck davon, wie der Text später auf Ihrer Website aussehen würde.

Nicht weniger interessant ist die Tabelle unterhalb der Liste. Einerseits erlaubt sie einen Überblick über die Gestaltung der einzelnen, für diese Schrift programmierten Zeichen einschließlich der Sonderzeichen und Ziffern, die im Beispielsatz normalerweise nicht vorkommen. Anderseits gibt die Tabelle auch Auskunft darüber, ob und welche Schriftzeichen für Sprachen mit einem anderen Alphabet (z. B. kyrillisch) dazugehören.

Am Ende der Seite erhalten Sie zusätzliche Informationen über die Schrift selbst sowie deren Designer. Wichtig ist vor allem der letzte Absatz mit den Angaben zu den Lizenzbedingungen. Auch bei vielen anderen Anbietern entspricht der Aufbau und Inhalt der Informationsseite in etwa der hier für Google Fonts beschriebenen.

Weiterlesen – Schriften selbst hosten

Schriften auf Websites | Seite 2