Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 46

Die Typo macht den Text: So werden Unternehmensinhalte im Web besser lesbar

Fett, kursiv oder Versalien? Ohne die richtige Typografie im Webdesign können selbst die besten Inhalte falsch ankommen. Was Designer bei der Textgestaltung beachten müssen.

„Webdesign ist zu 95 Prozent Typografie.“ Der vor zehn Jahren geäußerte Satz von Oliver Reichenstein gilt heute als Credo für die Lesbarkeit von Texten – gerade im Web. In Zeiten, in denen sich viele Websites in ihrem Aussehen und mit ihren Stock-Fotos ähneln, können Unternehmen ihrem Design mit Typografie Individualität verleihen.

Typografie kann die inhaltliche Aussage des Textes visuell transportieren und zusätzlich die gewünschten Stimmungen und Assoziationen vermitteln. Die Gestaltung des Textes sollte eine visuelle Hierarchie schaffen: Sie ist die Benutzerschnittstelle, gestaltet das User Interface und kreiert die User Experience.

Dank der Webfonts sind die Möglichkeiten in den vergangenen Jahren enorm gestiegen. Ähnlich wie im Print-Design stehen unzählige Schriftarten zur Verfügung. Wer eine zeitgemäße typografische Website gestalten will, muss nicht mehr auf „Open Sans“ als Schriftart zurückgreifen – typografische Gestaltung kann so viel mehr. Um das umzusetzen, muss niemand ein ausgebildeter Grafik-Designer sein. Denn es gibt ein paar Richtlinien sowie jede Menge Websites und Tutorials, die Hilfe und Unterstützung bei dieser Aufgabe bieten.

Zeitgemäße Web-Typografie bedeutet vor allem eins: wichtige Gestaltungsregeln zu kennen. Auch technische Möglichkeiten sowie aktuelle Design-Trends und -Entwicklungen sollten bei der Wahl der Typografie eine Rolle spielen. Manchmal kann natürlich auch das bewusste Brechen von Regeln die richtige Strategie darstellen. Im Folgenden die wichtigsten Tipps und Anhaltspunkte.

Hierarchien schaffen

Typografie schafft Hierarchie. Das klingt erst einmal banal für den Fachmann, ist aber eine der grundlegenden Bedeutungen von Web- und Typografie-Design. Denn damit lässt sich Elementen eine visuelle Bedeutung zuweisen, die der inhaltlichen Bedeutung entspricht. Am einfachsten geht das durch Größenunterschiede. Je größer ein Element ist, umso bedeutsamer ist es. Eine Überschrift ist also größer als der Fließtext. Tipp: Zuerst die Größe des Fließtextes – im HTML sind das die Absätze, also das p-Element – festlegen und dann nach und nach Schriftgrößen und Aussehen der weiteren Elemente gestalten.

Ein Beispiel für klare Hierarchien liefert die Website because-software.com. Dafür setzt sie auf unterschiedliche Schriftgrößen, -stärken und -farben. (Screenshot: easyJOB)
Gesättigte, dunklere Schriftfarben wirken bedeutsamer als entsättigte, helle. Auch macht es Textblöcke oder auch einzelne Wörter bedeutsamer, wenn man sie mit Highlights versieht. Oft wird im Design-Prozess der Bereich unterschätzt, der nicht gestaltet wird oder keine weiteren Inhalte hat: der so genannte Weiß- oder Leerraum. Dieser kann durchaus auch farbig sein. Mit Abständen zwischen den Zeilen lassen sich hier Bedeutungen und Zusammenhänge schaffen. Eine wichtige Überschrift kann beispielsweise auch einmal viel Leerraum vertragen, um richtig zur Wirkung zu kommen.

Farbkontraste

Schwarz auf Weiß, wie man aus es dem Print-Bereich kennt, hat sich auch im Webdesign bewährt. Für eine edlere Anmutung wird auch gerne ein mittlerer Grauton gewählt. Beides ist jedoch nicht wirklich sinnvoll, denn der Kontrast von schwarzer Textfarbe (#000) auf weißem Hintergrund (#fff) ist sehr hart und für das Auge eher unangenehm. Designer setzen daher besser auf einen dunklen Grauton als Textfarbe oder verdunkeln den Hintergrund leicht. Sie wählen also kein reines Weiß, sondern einen sehr blassen Farbton.

Auch wenn because-software.com Hierarchien schafft: Im sogenannten Accessiblity-Farbtest bei Contrastchecker.com fällt der Fließtext durch. Der Grauton auf dem weißen Hintergrund ist zu hell und damit schlecht lesbar. (Screenshot: contrast checker)
Bei mittelgrauen Texten auf weißem Hintergrund ist der Hell-Dunkel-Kontrast schnell zu gering, worunter die Lesbarkeit leiden kann. Auch bei farbigen Texten oder farbigen Hintergründen sollte man auf den Kontrast achtgeben. Als Hilfe dienen hier Tools zur Barrierefreiheit von Farbkombinationen.

Dieselbe Checkliste, einmal links das Original in mittlerem grau, einmal rechts in dunklerem. Auch wenn nicht jede Schrift schwarz sein muss, sollte der Kontrast zum Hintergrund doch deutlich sein. (Screenshot: Textfarbe)

Dieselbe Checkliste, einmal links das Original in mittlerem grau, einmal rechts in dunklerem. Auch wenn nicht jede Schrift schwarz sein muss, sollte der Kontrast zum Hintergrund doch deutlich sein.

Zeilenlängen und Zeilenabstände

Zu einer der am meisten missachteten Typografie-Gestaltungsmöglichkeiten zählt die Zeilenlänge. Viele Designer machen sich um alles Mögliche Gedanken – Farbe, Größe, Schriftart –, aber nicht über die Breite der Textspalte. Das führt in der Folge dazu, dass sich Texte über die volle Inhaltsbreite erstrecken – was oft viel zu breit ist. Das Auge findet dann schwer Halt in der Zeile und schlecht den Anfang der nächsten. Das unterbricht den Lesefluss unnötig.

45 bis 75 Zeichen inklusive Leerzeichen gelten als Richtlinie für eine gute Zeilenlänge. Das ist nicht sehr viel, aber der Text soll ja vor allem gut lesbar sein. Die Werte dienen als grobe Orientierung, längere Zeilen sind also nicht gleich unleserlich. Eine Breite in Pixel lässt sich für die Zeilenlänge leider nicht pauschal definieren, da die Schriftgrößen und Schriftarten einen zu großen Einfluss haben. Gute Lesbarkeit entsteht durch ein Zusammenspiel aus vielen Faktoren, die Zeilenlänge ist nur einer davon. Auf immer mehr Websites finden sich beispielsweise die aus dem Printbereich bekannten Mehrspalter. Hier wird ein zusammenhängender Text in zwei oder drei Spalten nebeneinander platziert.

Neben zu langen Zeilen mindern oft auch noch zu kleine Zeilenabstände die Lesbarkeit – wenn sie denn überhaupt definiert wurden. Als Faustregel lässt sich sagen: den Zeilenabstand immer etwas höher wählen. Designer müssen hier gar keine festen Pixelwerte eingeben. Ganz allgemein ist in CSS ein line-height-Wert zwischen 1.4 bis 1.8 hilfreich, aber auch das ist von der Schriftgröße und der Schriftart abhängig. Grundsätzlich gilt: Je länger die Zeile ist, umso größer sollte der Zeilenabstand und je größer der Text, umso kleiner kann der Zeilenabstand sein.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden