Responsive Webdesign ist mittlerweile Pflicht, wenn Ihre Webseite bei Google & Co. ein gutes Ranking erhalten sollen. Durch das „Mobile First Indexing“ von Google, auf das Google ab 2021 umstellen wird, werden Webseiten ohne mobil-freundliches Design abgestraft und fallen daher im Ranking. Gerade die Typografie ist wichtig, damit die Inhalte auch auf jedem Endgerät gut gelesen werden können.

Responsive Webdesign – Das Wichtigste in Kürze

  • Bevor es an das Design der Webseite geht, spielt die Typografie eine wichtige Rolle und sollte wohl überlegt sein.
  • Die Typografie sorgt einerseits für eine gute Lesbarkeit und damit auch für ein positives User-Erlebnis, andererseits ist die Typografie auch für die Suchmaschinen-Optimierung relevant.
  • Denn Google wird zukünftig sogar Webseiten ohne gutes mobiles Design abstrafen – und deshalb sind unter anderem die Wahl der Schriftart, -größe und die Formatierung der Überschriften sehr relevant.

Was ist Typografie?

Typografie bezeichnet die Kunst und Lehre von Schrift sowie die Verteilung von Texten und Bildern (hier: auf der Webseite). Oft finden sich noch Webseiten, die keine geeignete Schriftart, -form oder -größe haben und somit schlecht zu lesen sind. Das ist nicht nur für gesunde Menschen sehr anstrengend. Gerade beeinträchtigte Menschen können solche Webseiten nur schwer nutzen, da die Schrift kaum oder nicht lesbar ist.

Die passende Typografie ist ebenso wichtig, wie der Inhalt selbst. Denn selbst, wenn der Inhalt sehr gut ist, werden User abspringen, wenn der Text nicht lesbar ist. Um sie auf Ihrer Seite zu halten, sollten Sie auf eine gute Typografie achten.

Gute Webdesigner nehmen sich dem Thema zu einem frühen Zeitpunkt im Projekt an, denn das Screendesign hängt ebenfalls von der Typografie ab. Es gibt gewisse Typografie-Grundlagen, die immer eingehalten werden sollten, doch je nach Zielgruppe können Sie die Typografie auch variieren.

Eine kurze Geschichte der Web-Typografie

Am Anfang steht oft die Frage nach der richtigen Schriftart – und da liegt auch schon eine große Entscheidung. Blogs und kleinere Webseiten verwenden oft frei verfügbare Schriftarten ohne Copyright, was zunächst eine gute Idee ist. Diese Schriftarten sind in der Regel bereits im Webdesign etabliert. Ein Beispiel ist die Schriftart „Roboto“, die Google für sein Betriebssystem Android erfunden hat. Sie kann auf allen Endgeräten und in allen Größen gut gelesen werden. „Roboto“ hat klare Linien, keine Schnörkel und ist seit Längerem im Einsatz, wodurch Probleme und Bugs bereits erkannt und behoben wurden. Mit den korrekten Zeilenabständen, die im Design festgelegt werden, haben Sie so eine sehr gute Grundlage für die Akzeptanz der Seite bei Ihren Besuchern. Insgesamt bietet Google Fonts auf der Website eine große Auswahl an Schriftarten, die in einem übersichtlichen Katalog gefunden werden können.

Bevor es Google Fonts gab, hatten Webdesigner es oft schwer, eine passende Schriftart zu finden und diese korrekt in die Webseite einzubinden. Die Browser verstanden anfangs nur Systemschriftarten, weswegen andere Schriftarten auf den meisten Computern nicht richtig dargestellt werden konnten. Trotz der Vielfalt der von Google Fonts bereitgestellten Schriftarten sind alle gut lesbar. Sie sind strukturiert und ansprechend ausgearbeitet, damit sie auf Tablets und Smartphones ebenso lesbar sind, wie auf großen Computerbildschirmen. Dafür müssen sie responsive sein.

Web-Typografie-Regeln erklärt

Bei der Web Typografie ist eine klare Gliederung der Textinhalte wichtig. Auch spielen SEO-Aspekte eine Rolle. So darf es pro Seite nur eine <h1>-Überschrift geben, danach muss eine <h2>-Überschrift folgen, woraufhin wieder <h2>- oder <h3>-Überschriften folgen.

Abgestraft wird hingegen eine Reihenfolge wie <h1>, <h3>, <h2>, selbst wenn sie im Design so getrennt werden, dass <h3>-Überschriften prominenter aussehen. In der Regel wird kein Webdesigner eine Seite so strukturieren, denn die Reihenfolgen sind obligatorisch.

Hervorhebungen

Auch müssen sich die Autoren an gewisse Regeln halten. So können zwar wichtige Satzteile hervorgehoben werden, aber die Hervorhebungen sollten nicht zu verschieden sein. Zum einen ist das schlecht zu lesen, zum anderen ist zu viel hervorgehobener Text für ein gutes SEO-Ranking eher hinderlich.

Absätze und Zwischenüberschriften

Genug Absätze sowie sinnvolle Zwischenüberschriften, sind wichtig, damit sich der Text einfacher und angenehmer lesen lässt. Bei sehr langen Texten sollten Sie am Anfang ein Inhaltsverzeichnis einfügen, bei dem die Themen des Textes aufgeführt werden. Praktisch sind klickbare Anker, denn so kann der Besucher direkt zum richtigen Thema springen, ohne den Rest des Texts, der für ihn vielleicht uninteressant ist, zu lesen. Außerdem können die Besucher später wiederkommen und dort weiterlesen, wo sie aufgehört haben.

Kontrast bei Schrift und Hintergrund

Schrift und Hintergrund müssen kontrastreich sein. So ist der Text einfacher zu lesen. Bei einem zu geringen Kontrast könnten Suchmaschinen die Seite auch wegen des Verdachts auf Betrug abstrafen. Früher nutzten findige Autoren eine Lücke bei Google aus, um eine Seite auf bestimmte Keywords ranken zu lassen, die aber nicht in den eigentlichen Text passten. Sie schrieben Text-Passagen in weißer Schrift auf weißem Hintergrund und platzierten sie neben oder unter dem eigentlichen Text.

Dem Leser fällt es zunächst nicht auf, außer, dass der Abstand an den Seiten oder unter dem Artikel ungewöhnlich groß ist. Beim Crawl entdeckt Google den Text inklusive gut rankender Keywords und die Seiten rankten zu Keywords, die eigentlich nicht ins Themenfeld passten. Mittlerweile erkennt Google diese Versuche, interpretiert sie als Betrug und straft die Seite mit einem schlechteren Ranking ab.

Zum Thema Farbe und Kontrast gibt es zahlreiche browserbasierte Farbtools und Infoseiten, die wir Ihnen in diesem Artikel vorstellen.

Tipps für Responsive Webdesign – Fazit

Gute Typografie ist im Internet aus mehreren Gründen relevant. Sie ist die Grundlage für gute Lesbarkeit für Mensch und (Such-)maschine, einerseits bezogen auf den Content, andererseits auf die Darstellung. Achten Sie also auf eine gute Typografie, werden Ihre Seiten besser in Suchmaschinen gefunden. Außerdem verringert sich die Absprungrate, da User das Schriftbild Ihrer Seite einfach verarbeiten können.

Was sind Design-Systeme und wie arbeitet man damit? Erfahren Sie mehr!

Titelmotiv: von Gerd Altmann auf Pixabay

Host Europe
Letzte Artikel von Host Europe (Alle anzeigen)

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten