Text-Design – so machst du deine Texte lesbar

Wie gut Texte online lesbar sind, hängt wesentlich vom Text-Design ab. Dazu gibt es einige Regeln, die über das bloße Layout und den Inhalt hinausgehen.

Welche das sind und wie du sie anwenden musst, erkläre ich dir in diesem Beitrag.

Inhaltsverzeichnis

text-design-lesbarkeit-texte-verbessern-pin.jpg
  • Text-Design – Lesbarkeit von Texten verbessern

  • Zwei trifftige Gründe, Texte lesbar zu gestalten

    • Google & SEO-Vorteile

    • Mission Informationsvermittlung

  • UX-Faktor Lesbarkeit – ein echtes Problem bei Online-Texten

  • Die 4 Gesetze der Gestaltungspsychologie

    • a) Gesetz der Nähe

    • b) Gesetz der Ähnlichkeit

    • c) Gesetz der Geschlossenheit

    • d) Gesetz der Fortsetzung

  • Farb-Assoziationen

  • Textaufbau

    • Satzlänge

    • Formatierungen

    • Schrift

    • Zeilenabstand & Zeilenlänge

    • Absatzlänge

  • Fazit

Text-Gestaltung für lesbare Texte

Es geht hier nicht darum, das Ego des Schreibers zu pushen und irgendwelche Schönheitspreise für Texte zu gewinnen.

Vielmehr dreht sich alles um den Leser - wie auch sonst beim Webtexten.

Beim Text-Design stehen vor allem Lesbarkeit & Verständlichkeit im Fokus.

Und genau diese 2 Aspekte kannst – nein, musst du mit Hilfe von inhaltlichen und formalen Gestaltungsmitteln optimieren.

2 triftige Gründe, Texte lesbar zu gestalten

Google & SEO-Vorteile

Die Suchmaschine achtet ebenso wie deine Besucher auf die Lesbarkeit von Online-Texten.

Ist ein Text gut lesbar, finden sich nicht nur User, sondern auch der Google Bot leichter zurecht auf deiner Website.

Google ist zwar schlau - verdammt schlau - aber immer noch eine Maschine.

Wir müssen ihr also die richtigen Signale geben, damit sie den Inhalt einer Website überhaupt sinnvoll einordnen kann.

Die Text-Gestaltung gehört daher zu den absoluten SEO-Basics.

Mission Informationsvermittlung

Ja, auch die Texter-Ethik wollen wir hier nicht vernachlässigen.

Nach Definition der Informationswissenschaft sind Texte da, "um gelesen und verstanden zu werden" (virtuelles Handbuch der Informationswissenschaft)

Sie sollen Wissen vermitteln und zwar so, dass der Leser den Inhalt begreift. Leserlichkeit und Verständlichkeit hängen also zusammen.

Egal ob du Blogger, Autor, Webtexter oder Content-Manager bist – Texte müssen immer mit Blick auf den Leser gestaltet werden.

Aber das weißt du ja sowieso, nicht wahr?

Klick auf das Bild, um zum Beitrag User Experience zu geraten und mehr zu erfahren.

Klick auf das Bild, um zum Beitrag User Experience zu geraten und mehr zu erfahren.

UX-Faktor Lesbarkeit – ein echtes Problem bei Online-Texten

Warum verschwinden so viele Besucher wieder schneller von einer Website als sie gekommen sind?

In den meisten Fällen aufgrund einer schlechten User Experience.

Und die beginnt schon bei den einfachsten Gestaltungselementen & Text-Einheiten.

Das visuelle und typografische Design des Textes wird immer als erstes wahrgenommen.

Erst im 2. Schritt kommt der Inhalt.

Das Textbild beeinflusst den Betrachter also darin...

  • ob er den Text lesen möchte

  • ob er den Text entschlüsseln kann

  • wie er den Text versteht

Soweit, so klar.

Doch was bedeutet denn eigentlich: “gut lesbar”?

Die 4 Gesetze der Gestaltungspsychologie

Die sogenannte Gestaltpsychologie beschäftigt sich damit, wie Menschen Reize und komplexe Szenarien wahrnehmen.

4 Gesetze helfen zu verstehen, warum bestimmte Designs gut oder schlecht ankommen bzw. gut oder schlecht lesbar sind.

a) Das Gesetz der Nähe

Liegen Dinge räumlich nahe beieinander, nehmen wir sie als zusammengehörig wahr.

Dinge, die eine Distanz zueinander aufweisen, nehmen wir als unabhängig wahr.

Das Gesetz der Nähe - einfach erklärt

Das Gesetz der Nähe - einfach erklärt

Das betrifft nicht nur den Text.

Auch Buttons, Grafiken und Links sind wesentliche Elemente.

Gegen das Gesetz der Nähe solltest du nicht verstoßen. Denn es könnte fatale Auswirkungen auf die Verständlichkeit von Texten haben.

Positiv Beispiel

