Typographie Grundlagen im Webdesign: Diese Dinge solltest du beachten

14 Min.
typographie grundlagen webdesign

Einfach ist schwer. Das ist mein Leitsatz. Und so ist es auch mit dem Einsatz von Typographie im Webdesign, von Schriften auf der Website – eigentlich ganz einfach und doch ziemlich kompliziert. Darum möchte ich dir heute zeigen, welche Typographie-Grundregeln du beachten solltest, um Text auf deiner Webseite bestmöglich darzustellen.

Es ist kein Geheimnis, dass es für viele Menschen schwierig ist, sich klar und verständlich auszudrücken. Weshalb sollte das über Medien einfacher sein? Um dies zu erleichtern – Kommunikation – gibt es Typographie. Sie ist einerseits die Lehre von den Schriften, andererseits ein Gestaltungselement, um Texte oder Inhalte geschickt, dem Ziel entsprechend oder „ästhetisch ansprechend“ darzustellen. Dass in Mikrotypografie und Makrotypografie unterschieden wird, ist an dieser Stelle nicht von Belang.

Typographie im Webdesign – Warum ist sie so wichtig?

typographie grundlagen webfonts

Es ist keine Frage, dass Schriften eine Website beleben und optisch bereichern können. Fonts – Schriftarten – sind wichtige Elemente jeder guten Gestaltung. Im Internet, also im Webdesign, unterliegt die Sache mit der Typographie aber besonderen Bedingungen, die ich hier beleuchten möchte und die dir helfen sollen, die Sache mit der Schrift auf Webseiten besser zu verstehen.

„Gute Typografie sucht nicht nach allem, was noch möglich ist, sondern fragt nach dem, was nötig ist.“
Kurt Weidemann

Websites werden oft nicht von ausgebildeten Grafikdesignern oder Mediengestaltern gemacht, sondern von Quereinsteigern gestaltet und umgesetzt. Das mag erklären, weshalb auf vielen Seiten selbst die einfachsten grafischen Regeln missachtet werden. Besonders beim Thema Typographie wird das schnell deutlich. Der unbändige Einsatz von schlecht lesbaren VERSALIEN, der mangelnde Kontrast zwischen Schriftfarbe und Hintergrund, sowie die wirre Struktur der Texte machen den Nutzern das Lesen schwer.

Aber genau darum geht es beim Thema Typografie: um die Lesbarkeit der Texte. Wozu sollte man sonst Texte auf der Website haben, wenn diese nicht gut und angenehm zu lesen sind? Angeblich scheiden sich daran die Geister, wie gut lesbare Texte am Ende auszusehen haben. Ich kann es nicht nachvollziehen, denn wir haben in der Grafik einfache, bewährte und sehr sinnvolle typographische Regeln, um damit gut lesbare Texte zu gestalten. Typographie eben.

Free Dev Programm RAIDBOXES

Eine davon ist der Kontrast – also das Farbverhältnis zwischen Schriftfarbe und dem Hintergrund. In einem Forum hatte ich einmal ein stolz präsentiertes Weblayout genau deshalb kritisiert. In der Grafik nennen wir das Phänomen, dass der angebliche Webdesigner hier verkaufen wollte „weißer Adler auf weißem Grund“. In diesem Fall hatte er einen dunkelgrauen Fließtext auf hellgrauem Grund, also einen sehr schlechten Kontrast.

Das sieht vielleicht ganz nett aus – Geschmackssache vermutlich – ist aber äußerst schlecht zu lesen. Das habe ich zurückgemeldet und gefunden, dass das für mich kein gutes Design sei, wenn ich den Text nur mit Mühe lesen kann. Und dabei habe ich noch gesunde Augen. Was machen diejenigen, die eine eingeschränkte Sehfähigkeit haben? Auch ein oft unterschätztes Problem – Stichwort Barrierefreiheit. Jedenfalls stellte sich der Designer auf den Standpunkt, das wäre nun mal sein Design und er würde es eben so machen. Kennen wir auch: „Das kannste schon so machen, aber dann isses halt kacke.“

Für mich ein weiterer Beleg dafür, wie wenig verbreitet das Wissen über die Lesbarkeit von Texten ist, also von guter Typographie. Ich hatte in meiner Ausbildung zum Mediengestalter (Print) vor vielen Jahren eine gestandene Grafikerin und Typographin, von der ich eine Menge lernen durfte.

