Typografie im Web – worauf du achten solltest

Die Typografie im Web hat sich in den letzten Jahren enorm entwickelt. Die Möglichkeiten sind dank Webfonts (auf HTML/XHTML basierende Fonts) gestiegen. Wir sind zum Glück nicht mehr nur auf die Schriften Verdana, Tahoma und Co. beschränkt. Webfonts sind lizenz- bzw. kostenfrei und kostenpflichtig erhältlich. Eine große Auswahl an kostenfreien Fonts bietet dir z. B. Google Fonts.

Dank unterschiedlichster Endgeräte sind aber gleichzeitig auch die Herausforderungen größer. Die Typografie sollte auf Smartphones und Tablets genauso gut lesbar sein, wie auf großen Monitoren.

Hier ein paar Tipps, wie du deinen Text ansprechend und gut lesbar im Web setzen kannst:
 

Berücksichtige eine visuelle Hierarchie

Glieder deinen Text in Headlines, Zwischenüberschriften und Fließtexte/Bodys. Berücksichtige auch deutliche Absätze dazwischen. Dadurch gibst du den einzelnen Text-Elementen die

Deine Webseite konvertiert schlecht?

Dann hol dir jetzt die 6 Schritte-Anleitung für ein nutzerfreundliches Webdesign, das die Usability fördert und hilft, dass deine Angebote genutzt werden.

entsprechende Bedeutung und deine Texte sind vom Leser schneller und besser zu erfassen.

Insbesondere wenn du bloggst, ist es wichtig, dass du viele Zwischenüberschriften vorsiehst, damit dein Leser den Text schneller überfliegen kann. Bei der Flut von Informationen, die uns heute erreicht, neigen wir immer mehr dazu lediglich die für uns relevanten Inhalte rauszusuchen. Gliederst du deinen Text so, dass der Leser durch Zwischenüberschriften oder auch durch fett gesetzte Keywords die Stellen findet, die er sucht, hat er deutlich mehr Freude an deinem Text.

Bestimme also mindestens Schriftart und Schriftgröße für H1, H2 und Body. Wörter/Keywords in der H1 werden von Google & Co. höher bewertet als in H2, H3, H4… und schließlich in der Body. Die Hierarchie ist also auch für die Suchmaschinenoptimierung wichtig.
 

Wähle die richtige Schriftart

Idealerweise entspricht die Typografie im Web deinem Corporate Design. Jedoch ist nicht jede Schrift, die im Print funktioniert, auch im Web gut lesbar. Und da Design der Funktion folgt, ist es unter Umständen ratsam vom Corporate Design abzuweichen.

In jedem Fall solltest du Webfonts einsetzen und keinen Text als Bild platzieren. Webfonts können von Suchmaschinen erfasst werden, Texte in Bildern nicht. Der Webfont ist ohne Schärfeverlust skalierbar, Bilder nicht. Zudem beeinträchtigen Bilder die Ladezeit deiner Seite, auch darauf solltest du achten.
 

Headlines

Für Headlines, die groß dargestellt werden, kannst du durchaus eine etwas speziellere Schriftart wählen. Vorausgesetzt sie ist gut lesbar. Zu verschnörkelt und verspielt sollte sie also nicht sein.
 

Fließtext/Body

Für deine Fließtexte benötigst du unbedingt eine gut lesbare Schrift. Im Web sind das meist serifenlose Schriften. Es funktionieren auch einige serifenbetonte Schriften, wie z. B. diese hier, weil die Serifen deutlich ausgeprägt sind. Viele serifenbetonte Schriften haben allerdings Serifen, die ganz fein auslaufen. Solche Schriften verschwimmen am Bildschirm und beeinträchtigen die Lesbarkeit.
 

Achte auf die ideale Formatierung

 

Schriftgröße

Schriften im Web werden heute deutlich größer gesetzt als noch vor zehn Jahren. Zum einen weil früher der Platz für Inhalte deutlich begrenzter war. Zum anderen weil wir heute oft mit unterschiedlichen und auch kleineren Endgeräten surfen und Texte überall gut lesbar sein müssen.

Die Body sollte mindestens 16 px groß sein, Zwischenüberschriften und Headlines entsprechend größer.

Es ist ratsam im Web nicht mit festen Schriftgrößen zu arbeiten. Die Schriftgrößen sollten sich dem Endgerät und der Auflösung anpassen.
 

Ausrichtung

Halte deine Inhalte im Web dynamisch, damit sie auf den verschiedenen Endgeräten sauber umbrechen. Aus diesem Grund solltest du dich an den linksbündigen Flattersatz halten. Zumindest bei den Bodys. Headlines können auch zentriert gesetzt werden.
 

Line Height

Was im Print mit dem Zeilenabstand geregelt wird, bestimmt im Web die Line Height. Die ideale Line Height hängt von der gewählten Schriftart ab. Schriften haben unterschiedlich hohe Kleinbuchstaben. Man misst sie am x, der so genannten x-height. Schriften mit einer großen x-height benötigen eine größere Line Height.
Auch die Zeilenlänge spielt eine Rolle: Lange Zeilen benötigen mehr Zeilenabstand als kurze. Grundsätzlich entspricht die ideale Line-Height im Web meist 150-170 % der Schriftgröße.
 
 

Zeilenlänge

Zu kurze Zeilen stören
den Leserhythmus, da das
Auge zu schnell hin und
her springen muss.
Zu lange Textzeilen erschweren wie im Print auch am Bildschirm den Lesekomfort: Das Auge muss beim Umruch zu weit wandern um an den nächsten Zeilenanfang zu gelangen. In der Desktop-Version hält eine Zeilenlänge von 50-75 Zeichen den Leser bei Laune. Die Zeilen hier in meinem Blog sind mit rund 90 Zeichen also zu lang. Ein weiteres To-do auf meiner Liste.
 

Verzichte auf manuelle Umbrüche

Im Web werden Wörter nicht automatisch getrennt, wie z. B. in Textverarbeitungsprogrammen. Dein Text muss also ohne Trennungen auskommen. Auch auf sonstige manuelle Umbrüche solltest du verzichten, denn je nach Browser oder Endgerät werden die Zeilen anders umbrochen. So entstehen unschöne und oft mehrere Umbrüche hintereinander.
 
Wenn du diese Feinheiten berücksichtigst, hast du schon viel für deine Leser getan. Ein angenehm zu konsumierender Text sorgt nicht nur dafür, dass der Leser dran bleibt und weiterliest. Er kann auch dafür verantwortlich sein, dass ein Erstbesucher zu einem Stammleser wird.

Noch ein paar weiterführende Tipps in puncto Lesbarkeit findest du hier.
 
Happy working!
 
unsplash-logoWill Paterson
 

Susanne Wiemer
Hola, ich bin Goldmarie a.k.a. Su Wiemer und ich zeige dir, wie du einen Online-Auftritt gestaltest, der deine Wunschkunden magisch anzieht und sie in Kunden umwandelt – Design matters!

Kommentar absenden

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