Im dritten Teil der Serie »Typo-Tipps für Webdesigner« geht es um alle Elemente die helfen, deine Texte span­nender zu gestalten. Gerade bei län­geren Texten oder Artikeln im Web ist es sinn­voll, den Text durch Bilder, Listen, her­vor­ge­ho­bene Textstellen oder Zitate auf­zu­lo­ckern und so ange­nehm lesbar zu machen. Hier ein paar der hilf­reichsten Stilmittel, mit denen du deine Webtexte auf­peppen kannst.

1. Text und Bilder

Bilder sind eines der wich­tigsten Elemente, um einen län­geren Text oder Artikel auf­zu­lo­ckern. Dabei soll­test du darauf achten, dass der Abstand zwi­schen Bild und Text immer gleich­mäßig und in einem ange­nehmen Abstand gesetzt ist (CSS margin).

Außerdem kannst du Bilder rechts oder links­bündig setzen und den Text (mit floa­ting) darum fliessen lassen.

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 ein­fach ein­fü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 ein­fügen. Die Entscheidung, ob du einen Rahmen ver­wenden möch­test, 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 deut­lich zu erkennen. Wenn du möch­test, kannst du aber auch gerade diesen Effekt als Stilmittel einsetzen.

Ein Beispiel für Bilder auf dunklem Hintergrund. Hier wäre ein Rahmen überflüssig.

Ein Bild auf hellem Hintergrund, dass eben­falls ohne Rahmen auskommt.

1.3. Bildunterschriften (Captions)

Ein wei­teres, hilf­rei­ches Stilmittel beim Arbeiten mit Text und Bild sind die Bildunterschriften (Captions). Diese sind oft kleiner als die eigent­liche Textgröße und even­tuell in einer leicht hel­leren Farbe gesetzt. Du kannst auch kur­siven Text für deine Captions verwenden.

Beispiel einer Bildunterschrift inner­halb des Rahmens.

Hier kommt eine kur­sive Schrift zum Einsatz.

2. Listen

Inhalte in Listen zu unter­teilen ist eben­falls sehr hilf­reich, um Texte zu ordnen. Listen ver­deut­li­chen die Struktur eines Textes. Der Leser kann leichter über­schauen, was ihn im Text erwartet.

Du kannst deine Listenelemente ent­weder in einer »Unordered List« (HTML-tag ul) sor­tieren, oder in einer »Ordered List« (ol).

2.1. Unordered List

Eine »Unordered List« ist nicht num­me­riert, son­dern wird durch ver­schie­dene Listenzeichen (Bullets) mar­kiert. Es gibt unter­schied­liche CSS-Elemente, die du den Listenelementen (HTML-tag li) deiner Unorderd List mit dem CSS-Style »list-type« zuweisen kannst.

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

Eine Liste mit krea­tiven Sternchen.

Hast du einen relativ breiten Text, kannst du das Listenelement auch noch ein wenig nach rechts ein­zu­rü­cken. So hebt sich die Liste deut­li­cher vom übrigen Text ab. Außerdem ist es sinn­voll zwi­schen Fließtext und Listenelement, sowie zwi­schen den ein­zelnen Elementen inner­halb der Liste, einen gwissen Abstand zu halten. So wirkt die Liste nicht gequetscht und die ein­zelen Listenelemente sind optisch ange­nehm von­ein­ander getrennt.

2.2. Ordered List

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

Hier fin­dest du eine Zusammenstellung aller CSS-Styles für Listenelemente.

3. Initiale (große Anfangsbuchstaben) setzen

Den ersten Buchstaben deines Artikels kannst du als ein­lei­tendes Element in Großbuchstaben setzen. Entweder ver­wen­dest du dafür ein Image, oder du stylst den ersten Buchstaben im Text mit in einer grö­ßeren Schrift. Du soll­test aller­dings darauf achten, das der Abstand ziw­schen Initiale und Fließtext ange­nehm gestaltet ist.

4. Zitate und Textpassagen hervorheben

Ein sehr schönes Stilmittel ist es auch, beson­dere Textpassagen (z.B. Zitate, die wich­tigste Ausage eines Textes etc.) durch Schriftgröße, Hintergrund oder kur­siven Text hervorzuheben.

4.1. Zitate

Zitate mar­kierst du in deinem Code durch »blo­ck­quotes«. Um Zitate her­vor­zu­heben, kannst du ihnen eine beson­dere Schrift- oder Hintergrundfarbe geben, sie in kursiv setzen und eine grö­ßere Schrift ver­wenden. Wenn du möch­test, kannst du auch eine andere Schriftart ein­setzen (z.B. eine Serifenschrift).

Ein Trend im Webdesign ist es auch, Zitate mit einem Balken links vom Text zu mar­kieren oder beson­ders große Anführungszeichen zu ver­wenden. Allgemein ist es sinn­voll Zitate ein wenig rechts und links einzurücken.

4.2. Mit Pullquotes Inhalte hervorheben

»Pullquotes« sind her­vor­ge­ho­bene Textpassagen oder Säzte, die du aus deinem Text her­aus­ziehst, um so die Aussage des gesamten Textes beson­ders zu unter­strei­chen. Der Unterschied zu »blo­ck­quotes« ist, dass der Text wie­der­holt wird (also im Fießtext noch einmal vorkommt).

Oft sind »pull­quotes« rechts oder links­bündig vom Textblock plat­ziert, und in einer grö­ßeren oft fetten Schrift gesetzt.

Du soll­test Zitate und her­vor­ge­ho­benen Text nur dezent ein­setzen. Hast du zu viele Zitate in einem Text, geht der Effekt ver­loren 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öch­test, soll­test du diesen eben­falls beson­ders gestalten.

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

Die HTML-tags um Code in Text zu kenn­zeichnen sind pre und code.

Da sich der Code vom übrigen Text abheben soll ist es hilf­reich, wenn du einen Rahmen oder eine Hintergrundfarbe ver­wen­dest. Eine geläu­fige Methode ist auch, eine far­bige Border an der linken Seite zu setzen. Für die Darstellung von Code soll­test du eine eigene Schriftart ver­wenden. Meist werden für Code Monospaced Fonts (nicht­pro­por­tio­nale Schriftart) verwendet.

Hast du eine WordPress-Webseite kannst du natür­lich auch ein Plugin instal­lieren, um Codeschnipsel auf deiner Seite anzu­zeigen. Beim Plugin »Syntax Highlighter Evolved« hast du z.B. die Möglichkeit die Codezeilen zu num­me­rieren und den Code farb­lich zu unter­scheiden. Außerdem können deine Leser den Code aus­dru­cken, kopieren oder sich in einem extra Fenster anzeigen lassen.

So sieht Code mit Hilfe des WordPress-Plugin aus.

Wie du siehst gibt es jede Menge Möglichkeiten deine Webtexte anspre­chend und über­sich­lich zu gestalten. Kennst du wei­tere Techniken, um Texte attraktiv dar­zu­stellen? Über dein Feedback und deine Tipps freue ich mich sehr!