Kommentare 12

Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten

Im zweiten Teil der Serie »Typo-Tipps für Webdesigner« dreht sich alles um den Fließtext deiner Webseite. Denn natürlich ist es nicht nur wichtig, dass deine Leser von den Überschriften deiner Texte begeistert sind (siehe Teil 1 der Serie), sondern dass sie auch die Inhalte gerne lesen. Du hast dir schließlich viel Mühe beim Schreiben der Texte gemacht. Daher soll die Gestaltung auf keinen Fall vom Inhalt ablenken, sondern diesen durch gute Lesbarkeit und ein übersichtliches Layout unterstützen.

1. Die Schriftart wählen

Auch beim Fließtext stellt sich dir wieder die gleiche Frage, wie schon bei der Schriftwahl der Überschriften: Verwendest du eine serifen- oder eine serifenlose Schrift?

Typografie Tipps fuer Webdesigner Teil 2

Eine Serifenschrift hat den Vorteil, dass sie auch bei längeren Textabschnitten gut lesbar ist. Eine serifenlose Schrift ist dagegen zeitloser und passt eventuell besser zu deinem restlichen Webdesign. Ein Trick (den du besonders gut bei Texten fürs Web anwenden kannst) ist es großzügig Absätze einzubauen, um die Textpassagen so kürzer und überschaubarer zu gestalten.

Du solltest auch daran denken, dass Texte im Internet eher vom Leser abgescannt werden, als von Anfang bis Ende durchgelesen.

2. Die passende Schriftgröße

Nachdem du dich für eine Schriftart entschieden hast, musst du dich nun noch für eine passende Schriftgröße entscheiden. Über die passende Größe von Webtexten wird ganz gerne diskutiert. Meiner Meinung nach tendieren viele Webdesigner dazu, eine zu kleine Schriftgröße zu verwenden (weil sie finden das es schicker aussieht oder besser zum übrigen Design ihrer Seite passt).

Doch was bringt der beste Text, wenn er nicht angenehm zu lesen ist? Daher würde ich beim Fließtext eher zu einer größeren font-size raten. Kleiner als 12px-13px sollte der Fließtext also wirklich nicht sein, eher größer. Ich denke eine Standard-Schriftgröße zwischen 14-16 Pixeln ist (je nach Schriftart) ideal.

Typografie Tipps fuer Webdesigner Teil 2

3. Der Zeilenabstand (line-height)

Nicht nur die Schriftgröße ist für die Lesbarkeit eines Textes wichtig, auch der Abstand zwischen den einzelnen Text-Zeilen. Du solltest darauf achten, das der Text einen angenehmen Fluss bildet, und du beim Lesen mit den Augen leicht von einer Zeile in die nächste springen kannst. Bei zu geringem Zeilenabstand wirkt der Text gequetscht und man verrutscht beim Lesen leicht in der Zeile.

Typografie Tipps fuer Webdesigner Teil 2

4. Die Textbreite bestimmen

Ein weiterer, wichtiger Punkt ist die richtige Textbreite für deinen Fließtext zu bestimmen. Diese sollte nicht zu schmal, aber auch nicht zu breit sein.

Bei einer zu schmalen Textbreite kann kein Rhythmus beim Lesen entstehen, da der Leser ständig den Text unterbrechen muss, um in die nächste Zeile zu wechseln.

Typografie Tipps fuer Webdesigner Teil 2

Bei einem zu breitem Text verrutscht der Leser leicht mit dem Auge (während er in die nächste Zeile springt) und weiss dann nicht mehr, in welcher Zeile er weiter lesen muss.

Ist die Textbreite dagegen richtig gewählt, kann der Leser dem Text entspannt folgen, ohne sich besonders anstrengen zu müssen.

Typografie Tipps fuer Webdesigner Teil 2

5. Kontrast zwischen Schrift und Hintergrund schaffen

Um zu Vermeiden, dass die Augen beim Lesen unnötig angestrengt werden, ist es auch wichtig einen gewissen Kontrast zwischen Schriftfarbe und Hintergrund zu erzeugen. Bei ähnlichen Farben für Text und Hintergrund ist der Text sehr schwer zu lesen.

Typografie Tipps fuer Webdesigner Teil 2

Grundsätzlich ist es für das Auge angenehmer, dunkle Schrift auf hellem Hintergrund zu lesen. Helle Schrift auf dunklem Hintergrund ist vor allem für kurze Textpassagen oder besonders hervorgehobenen Text geeignet.

6. Absätze für bessere Lesbarkeit

Gerade im Web ist es wichtig den Text aufzulockern, und genügend Weißraum zwischen den einzelnen Absätzen beizubehalten. So kann der Leser auch an einer beliebigen Stelle im Text einsteigen, und eventuell nur für ihn relevante Absätze des Artikels lesen.

Typografie Tipps fuer Webdesigner Teil 2

7. Textelemente hervorheben

Um bestimmte Wörter oder Sätze zu betonen, verwendest du am besten kursiven oder fett gesetzten Text.

Typografie Tipps fuer Webdesigner Teil 2

Willst du einen ganzen Satz betonen, kannst du diesen auch kursiv setzen und zusätzlich einrücken. So hebt sich die Textpassage noch mehr vom restlichen Text ab.

Du solltest Text (der kein Link) ist, allerdings nicht durch Unterstreichen betonen, da unterstrichene Elemente in Webtexten als Links gesehen werden.

8. Text-Links stylen

