Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten

Im dritten Teil der Serie »Typo-Tipps für Webdesigner« geht es um alle Elemente die helfen, deine Texte spannender zu gestalten. Gerade bei längeren Texten oder Artikeln im Web ist es sinnvoll, den Text durch Bilder, Listen, hervorgehobene Textstellen oder Zitate aufzulockern und so angenehm lesbar zu machen. Hier ein paar der hilfreichsten Stilmittel, mit denen du deine Webtexte aufpeppen kannst.

1. Text und Bilder

Bilder sind eines der wichtigsten Elemente, um einen längeren Text oder Artikel aufzulockern. Dabei solltest du darauf achten, dass der Abstand zwischen Bild und Text immer gleichmäßig und in einem angenehmen Abstand gesetzt ist (CSS margin).

Außerdem kannst du Bilder rechts oder linksbündig setzen und den Text (mit floating) darum fliessen lassen.

Typografie Tipps fuer Webdesigner Teil 3

Dabei ist es aber sehr wichtig, dass die Textbreite nicht zu schmal wird.

1.1. Vorschaubilder (thumbnails)

Eine tolle Option (die du z.B. bei WordPress-Blogs ganz einfach einfügen kannst, hier eine kleine Anleitung) sind Vorschaubilder (thumbnails) für deine Artikel. Ein Vorschaubild macht es dem Leser leichter, einen Einstieg in den Artikel zu finden.

1.2. Bilder mit oder ohne Rahmen

Bilder kannst du mit oder ohne Rahmen einfügen. Die Entscheidung, ob du einen Rahmen verwenden möchtest, hängt stark vom Hintergrund der Seite ab. Wichtig ist, dass sich die Bilder genug vom Hintergrund abheben. Bei dunklen Bildern auf dunklem Hintergrund (oder hellen Bildern auf hellem Hintergrund) ist die Kante des Bildes nicht mehr deutlich zu erkennen. Wenn du möchtest, kannst du aber auch gerade diesen Effekt als Stilmittel einsetzen.

Typografie Tipps fuer Webdesigner Teil 3
Ein Beispiel für Bilder auf dunklem Hintergrund. Hier wäre ein Rahmen überflüssig.

Typografie Tipps fuer Webdesigner Teil 3
Ein Bild auf hellem Hintergrund, dass ebenfalls ohne Rahmen auskommt.

1.3. Bildunterschriften (Captions)

Ein weiteres, hilfreiches Stilmittel beim Arbeiten mit Text und Bild sind die Bildunterschriften (Captions). Diese sind oft kleiner als die eigentliche Textgröße und eventuell in einer leicht helleren Farbe gesetzt. Du kannst auch kursiven Text für deine Captions verwenden.

Typografie Tipps fuer Webdesigner Teil 3
Beispiel einer Bildunterschrift innerhalb des Rahmens.

Typografie Tipps fuer Webdesigner Teil 3
Hier kommt eine kursive Schrift zum Einsatz.

2. Listen

Inhalte in Listen zu unterteilen ist ebenfalls sehr hilfreich, um Texte zu ordnen. Listen verdeutlichen die Struktur eines Textes. Der Leser kann leichter überschauen, was ihn im Text erwartet.

Du kannst deine Listenelemente entweder in einer »Unordered List« (HTML-tag ul) sortieren, oder in einer »Ordered List« (ol).

2.1. Unordered List

Eine »Unordered List« ist nicht nummeriert, sondern wird durch verschiedene Listenzeichen (Bullets) markiert. Es gibt unterschiedliche CSS-Elemente, die du den Listenelementen (HTML-tag li) deiner Unorderd List mit dem CSS-Style »list-type« zuweisen kannst.

Typografie Tipps fuer Webdesigner Teil 3

Falls du deine eigenen Bullets gestalten möchtest, kannst du auch ein Image erstellen und es als Bullet einfügen.

Typografie Tipps fuer Webdesigner Teil 3
Eine Liste mit kreativen Sternchen.

Hast du einen relativ breiten Text, kannst du das Listenelement auch noch ein wenig nach rechts einzurücken. So hebt sich die Liste deutlicher vom übrigen Text ab. Außerdem ist es sinnvoll zwischen Fließtext und Listenelement, sowie zwischen den einzelnen Elementen innerhalb der Liste, einen gwissen Abstand zu halten. So wirkt die Liste nicht gequetscht und die einzelen Listenelemente sind optisch angenehm voneinander getrennt.

2.2. Ordered List

Bei einer Ordered List kannst du deine Listenelemente z.B. mit Zahlen, Buchstaben oder römischen Zahlen nummerieren.

Hier findest du eine Zusammenstellung aller CSS-Styles für Listenelemente.

3. Initiale (große Anfangsbuchstaben) setzen

Typografie Tipps fuer Webdesigner Teil 3