Webdesign & Typographie: Die besonderen Anforderungen

typographie grundlagen webfonts

Im Webdesign haben wir aber noch andere Anforderungen an die Typgraphie als die der Lesbarkeit, nämlich technische. Zu einer guten Lesbarkeit gehört im Internet eben auch, dass die Seite schnell lädt. Also haben wir es bei der Einbindung von Schrifttypen mit Website-Performance zu tun.

Außerdem muss gewährleistet sein, dass die Texte auf möglichst allen Ausgabegeräten gleich gut lesbar sind, was eine weitere Herausforderung darstellt. Am Ende hast du mit den Möglichkeiten der Auszeichnungssprache CSS derart viele Möglichkeiten, in die Typographie einer Website einzugreifen, dass die Sache schnell komplexer wird, als gedacht.

Und wir wollen selbstverständlich einen gut strukturierten Text haben, der ebenfalls die Lesbarkeit erhöht, Ermüdung vermeidet und auf Google, sprich auf das Ranking in der Suchmaschine, wirkt. Als Beispiel seien die Überschriften-Tags H1, H2, H3 usw. genannt, der Einsatz von Listen und Auszeichnungsformen wie Bold/Strong und em/i, sowie die Absatzmarken und andere sinnvolle HTML-Elemente.

Ich bin ein Freund von Standardschriften. Das mal vorweg. Ich meine, es ist nicht wirklich nötig spezielle eigene Schriften auf einer Website einzubinden. Als Beispiel, weshalb man eine eigene Schrift integriert, sei hier die CI-Schrift genannt. Also eine speziell für die Firma entwickelte Schrift, die eine wichtige Funktion bei der Corporate Identity hat. Oder man ist ein richtig guter Designer, Künstler oder Fotograf und legt Wert auf ein extravagantes oder sehr individuelles designlastiges Erscheinungsbild. Dann geht es aber auch nicht unbedingt um große Textblöcke oder schriftliche Informationen.

Eine eigene CI-Schrift wird meist von größeren Unternehmen eingesetzt, die mit eigener IT-Abteilung und einer Serverfarm operieren. Da gibt es dann keine Performance-Probleme und die Einbettung der CI-Fonts wird technisch überwacht.

Ist man Designer und will zeigen, was man kann, empfiehlt es sich bei der Typographie auf existierende Dienste – auf bewährte Webfonts – zurückzugreifen, um die gewünschte Schrift sicher und performant in die eigene Website einzubinden.

Manchmal erscheint es auch gegeben, den gewünschten Schriftschnitt in webtaugliche Formate zu verwandeln und einzeln einzubinden. Ob das dann immer und auf Dauer einwandfrei funktioniert, steht auf einem anderen Blatt. Daher präferiere ich in solchem Fall Google Fonts, weil diese schnell, sicher und einfach in der Anwendung ist. Aber auch dies ist vielleicht Geschmackssache.

Diese 10 Typographie-Regeln helfen dir weiter

typographie grundlagen webfonts

Oberste und ganz einfache Regeln: Weniger ist mehr. Berücksichtige die Lesegewohnheiten der Menschen. Orientiere dich an Webseiten, die umfangreiche redaktionelle Texte darstellen und lerne.

Die Lesbarkeit von Texten unterliegt bestimmten, wissenschaftlich fundierten Regeln. Sie betreffen nicht nur die Schrift selber, sondern auch ihre Umgebung, den Kontrast, die Übersichtlichkeit und Struktur der Texte sowie die Schärfe ihrer Ränder.

1. Schriftgröße

Sie hängt von dem Font ab und richtet sich nach dem grundsätzlichen Design der Website. Beachte bitte, dass der User jederzeit die Möglichkeit hat, die Schriftgröße in seinem Browser oder seinem Smartphone zu verändern. Versuche relative Schriftgrößen zu nehmen, also %, EM/REM oder small/normal/medium/large.

2. Zeilenbreite

Diese wird deutlich unterschätzt. Es wurde ermittelt, welche Textbreite von den Menschen noch gern gelesen wird: Es ist eine Breite bis maximal rund 70 Zeichen, also eine Standard-A4-Textbreite eines Word-Dokuments. Schau auch hier einfach mal bei SPIEGEL ONLINE und Co. nach, wie breit deren Textblöcke sind.

