Image
Top
Navigation
4. Februar 2016

Ein Rezept für perfekte Typografie im Web

Der Web-Typografie Guide

Typografie im Web
In den Tagen von IE 1.0 Anfang der 90er war gute Typografie im Web ein absolutes Fremdwort.

Doch heute ist das anders!

Das Wichtigste ist natürlich immer noch die Information, welche eine Website vermittelt. Allerdings sollte man den Wert einer gut gestalteten Webseite nicht unterschätzen. Oder bleibst Du nicht auch länger auf einer Seite die Dich optisch anspricht, als auf einer Seite die aussieht wie ein trauriges Überbleibsel der Anfänge des Internets?

Doch was bedeutet gutes Design?

Zum einen reden wir hier von Seiten mit qualitativ hochwertigen Grafiken und Bildern, aber eben auch von Seiten die von guter Typographie leben. Und damit meine ich nicht einfach nur welche Schrift Du für Deine Webseite wählst!

Ein Web-Typografie Rezept

Gute Gerichte brauchen häufig nicht viele Zutaten. Gerade bei Gerichten wie einer Crème brûlée oder einem Soufflé ist es wichtig sich an das Rezept und die Mengenangaben zu halten. Ähnlich ist es bei der Typografie im Web: auch hier gibt es nur 4 wichtige Zutaten, welche Du für die perfekte Typografie auf Deinem Blog oder Deiner Webseite benötigst. Aber genug der kulinarischen Metaphern, lass uns kochen!

Zutat 1: Der Kontrast

Pinke Schrift auf türkisem Hintergrund mag auf Deinem T-Shirt toll aussehen, liest sich im Internet aber, sorry für die harten Worte, beschissen!

Text wird aber geschrieben um gelesen zu werden! Also versichere Dich immer, dass Du einen Kontrast gewählt hast, der es ermöglich den Text einfach zu lesen.

Bist Du Dir nicht sicher ob Du den richtigen Kontrast gewählt hast und ob dein Text gut lesbar ist?

Dann mach einen Screenshot Deiner Webseite, öffne diesen in Deinem Bildbearbeitungsprogramm und verwandele das Bild in ein Graustufenbild. Kannst Du den Text immer noch gut lesen, Glückwunsch, dann hast Du den richtigen Kontrast gewählt. Ist der Text schlecht lesbar, solltest Du jetzt dringend etwas ändern!

Der Kontrast

Wie schon Robert Bringhurst in seinem Werk The Elements of Typographic Style schrieb:

Typographie exists to honor content.

Also ehre Deinen Inhalt!

Bitte beachte ebenfalls:
Weiße Schrift auf schwarzem oder dunklem Hintergrund hat zwar einen guten Kontrast. Dennoch solltest Du nur kleine Textabschnitte so gestalten. Lange Textpassagen Textpassagen mit dunkelm Hintergrund und heller Schrift solltest Du auf Deinem Blog oder Deiner Webseite aber vermeiden. Denn das ermüdet die Augen beim Lesen sehr stark. Hast Du etwa schon mal ein Buch mit weißer Schrift auf schwarzem Hintergrund gesehen?

Zutat 2: Die Schriftgröße

Mit dem Web 2.0 kam irgendwie auch der schwachsinnige Trend auf die Schrift auf Webseiten immer kleiner werden zu lassen. So klein, dass man zum Lesen fast eine Lupe brauchte!

Nein, es ist nicht IN die Schrift so klein wie möglich zu machen, ich brauche auch keine Brille weil ich blind bin und zu kleine Schrift hat auch nichts mit minimalistischem Design zu tun.

Die Schrift Deines Fließtextes sollte nie, wirklich niemals unter 12 px sein und wenn möglich größer. Der Fließtext auf meinem Blog Reisehappen hat zum Beispiel 16px und das kann man doch ganz gut lesen, oder? Bedenke einfach immer, nicht jeder hat einen riesigen LCD Monitor mit 28 Zoll. Deine Texte sollten auch auf dem Handy, auf Tablets oder einem 11“ MacBook Air ausgezeichnet lesbar sein.

Wenn Du Dich fragst, ob Deine Schrift groß genug ist, MACH SIE GRÖSSER!

Schriftgrösse

Zutat 3: Die Hierarchie

Außerdem ist es wichtig mit den Schriftgrößen auf Deiner Seite zu spielen. Neben Absätzen kannst Du Deinen Text auch durch verschiedene Schriftgrößen gliedern.

Farbe und Textboxen mögen auch sehr hilfreich sein, aber die Schriftgröße alleine zeigt Deinem Leser wie wichtig oder unwichtig ein Textelement ist. Neben der Schriftgrösse an sich ist aber auch der Textstil wichtig. Heißt zum Beispiel den kompletten Text in Großbuchstaben oder kursiv zu setzen um so Überschriften und Unterüberschriften hervorzuheben.

Wenn Dein Leser es eilig hat, hilft es ihm Deine Seite zu scannen und sich die wichtigen Informationen rauszupicken. So bleibt er dann eventuell doch länger und liest Deinen kompletten Artikel.

Die Hierarchie

Zutat 4: Die Abstände

Lass Deine Schrift atmen!
Hab keine Angst Leerzeilen und Absätze auf Deiner Seite zu verwenden. Lasse genügend Abstand zwischen den Überschriften und dem Fließtext, verwende Absätze und einen großzügigen Zeilenabstand. Der Zeilenabstand in einem Fließtext sollte auf keinen Fall zu klein gewählt sein. Eine gute Regel ist, dass der Zeilenabstand zwischen den einzelnen Textzeilen etwa 140% Deiner Schriftgröße betragen sollte.

Weiße Flächen zwischen den Zeilen ermöglichen es Deinem Leser sich auf den eigentlichen Text zu fokussieren und den Text für sich sprechen zu lassen.

Und der Text soll schließlich am lautesten sprechen, oder?

Also ermögliche es, Dein Text soll gehört werden!

Um Dir nicht nur theoretisch zu erklären wie gute Typografie im Web aussieht, folgen nun einige Webseiten und Blogs, die die Regeln der Typografie ausgezeichnet umsetzen.

Hotel Mama Thresl

Hotel Mama Thresl

Villa Pica Paca

Villa Pica Paca

uberding

uberding

22places

22places

 

 

 

 

 

 

 

 

 

 

Es gibt keine festen Regeln für Typografie im Web, aber ich habe versucht Dir einen hilfreichen Guide zu schreiben. Wenn Du Dich an diesen hältst, tust Du Deinen Lesern und potentiellen Kunden einen großen Gefallen und sie kommen sicher immer wieder gerne auf Deine Seite zurück.

Hast Du noch mehr Tipps für Typographie im Web? Was funktioniert auf Deiner Seite gut? Ich freue mich auf Deinen Kommentar!

Hinterlasse mir einen Kommentar

Posted By

Schenkst Du mir ein Like?schliessen
oeffnen