Wie gerade schon erwähnt gelten unterstrichene Wörter als Links. Zusätzlich kannst du einen Link noch durch eine spezielle Linkfarbe hervorheben. Diese kann entweder im Normal-Zustand heller sein als bei Hover, oder anders herum.

Typografie Tipps fuer Webdesigner Teil 2

Eine sehr beliebte Alternative zur durchgezogenen Linie (text-decoration: underline) ist, den Link mit einer gepunkteten Border zu unterstreichen (text-decoration: none; border: dotted;).

Natürlich kannst du deine Links auch nur mit einer Signal-Farbe markieren, und dann bei Hover unterstreichen oder eine Hintergrundfarbe setzen.

9. Abstände zu Elementen (margin, padding)

Als letzten Punkt möchte ich noch kurz darauf hinweisen, wie wichtig der Abstand zwischen Text und anderen Elementen im Artikel (z.B. Bilder oder Überschriften) ist. Du solltest bei deinem CSS-Styling der margins und paddings darauf achten, dass immer ein gleichmäßiger Abstand zwischen den jeweiligen Elementen eingehalten wird.

Typografie Tipps fuer Webdesigner Teil 2

Haben dir diese Typo-Tipps weiter geholfen? Kennst du noch weitere wichtige Punkte, die bei der Gestaltung von Texten im Web unbedingt zu beachten sind? Über dein Feedback und deine Tipps freue ich mich sehr!

12 Kommentare

  1. Danke für den Artikel. Wie man schön sehen kann, ist es keine Hexerei, lesbaren Text im Web zu gestalten. Um so unverständlicher, dass man fast täglich Negativbeispielen über den Weg läuft.

    • @Mario: Vielen herzlichen Dank für dein Feedback :-)

      Da hast du Recht! Es ist überhaupt nicht so schwierig, auch die Texte einer Webseite ansprechend zu gestalten :-) Wenn sich Webdesigner bei der Gestaltung von Text nur wenig Gedanken machen, finde ich dies sehr schade. Denn das Wichtigste ist ja, dass das Design den Inhalt unterstützt.

      Ich selbst liebe Typografie. Daher macht es mir sehr viel Spaß, auch in diesem Bereich des Webdesigns ins Detail zu gehen :-)

      Viele Grüße
      Ellen

  2. Ich hätte da noch ne kleine Faustregel zum prüfen der Zeilenhöhe/des Zeilenabstands die ich vor kurzem Aufgeschnappt habe:
    Einfach den Text markieren und darauf achten das mind. eine minimale Lücke zwischen den Zeilen besteht.

    • @Olli: Super, vielen herzlichen Dank für diesen Tipp :-)

      Stimmt! Den Text im Grafik-Programm zu markieren, um zu prüfen ob ein Abstand zwischen den Markierungen entsteht, ist auch ein sehr guter Anhaltspunkt den Zeilenabstand von Texten festzulegen.

      Möchte man den line-height Wert im CSS anpassen, funktioniert diese Methode glaube ich nur im Firefox. Google Chrome zeigt insgesamt keine Lücken zwischen Markierungen an, zumindest habe ich das gerade so getestet ;-).

      Viele Grüße
      Ellen

  3. Ach noch etwas:
    Ich wollte den Artikel “mal eben” twittern. Jedoch ist der erzeugte Text (Euer Button unter dem Text) durch die lange URL zu lang. Der zusätzliche Aufwand (die URL selbst zu verkürzen) ist vielleicht dem einen oder anderen zu groß – und viele kennen/nutzen es nicht.

    Auf meiner Webseite http://www.geldelt.de ist ein “Tweet this” eingebaut, daß den Link automatisch verkürzt.

    Vielleicht möchtest Du das auch hier umsetzen? Dann hast Du auch gleich wieder einen tollen Tipp für andere.

    Liebe Grüße
    Oliver

    • @Oliver: Danke dir für dein tolles Feedback. Es freut mich sehr, dass dir der Typo-Artikel so gut gefällt :-)

      Vielen herzlichen Dank auch für deinen Tipp bzgl. des Tweet this-Links. Das ist eine tolle Option, ich glaube ich werde das so einbauen. Die lange URL ist leider noch eine folge des Relaunches (davor hatten wir ein Plugin für die Bookmarking-Buttons verwendet) und steht immer noch auf meiner to-do Liste… ;-)

      Ich schaue mal, dass ich später noch dazu komme das zu ändern :-)

      Viele Grüße
      Ellen

        • Super, das Ergebnis nach einem Klick auf den Twitter-Button sieht gut aus.

          BTW: Der Facebook-Button macht auch noch nicht was er soll ? Ich bekomme da nur eine Aufforderung, eine URL einzugeben. Da soll doch bestimmt schon die URL stehen, oder?

          Grüße
          Oliver

  4. Tatsache, in Safari und Chrome funktioniert die Markieren-Methode nicht… Beim Internet Explorer und bei Opera dagegen funktioniert sie, genau wie beim Firefox.

    Hatte ich irgendwie nie bei den anderen Browsern getestet, benutze standardmässig fast nur den Firefox…

    • @Olli: Super, danke für dein Feedback zu den übrigen Browsern! Mir war es auch nur zufällig aufgefallen, da ich standardmäßig Chrome nutze und es gleich mal ausprobiert hatte ;-)

      In Illustrator und Photoshop funktioniert deine Methode übrigens auch hervorragend :-)

      Viele Grüße
      Ellen

Schreibe eine Antwort