3. Zeilenabstand

Für eine optimale Lesbarkeit ist der sog. Durchschuss, also der Abstand zwischen den einzelnen Zeilen eines Textes – auch die Höhe eines Absatzes – von großer Bedeutung. Im Netz haben sich je nach Font gut 140-150% „line-height“ bewährt.

4. Laufweite

Das ist der Abstand zwischen den Buchstaben, der durch das „letter-spacing“ manipuliert wird. Man sollte hier sehr vorsichtig sein und diese Gestaltungsmöglichkeit nur mit Bedacht – etwa bei bestimmten Überschriften – einsetzen. Im Zweifel nicht einstellen.

5. Kontrast

Das Verhältnis zwischen Farbe und Hintergrundfarbe nennt man Kontrast. Der sollte bei Fließtexten sehr hoch sein. Der maximale Kontrast ist natürlich schwarzer Text auf weißen Hintergrund. Das ist leicht zu lesen.

6. Struktur

Das bedeutet: gut und semantisch richtig strukturierte Texte! Das meint in HTML bspw. die Überschriften-Tags H1/H2/H3, die Absatzmarken, Listen-Auszeichnungen, den intelligenten Einsatz von Hervorhebungen mittels Fettung, kursiv und Farbe u.a.m. Wirkt unmittelbar auf die Lesbarkeit und auch auf das Google-Ranking.

7. Maximal zwei Schrifttypen

Oft reicht eine Schrift pro Webseite, Buch oder Schriftstück. In Sonderfällen funktionieren auch mehr, aber mit dem Einsatz von mehr als 2 Fonts pro Dokument solltest du vorsichtig sein.

8. Versalien

Verzichte auf Versalien in Überschriften und im Menü. Sie sind sehr schwer zu lesen. Wenn es sich aber um einzelne Worte beispielsweise in der NAVIGATION handelt, kannst du Versalien einsetzen. Aber nicht in Großbuchstaben reinschreiben, sondern mittels CSS über „text-transform:uppercase“ lösen.

9. Standardschriften

Im Zweifel und als Fallback solltest du bewährte Systemfonts wählen. Arial, Verdana, Georgia sind solche sehr gut lesbaren Systemfonts, die nahezu alle Ausgabegeräte besitzen und immer gut dargestellt werden.

Ein Fallback ist im CSS der nachfolge Font, wie etwa bei BMW: “bmwTypeWebBoldAll”,”Arial”,”Helvetica”,sans-serif; Hier sind Arial, Helvetica und Sans-Serif (also der erste unter Sans-Serif vorhandene Font) die Fallbacks, die angezeigt werden, wenn die Schrift davor (“bmwTypeWebBoldAll”) nicht zur Verfügung steht.

10. Fortbildung

Mein Tipp: Bilde dich in Sachen Typographie durch Workshops, Bücher und Magazine oder auch mal durch ein YouTube-Video zum Thema weiter. Ich kann z.B. dieses Video empfehlen. Zwar rät Sven Wolfermann in seinem Vortrag auf der “MobileTechCon” – im Gegensatz zu mir – von Systemfonts ab, liefert aber hier eine Menge wertvolle Informationen zum Thema!

Schriftgestaltung mit CSS: Macht das Sinn?

Ein Wort zur Schriftgestaltung bzw. Einstellung mittels CSS: Nicht zuletzt seit der Einführung von CSS3 stehen den Entwicklern subtile Einstellungsmöglichkeiten für die Schriften einer Seite zur Verfügung. Aber machen die wirklich immer Sinn? Wozu setze ich sie wann ein? Was will ich erreichen? Lesbarkeit? Schönes Design? Darüber scheinen nicht alle Coder – oder ihre Kunden – nachzudenken. Sie machen manchmal alles, was möglich ist. Verändern nicht nur den Durchschuss („line-height“), was zuweilen Probleme mit Höhen, Abständen und Positionierungen mit sich bringt, sondern auch das letter-spacing oder legen Schatten um den Text („text-shadow“). Schlimm, was manchmal zu sehen ist.

Ich rate dir deshalb dazu, mit diesen Einstellungen sehr vorsichtig umzugehen und diese Techniken mit Bedacht einzusetzen. Sie funktionieren nicht überall und behindern auf kleinen Displays sogar die Darstellung. Dann musst du die Anweisungen für den Desktop über „Media Queries” wieder zurücknehmen, was wiederum Zeit und Code kostet. Macht das wirklich Sinn? Die Antwort sollte sehr klar und präzise ausfallen.