Positiv Beispiel

Negativ Beispiel

Negativ Beispiel

Text-Beispiel: schlecht lesbar

Text-Beispiel: schlecht lesbar

Text-Beispiel: gut lesbar

Text-Beispiel: gut lesbar

Aus den Beispielen wird vor allem deutlich:

Leere wird von unseren Augen als Information verwertet.

Daher lassen sich durch Leerstellen,

Inhalte sinnvoll ordnen und besser lesbar machen.

Leerräume tragen also Bedeutung.

b) das Gesetz der Ähnlichkeit

Sind sich Dinge ähnlich, nehmen wir sie als zusammengehörige Gruppe wahr.

Unterscheiden sich Objekte in wichtigen Merkmalen, empfinden wir sie als getrennt und voneinander unabhängig.

Klingt logisch, oder?

Wichtig: Die Ähnlichkeit kann auf Farbe, Textur, Helligkeit, Größe, Bewegungsrichtung, Geschwindigkeit etc. basieren.

Gesetz der Ähnlichkeit einfach erklärt

Gesetz der Ähnlichkeit einfach erklärt

Desto mehr Ähnlichkeiten 2 Dinge miteinander teilen, umso stärker der Drang, sie zu kategorisieren.

Das Gesetz der Ähnlichkeit findet sich recht häufig im Design von Webseiten.

Ein gutes Beispiel für die gelungene Gestaltung ist zum Beispiel Amazon oder Thalia.de:

Thalia.de: schlechtes Beispiel

Thalia.de: schlechtes Beispiel

Thalia.de: gutes Beispiel

Thalia.de: gutes Beispiel

Die durchgehend grüne Button-Farbe rechts symbolisiert "ich bedeute immer das selbe", ebenso wie die Farbe der Bewertungssterne links unter dem Titel.

Gleiche Elemente = gleiche Bedeutung.

Der Besucher findet sich intuitiv zurecht.

Anders wirkt das Bild, wenn die Buttons unterschiedliche Farben hätten, alle jedoch zum Download führen.

Die Struktur wirkt unruhig, ungeordnet und völlig sinnlos.

c) Gesetz der Geschlossenheit

Elemente mit geschlossenen Umrissen oder einer Umrahmung nehmen wir als zusammengehörige Gruppe wahr.

Werden Dinge durch Linien getrennt, wirken sie nicht zueinanderpassend.

Gesetz der Geschlossenheit

Gesetz der Geschlossenheit

Mit diesem Gestaltungsprinzip lassen sich

  • Infos ordnen,

  • Zusammenhänge verdeutlichen

  • und Orientierungsmarker setzen.

Bereits die Andeutung einer Geschlossenheit genügt, unser Auge ergänzt die fehlenden Linien automatisch.

Begrenzungen, Farben und Schattierungen müssen daher gut durchdacht sein, um nicht zu verwirren.

Beispiel Focus

Focus Negativ-Beispiel

Focus Negativ-Beispiel

Focus Positiv-Beispiel

Focus Positiv-Beispiel

d) Gesetz der Fortsetzung

Sind Dinge an einer durchgehenden Linie oder Kurve aufgereiht, bilden sie in unserer Wahrnehmung eine Gruppe.

Sie gehören zusammen.

Gesetz der Fortsetzung

Gesetz der Fortsetzung

Natürlich muss es keine Kurve sein.

Spalten, Zeilen, Fluchtlinien, Geraden bewirken das gleiche.

shopping24 schlechtes Beispiel

shopping24 schlechtes Beispiel

shopping24 gutes Beispiel

shopping24 gutes Beispiel

Farb-Assoziationen

Wie dir aufgefallen ist, will auch die Farbe der Elemente sorgfältig gewählt sein.

Farben haben eine starke emotionale Wirkung.

Zum Beispiel bietet es sich für die Website eines Reise-Anbieters an, Strandbeige und Ozeanblau zu verwenden.

Eine Bank wird hingegen zu einem seriösen Dunkelblau oder Grau greifen.

Liste der Farben und ihrer Effekte

Rot
Blut, Vitalität, Gefahr, Liebe, Leidenschaft

Orange
Freude, Spaß, Tatkraft, Ausdauer

Gelb
Reife, Wärme, Sonne, Kraft, Erfolg

Grün
Wachstum, Hoffnung, Entspannung, Ruhe

Blau
Harmonie, Zufriedenheit, Frieden, Himmel

Violett
Selbstbezogenheit, Mystik, Magie, Erwachsen

Weiß
Reinheit, Ordnung, Leichtigkeit

Schwarz
Trauer, Wandel, Loslassen

Die Schriftfarbe ist wiederum für die Lesbarkeit äußerst wichtig.

Sie sollte sich kontrastreich vom Hintergrund abheben, um gut lesbar zu sein.

Daneben ist auch der Helligkeitskontrast entscheidend.

Textaufbau – Inhalte richtig gestalten

