Lange Texte mit typografischen Tricks auflockern

Um lange Webseiten-Texte und Blog-Artikel auf­zu­lo­ckern und somit ange­nehmer lesbar zu machen, kannst du ver­schie­dene typo­gra­fi­sche Elemente nutzen. Durch die Gliederung des Textes in klei­nere Text-Abschnitte, die Unterteilung in Listen oder die Integration von Zitaten werden deine Texte leichter zugäng­lich und ange­nehmer lesbar.

Lesen im Web

Anders als beim Lesen eines Buches, werden beim Lesen im Internet Texte meist nur kurz mit dem Auge abge­scannt oder über­flogen. Erst dann ent­scheidet der Leser, ob er sich länger auf einer Webseite auf­hält oder einen Blog-Artikel voll­ständig lesen möchte.

Dieses Abscannen von Texten wird beim Lesen auf mobilen Geräten sogar noch ver­stärkt. Hier sitzt der Leser meist nicht kon­zen­triert am Schreibtisch, wie bei der Nutzung eines Desktop-Computers. Ein Smartphone oder Tablet nutzt man vor allem in der Freizeit oder unter­wegs, und dort ist man noch schneller abge­lenkt oder unaufmerksam.

Lesen erleich­tern

Daher sollte man es seinen Lesern nicht noch unnötig schwer machen, lange Texte zu lesen. Durch das Auflockern von län­geren Texten kann das Auge ent­lastet und die Aufmerksamkeit und der Spaß beim Lesen gestei­gert werden. Hier ein paar Tipps, um lange Texte span­nender und ange­nehm lesbar zu gestalten.

1. Ausreichende Schriftgröße

Als erstes sollte man auf eine aus­rei­chende 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än­gere Texte werden unan­ge­nehm zu lesen. Schlimmstenfalls bricht der Leser den Text sogar kom­plett ab.

Lange Webtexte auflockern

Eine ange­nehme 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 aus­gehen, die min­des­tens 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ür­zere Absätze zu unter­teilen. Bei Web-Texten kann man diese Technik noch viel inten­siver betreiben, als bei Print-Texten. So kann der Leser auch beim flüch­tigen Über­lesen eines Textes Anhaltspunkte finden und ver­liert sich nicht in einem langen, zähen Textfluss.

Beim Setzen von Textabschnitten soll­test du immer darauf achten, das der Texte auch inhalt­lich logisch getrennt wird. Eine will­kür­liche Trennung (z.B. nachdem der Text bereits fertig geschrieben ist), macht natür­lich weniger Sinn.

3. Textabschnitte durch Über­schriften trennen

Eine wei­tere Gliederung deines Textes kannst du durch das Setzen von Über­schriften errei­chen. Der Leser bekommt so eine Vorstellung, was ihn im nächsten Absatz zu erwarten ist. Wird ein Text nur flüchtig abge­scannt, kann der Leser auch viel leichter mitten im Artikel mit dem Lesen beginnen, z.B. wenn ihn eine Über­schrift beson­ders 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 ange­nehm, wenn ein Text auf einem Desktop-Bildschirm breiter als 700-800 Pixel ist.

5. Mehrspaltigkeit

Um eine zu lange Gesamt-Textbreite zu ver­meiden, kann man Texte zwei- oder mehr­spaltig umsetzen. Besonders auf großen Bildschirmen wirken mehr­spal­tige Texte auf­lo­ckernd und bieten eine ange­nehme Abwechslung zu ein­spal­tigen Texten. Mehrspaltiger Text kann auch genutzt werden, um eine inhalt­liche Gliederung zu unterstreichen.

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

6. Listen

Ein wei­teres tolles Tool zum Gliedern und Auflockern von Texten ist eine Liste. Listen lassen sich leicht über­fliegen und sind ange­nehm zu lesen, da die ein­zelnen Punkte klar unter­teilt sind. Einen langen Webtext durch eine (auch nur kurze) Auflistung zu unter­bre­chen ist ein hilf­rei­ches Mittel, um einen Text aufzulockern.

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

7. Bilder

lange Webtexte auflockern Bilder als auf­lo­ckernde Elemente in einem langen Text zu nutzen, ist eben­falls sehr effektiv. Bilder sind immer ein Hingucker und können daher einen Text für den Leser inter­es­santer machen. Du soll­test aller­dings darauf achten, das du nicht zu viele Bilder in einem Text inte­grierst. Wenn der Textfluss zu stark unter­bro­chen wird, kann der Leser dem Text nicht mehr flüssig folgen und das Lesen des Textes wird anstrengend.

8. Zitate und Pullquotes

Wenn es inhalt­lich Sinn macht, kannst du auch Zitate in einen Text ein­binden. Diese Unterstreichen und Hinterlegen noch einmal die Botschaft deines Textes und bieten außerdem eine gra­fisch span­nende Abwechslung zum nor­malen Standard-Fließtext.