Schriftschnitte für das Web: Die Webfonts

typographie grundlagen webfonts

Nebenbei bemerkt: BMW benutzt auf seiner Website wie eben schon gesehen dies: font-family: “bmwTypeWebBoldAll”,”Arial”,”Helvetica”,sans-serif;font-weight: normal; – im Fließtext ganz normal Arial. Auch Amazon nutzt Arial auf der Shop-Seite. Apple dagegen benutzt natürlich eine eigene Schrift als Webfont. Der Ölkonzern TEXACO nutzt Adobe-Fonts. Nur als kleine Beispiele.

Glücklicherweise gibt es mittlerweile viele Anbieter von Web-Schriften, die gut funktionieren und sich in der Regel leicht einbinden lassen. Leider sind diese „Webfonts“ in der Regel kostenpflichtig, wobei sich die Preise stark unterscheiden. Als Beispiele, neben Google Fonts, seien noch genannt: Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts und viele weitere mehr – Geschmacksache.

Der Vorteil diese Dienste liegt auf der Hand: Du hast keine Lizenz-Sorgen (siehe weiter unten „Achtung: Lizenzen!“), die Fonts funktionieren und es gibt Hilfe bzw. Anleitungen zum Einbinden der Fonts auf der eigenen Website (also Support oder Foren dazu). Die Tarife sind oft erweiterbar und du hast eine gewisse Auswahl an spannenden Schriften.

Das Missverständnis mit Google Fonts

Als im Mai 2018 die sog. DSGVO für alle verbindlich eingeführt wurde, schreckte die Netzgemeinde vor dem Einsatz von Google Fonts panisch zurück. Man hatte Angst, dass der Einsatz der Google WebfontsGoogle als „Datenkrake“, gegen die sich diese Gesetzgebung ja richtete – nicht mit den Datenschutzgesetzen übereinstimmen und man deshalb teure Abmahnungen riskieren würde.

Diese immer noch verbreitete Angst beleuchtet die leider immer noch anhaltende große Verwirrung um die DSGVO. Zum Wohl der Rechtsanwälte und Web-Kanzleien natürlich. Wenn man wegen dem Einsatz von Google Analytics mit Google eine Auftragsverarbeitung abgeschlossen hat und auf den Einsatz der Fonts – und im Zweifel auf Cookies – in der Datenschutzerklärung hinweist, ist das Problem vom Tisch.

Wer immer noch Angst hat, kann alle Google Fonts auch lokal einbinden, also die Google-Webfonts downloaden und auf dem eigenen Webspace speichern.

Außerdem wurde immer wieder die Performance angeprangert, die angeblich so schlecht war, wenn man die Fonts über Google lädt. Dabei bleibt unerwähnt, dass Google eine schnelle und äußerst stabile Server-Architektur besitzt und dass es noch Fallbacks (siehe oben) gibt. Außerdem lädt man die Fonts von einer anderen URL, was gleichzeitig mit dem Laden der Dateien vom eigenen Server geschehen kann. Aber man ist einmal mehr von Google abhängig.

ebook: Miss die Performance deiner Seite wie ein Profi

Achtung: Ladezeiten!

Die Sache ist ganz einfach. Extern integrierte Webfonts können die Ladezeit der Seite erhöhen. Der notwendige Code, um eigene Schriften in die Seite zu integrieren, auch. Einzig die Standardschriften, die Systemfonts auf den Rechnern und Smartphones der User, benötigen keine Ladezeit, weil sie nicht über einen Server, nicht über das Internet geladen werden.

Oder anders ausgedrückt: Wenn deine Seite schnelle Ladezeiten braucht, vielleicht nicht das entsprechende Hosting dahintersteckt und das Unternehmen keine CI-Schrift hat, die unbedingt eingebunden werden muss, würde ich immer auf Standard setzen. Also auf Systemfonts, wie es Amazon mit Arial macht. Das hat schon seinen Sinn.

Natürlich geht es hier nicht um die Kilobytes der zu ladenden Schriften. Es geht darum, dass diese on Top kommen, also noch zusätzlich heruntergeladen werden müssen und dass der Server, der sie ausliefern soll, unter Umständen gerade schwächelt. Das sieht dann nicht gut aus und ist … vermeidbar.