Mit dem richtigen Textaufbau werden Webtexte lesbar und verständlich.

Mit dem richtigen Textaufbau werden Webtexte lesbar und verständlich.

Gute Webtexte brauchen passende Bilder und aussagekräftige Überschriften, um Spannung oder Neugier zu erzeugen.

Beitragsbild und Headtitel gehören zu den Gründen, warum die einen Texte gelesen werden und die anderen nicht.

Das sind aber nicht die einzigen Faktoren, die im Text-Design zählen…

Satzlänge

Allgemein gelten im Journalismus 15-20 Wörter pro Satz als das Maß aller Dinge für gut verständliche Inhalte.

Natürlich machen immer gleich lange Sätze noch keinen guten Text. Das wirkt eher so, als litte der Autor an Buchstaben-Asthma.

Halte deine Leser auf Trapp.

Ein lockeres Switchen zwischen kurzen und langen Sätzen erhält die Spannung aufrecht.

Formatierungen

Vor allem bei der Gestaltung von Online-Texten sind

  1. kurze Sätze (in Abwechslung mit mittellangen)

  2. knappe Absätze

  3. und Zwischenüberschriften absolute Pflicht.

Auf diese Weise erhält der Text eine Struktur, an der sich das Auge wie an einem Faden hinabhangeln kann.

Dazu zählen auch Formatierungen wie

  • Fettungen,

  • Kursiv-Schreibung,

  • Unterstrichen oder

  • Durchgestrichen

Nach dem Gesetz der Ähnlichkeit, solltest du dich für 1-2 Arten der Hervorhebung entscheiden und diese konsequent beibehalten.

Setzt du zu viele Varianten ein, verliert das Stilmittel seine Wirkung.

Apropos Text-Marker:

GROSSBUCHSTABEN sind keine Hervorhebung. Ganz im Gegenteil, sie hemmen sogar den Lesefluss.

Ergebnis: das Gelesene lässt sich schwerer aufnehmen und verstehen.

Schrift

Auch die Schriftart trägt zum Verständnis bei.

Auch die Schriftart trägt zum Verständnis bei.

2 verschiedene Schriftarten zu benutzen, kommt ebenfalls der Übersichtlichkeit zugute.

Maximal 3, aber auch nur in Einzelfällen.

Zu viele Schriftstile wirken wuselig und chaotisch.

Wichtig dabei: wenn 2 unterschiedliche Schriften, dann nutze welche aus 2 verschiedenen Familien.

Sie dürfen sich nicht zu ähnlich sehen, damit ein schöner, harmonischer Kontrast entsteht.

Zum Beispiel eine serifenlose Schrift wie Andale Mono mit der Serifen-Schrift Times New Roman.

Tipp: Mit dem Web Fonts Combinator kannst du herausfinden, welche Schriften zusammenpassen.

Zeilenlänge & Zeilenabstand tragen zur Leserlichkeit bei.

Zeilenlänge & Zeilenabstand tragen zur Leserlichkeit bei.

Zeilenabstand & Zeilenlänge

Es ist schlau, den Textlauf auf eine bestimmte Länge zu begrenzen.

Läuft der Text über die gesamte Seitenbreite, ist er schlechter lesbar.

Die Gründe:

  • Es fällt schwerer den Anfang der nächsten Zeile zu finden

  • Der Kopf muss beim Lesen mitbewegt werden – sehr unangenehm

Der Orientierungswert für eine gute Zeilenlänge liegt zwischen 60 und 80 Zeichen pro Zeile (bei Schriftgröße 8-12).

65 Zeichen sind ca. 10 Wörter.

Der Zeilenabstand darf wiederum etwas größer sein als die Schrift (120 %).

Mehr Tipps für Web-Texter erhältst du mit Klick auf das Beitragsbild.

Mehr Tipps für Web-Texter erhältst du mit Klick auf das Beitragsbild.

Wohlgemerkt:

Das sind Orientierungswerte und nicht die Kabbala des Online-Textens.

Absatzlänge

Ein Absatz sollte niemals mehr als 7 Zeilen umfassen, sonst wird er zur Textwüste.

Und durch die quält sich niemand freiwillig.

natürliche Sprache

Die wichtigste Regel im Text-Design!

Schreib in der Sprache deiner Leser.

Das bedeutet:

einfach, natürlich und klar.

Dann verstehen die Leute auch, was du ihnen sagen willst. Und das Lesen am Bildschirm ist um einiges angenehmer.


about-tamara-niebler-seo-texterin-muenchen.jpg

About Tamara von Löwen-Text

Meine offizielle Mission ist es, das WWW von miesen Bösewichtern wie sterbenslangweiligen Inhalten und greisligen Websites zu befreien.

Und natürlich Kaffee als Nationalgetränk zu etablieren! 😉 Ganz nebenbei mache ich auch OnPage-SEO und schreibe SEO-Texte in redaktioneller Qualität!