Lange Texte mit typografischen Tricks auflockern

Um lange Webseiten-Texte und Blog-Artikel aufzulockern und somit angenehmer lesbar zu machen, kannst du verschiedene typografische Elemente nutzen. Durch die Gliederung des Textes in kleinere Text-Abschnitte, die Unterteilung in Listen oder die Integration von Zitaten werden deine Texte leichter zugänglich und angenehmer lesbar.

Lesen im Web

Anders als beim Lesen eines Buches, werden beim Lesen im Internet Texte meist nur kurz mit dem Auge abgescannt oder überflogen. Erst dann entscheidet der Leser, ob er sich länger auf einer Webseite aufhält oder einen Blog-Artikel vollständig lesen möchte.

Dieses Abscannen von Texten wird beim Lesen auf mobilen Geräten sogar noch verstärkt. Hier sitzt der Leser meist nicht konzentriert am Schreibtisch, wie bei der Nutzung eines Desktop-Computers. Ein Smartphone oder Tablet nutzt man vor allem in der Freizeit oder unterwegs, und dort ist man noch schneller abgelenkt oder unaufmerksam.

Lesen erleichtern

Daher sollte man es seinen Lesern nicht noch unnötig schwer machen, lange Texte zu lesen. Durch das Auflockern von längeren Texten kann das Auge entlastet und die Aufmerksamkeit und der Spaß beim Lesen gesteigert werden. Hier ein paar Tipps, um lange Texte spannender und angenehm lesbar zu gestalten.

1. Ausreichende Schriftgröße

Als erstes sollte man auf eine ausreichende Schriftgröße achten. Eine kleine Schriftgröße für Fließtexte sieht zwar schick aus, strengt aber das Auge beim Lesen unnötig an. Besonders längere Texte werden unangenehm zu lesen. Schlimmstenfalls bricht der Leser den Text sogar komplett ab.

Lange Webtexte auflockern
Eine angenehme Schriftgröße vs. eine zu kleine Schriftgröße (Neue Helvetica, Roman 55, 16px und 13px)

Die Größe der Schrift fällt bei jeder Schriftart etwas anders aus. Als Richtlinie kann man aber von einer Fließtext-Schrift ausgehen, die mindestens 16 Pixel haben sollte. Ein geniales Tool zum Abmessen von Schriftgrößen im Browser ist “What the Font” (als Bookmarklet, Chrome oder Safari Browser-Extension).

2. Lange Texte in kurze Abschnitte gliedern

Bei langen Texten ist es ideal, diesen in kürzere Absätze zu unterteilen. Bei Web-Texten kann man diese Technik noch viel intensiver betreiben, als bei Print-Texten. So kann der Leser auch beim flüchtigen Überlesen eines Textes Anhaltspunkte finden und verliert sich nicht in einem langen, zähen Textfluss.

Beim Setzen von Textabschnitten solltest du immer darauf achten, das der Texte auch inhaltlich logisch getrennt wird. Eine willkürliche Trennung (z.B. nachdem der Text bereits fertig geschrieben ist), macht natürlich weniger Sinn.

3. Textabschnitte durch Überschriften trennen

Eine weitere Gliederung deines Textes kannst du durch das Setzen von Überschriften erreichen. Der Leser bekommt so eine Vorstellung, was ihn im nächsten Absatz zu erwarten ist. Wird ein Text nur flüchtig abgescannt, kann der Leser auch viel leichter mitten im Artikel mit dem Lesen beginnen, z.B. wenn ihn eine Überschrift besonders interessiert.

4. Gesamtbreite des Textes

Wichtig ist auch, dass die Gesamtbreite eines Textes nicht zu lang ist. Die ideale Breite hängt immer etwas von der Schriftgröße ab. In den meisten Fällen ist es aber nicht angenehm, wenn ein Text auf einem Desktop-Bildschirm breiter als 700-800 Pixel ist.

5. Mehrspaltigkeit

Um eine zu lange Gesamt-Textbreite zu vermeiden, kann man Texte zwei- oder mehrspaltig umsetzen. Besonders auf großen Bildschirmen wirken mehrspaltige Texte auflockernd und bieten eine angenehme Abwechslung zu einspaltigen Texten. Mehrspaltiger Text kann auch genutzt werden, um eine inhaltliche Gliederung zu unterstreichen.