Achtung: Lizenzen!

Was auf jeden Fall zu beachten ist, sind die Lizenzen für die eingesetzten Fonts. Wenn man Google Fonts einsetzt oder Systemschriften, die ja bekanntlich vom Rechner des Users geladen werden, ist man auf der sicheren Seite. Bei allen anderen Schriften, die man auf der Website einsetzt, muss man darauf achten, dass man entweder die Lizenz dafür besitzt – und die kann schnell ziemlich teuer werden – um sie auf der eigenen Website einzusetzen, oder ob es sich um einen Free Font handelt, der manchmal andere Sorgen bereitet, wenn wir etwa an die deutschen Umlaute und das Eszett (ß) denken.

Um diese ganzen Probleme zu vermeiden, setzte ich eben auf Systemschriften oder auf Google-Fonts. Wenn der Kunde nun unbedingt eine eigene Schrift wünscht, sollte man den Aufwand dafür großzügig in die Kalkulation aufnehmen, da die Integration externer Schriften in die Website manchmal einige Probleme machen kann. Beispielsweise bei den CSS-Anweisungen und hier zum Beispiel, was ich immer richtig mies finde, beim Suchen des korrekten Schriftnamens, um den Font für die Anzeige der HTML-Tags auch korrekt ansteuern zu können.

Eigene Fonts einbinden

typographie grundlagen webfonts