Den ersten Buchstaben deines Artikels kannst du als einleitendes Element in Großbuchstaben setzen. Entweder verwendest du dafür ein Image, oder du stylst den ersten Buchstaben im Text mit in einer größeren Schrift. Du solltest allerdings darauf achten, das der Abstand ziwschen Initiale und Fließtext angenehm gestaltet ist.

4. Zitate und Textpassagen hervorheben

Ein sehr schönes Stilmittel ist es auch, besondere Textpassagen (z.B. Zitate, die wichtigste Ausage eines Textes etc.) durch Schriftgröße, Hintergrund oder kursiven Text hervorzuheben.

4.1. Zitate

Typografie Tipps fuer Webdesigner Teil 3

Zitate markierst du in deinem Code durch »blockquotes«. Um Zitate hervorzuheben, kannst du ihnen eine besondere Schrift- oder Hintergrundfarbe geben, sie in kursiv setzen und eine größere Schrift verwenden. Wenn du möchtest, kannst du auch eine andere Schriftart einsetzen (z.B. eine Serifenschrift).

Ein Trend im Webdesign ist es auch, Zitate mit einem Balken links vom Text zu markieren oder besonders große Anführungszeichen zu verwenden. Allgemein ist es sinnvoll Zitate ein wenig rechts und links einzurücken.

4.2. Mit Pullquotes Inhalte hervorheben

»Pullquotes« sind hervorgehobene Textpassagen oder Säzte, die du aus deinem Text herausziehst, um so die Aussage des gesamten Textes besonders zu unterstreichen. Der Unterschied zu »blockquotes« ist, dass der Text wiederholt wird (also im Fießtext noch einmal vorkommt).

Oft sind »pullquotes« rechts oder linksbündig vom Textblock platziert, und in einer größeren oft fetten Schrift gesetzt.

Typografie Tipps fuer Webdesigner Teil 3

Du solltest Zitate und hervorgehobenen Text nur dezent einsetzen. Hast du zu viele Zitate in einem Text, geht der Effekt verloren und der Textfluß wird zu stark unterbrochen.

4. Code anzeigen

Hast du eine Webseite oder einen Blog auf dem du auch Code-Beispiele zeigen möchtest, solltest du diesen ebenfalls besonders gestalten.

Ein sehr schönes Beispiel für die Gestaltung von Code kannst du dir auf der Webseite Perishable Press anschauen.

Typografie Tipps fuer Webdesigner Teil 3

Die HTML-tags um Code in Text zu kennzeichnen sind pre und code.

Da sich der Code vom übrigen Text abheben soll ist es hilfreich, wenn du einen Rahmen oder eine Hintergrundfarbe verwendest. Eine geläufige Methode ist auch, eine farbige Border an der linken Seite zu setzen. Für die Darstellung von Code solltest du eine eigene Schriftart verwenden. Meist werden für Code Monospaced Fonts (nichtproportionale Schriftart) verwendet.

Hast du eine WordPress-Webseite kannst du natürlich auch ein Plugin installieren, um Codeschnipsel auf deiner Seite anzuzeigen. Beim Plugin »Syntax Highlighter Evolved« hast du z.B. die Möglichkeit die Codezeilen zu nummerieren und den Code farblich zu unterscheiden. Außerdem können deine Leser den Code ausdrucken, kopieren oder sich in einem extra Fenster anzeigen lassen.

Typografie Tipps fuer Webdesigner Teil 3
So sieht Code mit Hilfe des WordPress-Plugin aus.

Wie du siehst gibt es jede Menge Möglichkeiten deine Webtexte ansprechend und übersichlich zu gestalten. Kennst du weitere Techniken, um Texte attraktiv darzustellen? Über dein Feedback und deine Tipps freue ich mich sehr!

4 Kommentare

  1. Super, vielen Dank für den Artikel.

    Habt Ihr für den Abstand von Bild zu Text (CSS margin) eine Faustformel? Ich habe mal gelesen, 10 – 20 % der Bildbreite.
    Dann würden unterschiedlich große Bilder im gleichen Text aber auch jedesmal einen anderen Abstand haben.

    Danke
    Oliver

      • @Oliver, @René: Vielen herzlichen Dank für eure Kommentare :-)

        Eine richtige Faustregel keine ich selbst nicht. Aber wie René auch schon gesagt hat, sind 20-30 Pixel für die meisten Layouts sicher eine sehr gute Richtlinie.

        Ich handele immer ein bisschen nach dem Gefühl, und achte auch auf die Schriftgröße, Text- und Bildbreite etc. Um das Design genau umsetzten zu können, würde ich auf jeden Fall für schmale Bilder, die der Text umfließt einen eigenen CSS-Style (mit etwas geringerem Wert) anlegen.

        Viele Grüße
        Ellen

Hinterlasse eine Antwort

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