Bei einer Auflistung (z.B. von verschiedenen Angeboten oder bei einem Portfolio-Element) bietet sich eine solche Gliederung in mehrere Spalten an. Wichtig ist aber, dass die einzelne Text-Spalte nicht zu schmal wird. Denn genau wie eine zu lange Textbreite, ist auch ein zu schmaler Text schlecht lesbar.

6. Listen

Ein weiteres tolles Tool zum Gliedern und Auflockern von Texten ist eine Liste. Listen lassen sich leicht überfliegen und sind angenehm zu lesen, da die einzelnen Punkte klar unterteilt sind. Einen langen Webtext durch eine (auch nur kurze) Auflistung zu unterbrechen ist ein hilfreiches Mittel, um einen Text aufzulockern.

  • Listenelement 1
  • Listenelement 2
  • Listenelement 3
  • Listenelement 4

7. Bilder

lange Webtexte auflockern Bilder als auflockernde Elemente in einem langen Text zu nutzen, ist ebenfalls sehr effektiv. Bilder sind immer ein Hingucker und können daher einen Text für den Leser interessanter machen. Du solltest allerdings darauf achten, das du nicht zu viele Bilder in einem Text integrierst. Wenn der Textfluss zu stark unterbrochen wird, kann der Leser dem Text nicht mehr flüssig folgen und das Lesen des Textes wird anstrengend.

8. Zitate und Pullquotes

Wenn es inhaltlich Sinn macht, kannst du auch Zitate in einen Text einbinden. Diese Unterstreichen und Hinterlegen noch einmal die Botschaft deines Textes und bieten außerdem eine grafisch spannende Abwechslung zum normalen Standard-Fließtext.

Wenn du dich an die Form des Löffels erinnerst, mit dem du die Suppe gegessen hast, dann war es eine schlechte Form. Löffel und Letter sind Werkzeuge: das eine nimmt Nahrung aus der Schale, das andere nimmt Nahrung vom Papierblatt. Die Schrift muss so sein, dass der Leser sie nicht bemerkt…
Adrian Frutiger

Mit Pullquotes einen Textabsatz hervorheben

Mit einem Pullquote (auch Seitenansprache genannt) kannst du einen wichtigen, aussagekräftigen Text-Absatz oder Satz deines Textes noch einmal hervorheben und den Leser so auf deinen Inhalt neugierig machen. Im Gegensatz zum Zitat wird der Text beim Pullquote doppelt angezeigt, einmal hervorgehoben und dann noch einmal ganz normal im Fließtext.

9. Text auf Hintergrundflächen

Ähnlich wie bei einem Zitat oder Pullquote kannst du wichtige Textabschnitte auch durch einen farbigen Hintergrund hervorheben. Dies kann z.B. eine bestimmte Info sein oder eine Auflistung.

Dies ist eine wichtige Information. Daher nutze ich eine farbig hinterlegte Fläche, um den Textabsatz besonders hervorzuheben.

Damit der hervorgehobene Text als etwas besonderes im Text hervorsticht, solltest du den Text in der Fläche aber nicht zu lang werden lassen.

Deine Vorschläge zur Text-Optimierung

Fallen dir noch weitere typografische Elemente ein, um einen langen Text aufzulockern und attraktiver zum Lesen zu machen? Über dein Feedback und weitere Tipps freue ich mich sehr.