Mit Webfonts und/oder eigenen Fonts, die du über ein Tool für deine Seite nutzbar gemacht hast, kannst du dir schnell eine Reihe von Problemen für deine Seite einhandelt. Nicht selten treten folgende Phänomene dabei auf:

  • Flackernde Schrift beim Laden der Seite (nicht ungewöhnlich, manchmal sieht man auch eine andere Schrift, bis das CSS diese mit dem Webfont überschreibt.
  • Längere Ladezeiten durch sehr komplexe Fonts (eher selten).
  • Häufiger sind Unschärfen der Schrift, Verzerrung durch fehlerhaftes Rendering (auf bestimmten Systemen).

Um den gewünschten Font auf möglichst allen Ausgabegeräten anzeigen zu können, brauchst du verschiedene Varianten desselben. „TTF“ ist klar und bekannt, aber du brauchst auch „EOT“ und die beiden „WOFF“-Varianten. Das ist unumgänglich, wenn du eigene Fonts in deine Seite einbinden willst. Diese Formate kannst du dir kostenlos mit dem Webfont Generator erzeugen lassen. Danach lädst du alle Formate deiner Schrift in ein Verzeichnis deines Servers und bindest diese in dein Stylesheet (CSS-Datei) mit Pfad wie folgt ein:

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') format('ttf'),
      url('/deinfont.eot') format('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

Du siehst an diesem @font-face-Code, der deine Schrift integriert, wie komplex die Sache ist – und damit wie fehleranfällig.

Dann kannst du sie in deinem CSS-Code verwenden und den Klassen und IDs zuweisen. Auf diesem Weg können einige Fehler auftreten, die ich an dieser Stelle nicht behandeln möchte. Wie gesagt, ich empfehle Standard- oder Systemfonts oder Google Fonts, die man einfach über die verlinkte Datei im Header der Website einbindet:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Typographie und mobile Darstellung

typographie grundlagen webfonts

Dieser Aspekt wird grundsätzlich vernachlässigt. Aus meiner Sicht ist es absolut nicht notwendig, auf einem kleinen Display oder einem Smartphone eine besondere Schrift zu laden. Wie sieht mit den Fallbacks aus, den Systemschriften der Mobiltelefone? Wenn ich eine mobile Seite herstelle oder mobil optimieren muss, spare ich wegen der Ladezeit natürlich als erstes das Downloaden eines Webfonts oder einer eigenen Schrift.

Es ist zwar eine strategische Entscheidung, die selbstverständlich mit dem Kunden diskutiert werden muss, aber ich sehe nicht ein einziges Argument, dass für einen Webfont oder eine eigene Schrift in der mobilen Darstellung spricht.

Natürlich gibt es auf dem Smartphone nicht alle Systemschriften, die es für den Desktop gibt. Aber hier ist es aus meiner Sicht auch nicht von Bedeutung, ob ihr nun diese oder jene Schrift für die Android-System vorgesehen habt. Es geht hier nur noch um schnelle Information und gute Lesbarkeit. Dies wird auf Android und Apple mit ihren websicheren Fonts auf jeden Fall garantiert.

Wenn wir die Sache unter zwei wesentlichen Gesichtspunkten betrachten, nämlich der Ladegeschwindigkeit und dem Design, müssen wir zu dem Schluss kommen, dass eine eigene Schrift für die mobile Darstellung überflüssig ist. Einerseits beeinträchtigt der Font die Ladegeschwindigkeit der mobilen Seite, die gerade bei Abruf an der Bushaltestelle von Bedeutung ist. Andererseits haben wir Inhalte und Design der mobilen Version der Website (hoffentlich) aus eben diesen Gründen auf das Wesentliche reduziert. Weshalb da noch einen ausgebufften Webfont laden?

Das Wesentliche ist immer die Lesbarkeit bzw. das, was wir erreichen wollen: Vermittlung von Wissen, literarische Unterhaltung, den Kauf eines Produktes, eine Kontaktaufnahme, die Newsletter-Bestellung oder das Einsehen der Adresse. Und dafür, meine ich, braucht es keine Sonderschrift und keinen Webfont.

Websichere Schriften

Du solltest auf jeden Fall prüfen, ob eine der Systemschriften für dein Projekt geeignet ist. Eine vollständige Sammlung von sog. websicheren CSS-Anweisungen für Systemfonts bzw. websichere Schriften findest du auf www.cssfontstack.com.

Was sind websichere Schriften? Websichere Schriftarten sind Schriftarten, die in vielen Betriebssystemen vorinstalliert sind. Obwohl nicht auf allen Systemen die gleichen Zeichensätze installiert sind, kannst du einen websicheren Block von CSS-Einstellungen verwenden, um mehrere Zeichensätze auszuwählen, die ähnlich aussehen und auf den verschiedenen Systemen installiert sind, die du unterstützen möchtest. Wenn du ab CSS3 andere als vorinstallierte Schriftarten verwenden möchtest, kannst du die Einstellungen für diese Webfonts verwenden.

Fazit

Du solltest dir sehr genau überlegen, ob es ein Systemfont genauso oder sogar besser tut, als ein Webfont oder eine eigene Schrift. Bewährte Schriften wie Verdana, Arial, Trebuchet, Georgia, Times New Roman u.a. kannst du bedenkenlos einsetzen, da diese immer gut lesbar sind. Und dabei haben wir ja noch gar nicht über die inhaltliche Qualität der Texte geredet, die natürlich eine entscheidende Rolle spielt. Aber das ist ein anderes Thema. Unterschätze das Thema Typographie auf Websites nicht. Bedenke die technischen Aspekte, wie Ladezeit oder Umlaute der Fonts, aber auch die Nutzerfreundlichkeit deines typographischen Designs, also Lesbarkeit, Kontrast und Zeilenhöhe.

Überlege dir gut, ob du einen eigenen oder einen externen Font benutzen willst oder ob du auf Standard-Fonts bzw. Systemschriften setzt. Wenn du dich für einen eigenen Schrifttypen entscheidest, dann frage dich, ob du diese Schrift oder eine ähnliche Variante mit Google Fonts einsetzen kannst. Oder ob du die Fonts wirklich per Hand über CSS einbinden und sie zuvor in allen Formaten auf den Server laden möchtest. Die Standardfonts, die der User auf dem Rechner oder dem Smartphone hat und die von dort geladen werden, sind bewährt und brauchen keine Ladezeit. Dies gilt umso mehr beim mobilen Laden, bei der Anzeige deiner Seite auf Smartphones.

Für mich persönlich spricht in der Regel nicht viel für die Benutzung einer externen Schrift oder eines Webfonts. Wenn ein WordPress-Theme Google Fonts schon an Bord hat, nutze ich das natürlich. Weil ich sonst die ganze Sache aufschrauben oder überschreiben muss. Das ist nicht wirklich sinnvoll.

Wenn es nicht klar zur Corporate Identity eines Unternehmens gehört, ist ein eigener Font Spielerei. Und dazu haben die meisten Kunden weder Zeit noch Geld. Viele Wege führen nach Rom – der falsche Einsatz von Typographie auf einer Website und im Webdesign jedoch vermutlich nicht. Mit Systemschriften, mit Standardfonts lassen sich wunderbare Designs und tolle Webseiten gestalten und befüllen. Ihre Benutzung ist der sicherere Weg und das wird noch eine ganze Zeit so bleiben. Vielleicht ist es Geschmacksache, vielleicht ist dies aber der sinnvollste Ansatz zum Thema Schriften auf Webseiten.

Beitragsbild: Ksenia Makagonova [Unsplash]
Weitere Bilder: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel – Webdesigner aus Hamburg. Ausgebildeter Mediengestalter (Print), seit 2000 als Webdesigner tätig. Zunächst bei mobile.de, ab 2003 selbstständig. Ab 2005 Blogger zu verschieden Themen auf unterschiedlichen eigenen Blogs. Als Freelancer von 2007 und 2008 bei SPIEGEL ONLINE am Launch von einestages.de an der Nahtstelle Programmierung/Redaktion beteiligt. Später beim SPIEGEL-Vermarkter Quality Channel (Spiegel QC/Spiegel Media). Als Freelancer für libri.de und diverse Grafik- & IT-Agenturen tätig. Seit 2008 spezialisiert auf WordPress.

Ähnliche Artikel

Kommentare zu diesem Artikel

Lukas
Lukas

Absoluter Top Artikel

Vielen Dank dafür, ich konnte sehr viel lernen und werde es in meinen künftigen Projekten zum Einsatz bringen.

Leefke
Leefke

Das freut uns, Lukas! 🙂
LG aus Münster

F
Fabian

Danke für diesen hilfreichen Artikel 🙂

Bezüglich Google Fonts: “Self-Hosted Google Fonts” (https://wordpress.org/plugins/selfhost-google-fonts/) ist ein sehr nützliches Plugin für alle, die Google Fonts lokal hosten möchten. Hat bei mir super funktioniert.

Leefke
Leefke

Danke für den Tipp, Fabian! 🙂

Thomas Witte
Thomas Witte

Danke für den Artikel. Bezüglich typografischer Gestaltung enthält er tolle Tipps und ist auch gut geschrieben.

Für Laien definitiv irreführend und schlichtweg falsch ist die Aussage zur Einbindung von Google Fonts über deren Server. Das ist definitiv nicht DSGVO-konform, weil die IP des Nutzers übertragen wird! Kann man auch überall nachlesen. Die IP ist ein persönliches Datum, das wurde bereits gerichtlich festgeschrieben, ist also kein Halbwissen mehr. Da nutzt auch die Erwähnung in der Datenschutzerklärung nix. Wohingegen aus Datenschutzgründen nichts gegen die Verwendung von Google Fonts mittels lokaler Einbindung spricht.

Hier würde ich nachbessern, um Eure Leser nicht mit Fehlinformationen zu “versorgen”.

Liebe Grüße,
Thomas

Mark Max Henckel
Mark Max Henckel

Vielen Dank für deine Rückmeldung, Thomas. Ich bleibe aber bei meiner Aussage, die zwar nicht in die Tiefe geht, aber eindeutig ist. Ich würde es hier auch auf einen Rechtsstreit ankommen lassen.

Dagegen wende ich mich aus tiefster Überzeugung: Durch die Angst vor Abmahnung einer Art vorauseilenden Gehorsam anheimzufallen. Jedoch: Ich empfehle in jedem Fall eine Betriebshaftpflicht für Seitenbetreiber. Ich möchte den Fall konkret sehen, bei dem eine Abmahnung wegen der Einbindung von GOOGLE FONTS vor Gericht bestehen wird. Denn nur darum kann es am Ende gehen.

In dem erhellenden Beitrag Google Fonts und die Abmahner lesen wir: Bei Google Fonts “wird gerade kein Cookie gesetzt und es ist nicht möglich, einen Besucher über ein Cookie zu Tracken. Google beschränkt sich nach eigener Angabe tatsächlich nur darauf, Schriftarten bereitzustellen und wertet die Daten der Besucher nach eigenen Angaben nur aggregiert aus. D. h., die Summe aller Daten wird benutzt um etwa um Statistiken zu erstellen (z. B. welche Schriftart wie oft benutzt wird.) Dass kein Cookie erstellt und übermittelt wird, kann man in seinem Browser nachprüfen. Bei Firefox geht das über Web-Konsole (Web-Speicher) über Extras, nachdem man Alt gedrückt hat oder mit Strg + Umschalt + K (Strg + Umschalt + I bei Chrome).”

Es wird in dem Artikel beschrieben, dass die Einbindung von GOOGLE FONTS mit der DSGVO kompatibel ist und der Seitenbetreiber keine Einwilligung vom User bei Aufruf der Seite dafür benötigt. Natürlich würde ich das immer in der Datenschutzerklärung erwähnen. Denn: “Wenn schon die Position der Aufsichtsbehörden bezüglich Tracking aus guten Gründen angegriffen wird, so gilt das erst recht für Google Fonts, womit gerade kein Tracking betrieben wird.
… Es bleibt also festzuhalten, dass mit sehr guten Gründen davon ausgegangen werden kann, dass eine Einbindung von Google Fonts auch ohne Einwilligung möglich ist. Rechtsgrundlage hierfür ist dann Art. 6 Abs. 1 lit. f DSGVO.”

Diese Haltung untersützt ein weiterer Artikel, der aber dennoch vor der Weitergabe der IP-Adresse des Nutzers an GOOGLE FONTS warnt. Die Frage aber bleibt, ob das konkret der Fall ist und wo denn genau das Problem läge. Wenn ich schon offenbar nicht auf den Einsatz von GOOGLE FONTS in meiner “Cookie Notice” hinweisen kann oder muss, dann können die durch den Aufruf der Fonts übermittelten Daten nicht zu einer Abmahnung führen. Es scheint einige Widersprüche zu geben – oder der Sache wird zu viel Beachtung geschenkt. Ich würde es auf einen Rechtsstreit ankommen lassen und behaupte: Es ist wenn, eine Lapalie.

GOOGLE selbst gibt ebenfalls klare Auskünfte:
https://privacy.google.com/businesses/compliance/
https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users

Aus meiner Sicht, wenn man es denn richtig schön Deutsch und extrem genau nehmen will, verzichtet man ganz auf solche Fonts auf der Website und nutzt ausschließlich Systemschriften, wie ich sagte. Oder man bindet sie lokal ein, wenn man das mag. Aber ich selber halte nichts von zu großer Zurückhaltung und Übervorsicht.

Thomas
Thomas

Vielen Dank, lieber Mark, dass Du hier Deine Sicht nochmal ausführlich schilderst.

Tatsächlich haben auch die lieben Anwälte ganz unterschiedliche Einschätzungen dazu, daher hatte ich mich auch explizit auf gesprochenes Recht bezogen, denn wie Du richtig feststellst, geht es letztlich am Ende ausschließlich darum (Vgl. BGH-Urteil https://www.heise.de/newsticker/meldung/BGH-bestaetigt-Dynamische-IP-Adressen-sind-personenbezogene-Daten-3714967.html.

Was jeder persönlich für eine Meinung zur DSGVO und Ihren Auswüchsen hat, sei dahingestellt. Ich schließe mich hier Deiner Meinung an, dass es sich bei der Einbindung von Google Fonts höchstens um eine Lappalie handeln kann.
Fakt ist allerdings, dass es dafür bereits Abmahnungen gab, s. https://www.e-recht24.de/artikel/datenschutz/11125-dsgvo-datenschutz-abmahnungen.html

Insofern ist es auch Deine persönliche Ansicht, es im Zweifel auf einen Rechtsstreit ankommen zu lassen. Diese Präferenz wird nicht jeder Webseiten-Betreiber so setzen wollen.

Die Aussage im Artikel, dass die Einbindung der Fonts über die Google-Server bei deren Erwähnung in der DSE das Problem beseitigen würde, halte ich daher nach wie vor für nicht richtig.

Michael Hörnlimann
Michael Hörnlimann

Toller Artikel!

Meine Ergänzung zur lokalen Einbindung von Google Fonts, am Beispiel von Roboto (statt eines Plugins):
https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin

Ich nutze diesen Dienst bei praktisch jedem Projekt wenn Google Fonts gewünscht sind, bin aber auch ein grosser Fan von Webfonts. Dann gibts auch keine Probleme mit dem Datenschutz bzw. den 5 magischen Buchstaben.

Beste Grüsse
Michael

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.