Wenn du dich an die Form des Löffels erin­nerst, 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 wich­tigen, aus­sa­ge­kräf­tigen Text-Absatz oder Satz deines Textes noch einmal her­vor­heben und den Leser so auf deinen Inhalt neu­gierig machen. Im Gegensatz zum Zitat wird der Text beim Pullquote dop­pelt ange­zeigt, einmal her­vor­ge­hoben und dann noch einmal ganz normal im Fließtext.

9. Text auf Hintergrundflächen

Ähnlich wie bei einem Zitat oder Pullquote kannst du wich­tige Textabschnitte auch durch einen far­bigen Hintergrund her­vor­heben. Dies kann z.B. eine bestimmte Info sein oder eine Auflistung.

Dies ist eine wich­tige Information. Daher nutze ich eine farbig hin­ter­legte Fläche, um den Textabsatz beson­ders hervorzuheben.

Damit der her­vor­ge­ho­bene Text als etwas beson­deres im Text her­vor­sticht, soll­test du den Text in der Fläche aber nicht zu lang werden lassen.

Deine Vorschläge zur Text-Optimierung

Fallen dir noch wei­tere typo­gra­fi­sche Elemente ein, um einen langen Text auf­zu­lo­ckern und attrak­tiver zum Lesen zu machen? Über dein Feedback und wei­tere Tipps freue ich mich sehr.

29 Kommentare

  5. Jan

    Hello. Wirklich sehr schöner, lesens­werter und infor­ma­tiver Beitrag! Mal eine Frage zur fle­xi­blen Trennung am Spaltenende. Wodurch erreichst Du das? Mit wel­chem Script arbei­test Du, dass je nach Device ( Smartphone, iPad usw.) die Wörter so getrennt werden, dass Du einen sau­beren Umbruch mit Trennstrich erhältst? LG

    • Sabine

      Jan, das ist kein Script, son­dern eine CSS-Deklaration im Stylesheet. Unter der Über­schrift »Typographie« fin­dest Du dort diese Angaben:

      con­tent p (.…) -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

      Liebe Grüße,
      Sabine

      • Jan

        Dank Dir, Sabine, für den sehr hilf­rei­chen Tipp. Dachte immer, dass es nur mit Javascript zu rea­li­sieren ist. Funktioniert das auch im Explorer (ab Version 7)? Lieben Gruß, Jan

        • Sabine

          War mir ein Vergnügen! Ich freue mich immer, wenn ich aus­nahms­weise mal was weiß. ;-)

          Was den IE anbe­langt, 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 ver­gan­genen Jahrzehnten würde ich ein Nein jedoch für wahr­schein­li­cher halten als ein Ja.

          • Gino

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

            Mir fehlt aller­dings das Kriterium »Kontrast«. Gerade wer - wie ich bei­spiels­weise - weisse Schrift auf schwarzem Hintergrund ein­setzt, muss auf umso mehr auf deine Ratschläge achten. Vorallem bezüg­lich der Größe der Schriftart. Lesbarkeit ist das A und O und der Kontrast hängt unmit­telbar damit zusammen.

            @Sabine und Jan: Nein, für den IE muss man auf eine JavaScript-Lösung setzen, leider. Wundert aller­dings auch nicht wirk­lich, dass unser guter Freund aus Redmond eine der­ar­tige CSS3-Eigenschaft nicht oder nur unge­nü­gend beherrscht. Zukunftsmusik. Mit etwas Glück.
            Schaut euch mal »Hyphenator« an, ich habe in meinem eigenen Blog einen Artikel ver­fasst ü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

    • Ellen

      Zusätzlich (oder alter­nativ) könn­test du auch noch das WordPress-Plugin wp Typography aus­pro­bieren. Dieses haben wir hier auf Elmastudio auch noch im Einsatz. Die Antwort von Sabine ist aber auf jeden Fall auch kor­rekt und natür­lich ist es sehr viel moderner und ein­fa­cher, wenn der Browser die Silbentrennung direkt über­nimmt. Das Nori-Theme unter­stützt auch »hyphens«.

      Viele Grüße,
      Ellen

  8. Daniel

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

  11. runner

    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! ;-)

  12. Pingback: Glanzlichter 83: Linke, Googleheimer und die Steinzeit « … Kaffee bei mir?

  13. Felix

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

  15. Ellen

    @alle: Vielen herz­li­chen Dank für euer tolles Feedback zum Artikel und die wei­teren Tipps zum Thema »Lesbarkeit von Web-Texten« :)

    Viele Grüße,
    Ellen

  16. Pingback: Automatische Silbentrennung im Internet? Dank Hyphenator kein Problem! - Pixelbar Eupen

  18. oggy

    Toller Beitrag, wirk­lich! Ich habe selbst auch einige Anregungen mit­nehmen können. Was ich aller­dings auch noch ganz toll gefunden hätte: Beispiele zur Umsetzung in HTML. ;-)

  19. Tanja

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

  20. Pingback: Online-Journalismus: Mehr Erklärbären! « … Kaffee bei mir?

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.

*


Top