31 Kommentare

  1. Klasse Beitrag und gute Tipps! Da werd ich doch glatt mal den Text auf meinen Blog etwas größer machen! :)..

    Grüße, Vincent

  2. Hello. Wirklich sehr schöner, lesenswerter und informativer Beitrag! Mal eine Frage zur flexiblen Trennung am Spaltenende. Wodurch erreichst Du das? Mit welchem Script arbeitest Du, dass je nach Device ( Smartphone, iPad usw.) die Wörter so getrennt werden, dass Du einen sauberen Umbruch mit Trennstrich erhältst? LG

    • Jan, das ist kein Script, sondern eine CSS-Deklaration im Stylesheet. Unter der Überschrift “Typographie” findest Du dort diese Angaben:

      content p (….) -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

      Liebe Grüße,
      Sabine

      • Dank Dir, Sabine, für den sehr hilfreichen Tipp. Dachte immer, dass es nur mit Javascript zu realisieren ist. Funktioniert das auch im Explorer (ab Version 7)? Lieben Gruß, Jan

        • War mir ein Vergnügen! Ich freue mich immer, wenn ich ausnahmsweise mal was weiß. ;-)

          Was den IE anbelangt, sind meine Grenzen auch schon wieder erreicht, weil mir sowas nicht auf die Festplatte kommt. Sorry, da kann ich leider nicht helfen.

          Unter Berücksichtigung aller Erfahrungswerte aus den vergangenen Jahrzehnten würde ich ein Nein jedoch für wahrscheinlicher halten als ein Ja.

          • Hallo Ellen, danke für deinen tollen Beitrag. Grade als Blog-Betreiber lese ich derartige Tipps immer wieder gerne :-)

            Mir fehlt allerdings das Kriterium “Kontrast”. Gerade wer – wie ich beispielsweise – weisse Schrift auf schwarzem Hintergrund einsetzt, muss auf umso mehr auf deine Ratschläge achten. Vorallem bezüglich der Größe der Schriftart. Lesbarkeit ist das A und O und der Kontrast hängt unmittelbar damit zusammen.

            @Sabine und Jan: Nein, für den IE muss man auf eine JavaScript-Lösung setzen, leider. Wundert allerdings auch nicht wirklich, dass unser guter Freund aus Redmond eine derartige CSS3-Eigenschaft nicht oder nur ungenügend beherrscht. Zukunftsmusik. Mit etwas Glück.
            Schaut euch mal “Hyphenator” an, ich habe in meinem eigenen Blog einen Artikel verfasst über die Vor- und Nachteile dieses Scripts (ich erlaube mir mal die Adresse zu posten): http://www.pixelbar.be/blog/automatische-silbentrennung-im-internet-dank-hyphenator-kein-problem

    • Zusätzlich (oder alternativ) könntest du auch noch das WordPress-Plugin wp Typography ausprobieren. Dieses haben wir hier auf Elmastudio auch noch im Einsatz. Die Antwort von Sabine ist aber auf jeden Fall auch korrekt und natürlich ist es sehr viel moderner und einfacher, wenn der Browser die Silbentrennung direkt übernimmt. Das Nori-Theme unterstützt auch “hyphens”.

      Viele Grüße,
      Ellen

  3. Richtig tolle Tipps. Im Web stößt man sehr oft auf Typografische Sünden. Text zu klein zu wenig Kontrast zwischen Schrift und Hintergrund und und und. Diese Leute sollten diesen Artikel hier lesen :-)

  4. Super Artikel, Ellen. Einfach klasse Tipps, das mit dem Pullquote wußte ich nicht. Ich habe danach immer gesucht und werde es ab jetzt öfters nutzen! Versprochen! ;-)

    Und by the way du baust super Themes! ;-)

  5. Man kann auch den ersten Buchstaben eines jeden Absatzes ca. viermal so groß machen wie normal. Also so wie man es bei manchen Zeitschriften oder Zeitungen sieht

  6. @alle: Vielen herzlichen Dank für euer tolles Feedback zum Artikel und die weiteren Tipps zum Thema “Lesbarkeit von Web-Texten” :)

    Viele Grüße,
    Ellen

  7. Toller Beitrag, wirklich! Ich habe selbst auch einige Anregungen mitnehmen können. Was ich allerdings auch noch ganz toll gefunden hätte: Beispiele zur Umsetzung in HTML. ;-)

  8. Danke für die Tipps – sie kommen genau zur rechten Zeit, denn ich mache mir gerade intensiv Gedanken über Verbesserungen für eine bessere Lesbarkeit.
    Und leider ist man selbst ja nach einer gewissen Zeit quasi “blogblind” und merkt selber nicht mehr, was andere sofort stören würde….Dankeschön darum :-)

  9. hallo ellen,
    sehr schöner blog, auf den ich immer wieder stosse …

    kannst du mir einen tipp geben, wie ich flexibel und einfach eine farbfläche hinter den text bekomme? am liebsten “randabfallenend” gibt es dafür plugins oder füge ich ein oder html? ich suche mir die finger wund und finde dafür keine lösung …

    viele grüße
    jan

Hinterlasse eine Antwort

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