Im Printbereich werden Pull Quotes häufiger verwendet. Doch auch im Web können Pull Quotes genutzt werden, um lange Texte spannender zu gestalten und die Botschaft eines Textes noch besser zu vermitteln. Für die Umsetzung von Pull Quotes kannst du ein individuelles CSS Styling anlegen. Falls du mit WordPress arbeitest, gibt es sogar praktische Plugins, mit denen sich Plull Quotes leicht umsetzen lassen.

Eigene Plull Quotes erstellen

Indem du eine eigene CSS-Klasse für Pull Quotes verwendest (z.B. pull), kannst du standardmäßige Block Quotes <blockquote> ganz leicht zu Pull Quotes umfunktionieren.

<blockquote class="pull">Das ist ein Plull Quote.</blockquote>

Um die Position des Pull Quotes zu bestimmen, kannst du zusätzlich CSS-Klassen für Rechts- oder Linksbündigkeit nutzen (alignright und alignleft).

<blockquote class="pull alignright">Plull Quote rechts.</blockquote>
<blockquote class="pull alignleft">Plull Quote links.</blockquote>

Die benötigten CSS-Styles kannst du dann in deinem Stylesheet ungefähr so aussehen (du kannst das Styling deiner Pull Quotes natürlich mit Rändern, Schriftarten oder anderen Styles noch individualisieren):

blockquote.pull {
	margin: 0 0 1.4em;
	text-align: center;
}
blockquote.pull.alignleft {
	width: 33%;
	margin: 0 1.4em 0.5em 0;
	padding:0;
	float:left;
	display:inline;
	font-size:1.1em;
	text-align: right;
	border:none;
}
blockquote.pull.alignright {
	width: 33%;
	margin: 0 0 0.5em 1.4em;
	padding:0;
	float:right;
	display:inline;
	font-size:1.1em;
	text-align: left;
	border:none;
}

WordPress-Plugins für Pull Quotes

Wenn du WordPress nutzt, kannst du alternativ zu einer individuellen Umsetzung auch eines der vorbereiteten Pull Quote-WordPress Plugins nutzen. Ich habe folgende Plugins getestet:

Simple Pull Quote Plugin

Simple Pull Quote nutzt den Shortcode [pullquote], um Pull Quotes umzusetzen. Im visuellen Editor steht ein Icon zur Verfügung, um die Pull Quotes zu markieren. Es ist ein Style vorbereitet. Um diesen individuell anzupassen, müsstest du das Stylsheet aus dem Plugin-Ordner kopieren und in dein eigenes HauptStylesheet einfügen. Anpassungsoptionen gibt es beim Plugin ansonsten keine. Der Nachteil des Plugins ist, dass nach der Deaktivierung die Shortcodes im Artikel stehen bleiben.

Graceful Pull-Quotes Plugin

Etwas praktischer finde ich daher das Gracefull Pull-Quote Plugin. Hier gibt es eine Settings-Seite (unter Design / Pull Quotes), auf der du einige Einstellungs-Optionen für die Darstellung der Pull Quotes hast. Es gibt beispielsweise mehrere Pull Quote-Styles zur Auswahl, die man sich sogar in einer kleinen Vorschau anschauen kann. Außerdem kannst du bestimmen, ob du den HTML-tag <blockquote> + eine CSS-Klasse oder einen div-tag + CSS-Klasse für die Umsetzung der Pull Quotes nutzen möchtest. Auch die Bezeichnung der CSS-Klasse ist frei wählbar.

Einstellungs-Optionen des Gracefull Pull Quote WordPress-Plugins

Auf diese Weise hast du etwas mehr Kontrolle über die Integration deiner Pull Quotes. Und wenn du das Plugin später deaktivueren möchtest, werden deine Quotes entweder zu Zitaten (blockquotes) umgestylt oder bei der Nutzung eines Div’s nicht mehr für den Leser sichtbar angezeigt.

Tipps zum Weiterlesen

• Einen interessanten und umfangreichen Artikel zum Thema Block- und Pull Quotes kannst du dir bei Smashing Magazine anschauen: »Block Quotes and Pull Quotes: Examples and Best Practices«.
• Ein tolles kleines Einsteigerbuch zum Thema Typografie allgemein ist außerdem »Buchstaben kommen selten allein: Ein typografisches Handbuch« von Indra Kupferschmid.

Kennst du weitere Ergänzungen zum Thema Pull Quotes beitragen oder kennst du besonders schöne Umsetzungen von Pull Quotes im Web? Über dein Feedback freue ich mich sehr!

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.

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

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

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.

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.

1. Anmeldung und Auswahl eines Pakets

Im Profi-Einsatz ist Typekit nicht ganz kostenlos und daher wohl ganz besonders eine Option für Typo-Fans. Auch für deine Kundenprojekte kannst du Typekit als Option vorschlagen. Allerdings gibt es dennoch auch eine kostenloses Typekit-Paket. Dieses eignet sich für das Testen des Dienstes oder für eine kleinere persönliche Webseite mit relativ wenigen Seitenaufrufen im Monat.

Die Preise werden bei Typekit nach Anzahl der Webseiten und der verwendeten Schriftarten, sowie den monatlichen Seitenaufrufen der Webseiten berechnet. Das Personal- oder Portfolio-Paket für 25 bzw. 50 US-Dollar im Jahr reicht wohl in den meisten Fällen aus. Ab dem Portfolio-Paket sind dann auch alle Schriften freigeschaltet und die Anzahl der Schriftarten und Webseiten ist unbegrenzt. Eine komplette Übersicht der unterschiedlichen Preise für die Nutzung von Typekit findest du auf der Pricing-Übersichtsseite.

Praktisch ist es, sich erst einmal für die kostenlose Version anzumelden. So kannst du Typekit z.B. zuerst auf deinem lokalen Server ausprobieren. (Hast du noch keinen lokalen Server auf deinem Computer eingerichtet, schaue dir doch einmal das folgende Video-Tutorial an: WordPress lokal installieren.)

2. Die Auswahl von Schriften

Über Typekit hast du wirklich eine riesige Auswahl von Schriften für deine Webdesigns zur Verfügung. Über die Option »Browse Fonts« kannst du dir alle Schriften übersichtlich anschauen und eine passende Schrift für dein Design finden.

Alle Schriften von Typekit in der Übersicht.

Du kannst eine Schrift auch in der Einzelansicht testen.

Über einen »Add to Kit«-Button kannst du dir eine Schrift zu deinem persönlichen Schriften-Kit hinzufügen.

3. Die Einbindung der Schriften auf einer Webseite

Hast du dir eine Schrift ausgesucht, kannst du deine Schriftauswahl über einen sogenannten Kit-Editor bearbeiten. Über den Punkt »Selector« kannst du zum Beispiel bereits angeben, wo die Typekit-Schrift zum Einsatz kommen soll.

Auf dieser Weise brauchst du später nicht mehr dein eigenes Stylesheet bearbeiten, um die Typekit-Schrift dort manuell anzugeben. Wenn du also h1 und h2 angibst, wird die ausgewählte Schrift dann später automatisch für alle h1 und h2 Überschriften deiner Webseite verwendet.

Natürlich kannst du zusätzlich auch noch Angaben direkt im Stylesheet machen. Die Infos zur Verwendung deiner Schriftart im CSS findest du unter »Using fonts in CSS«.

Nachdem du alle Einstellungen in deinem Kit vorgenommen hast, kannst du du deine Angaben über den Publish-Button speichern.

Damit die von dir gewählte Typekit-Schrift jetzt auch automatisch auf deiner Webseite genutzt wird, musst du nur noch zwei Zeilen JavaScript-Code innerhalb deines head-tags einfügen.

Den Code kannst du aufrufen und dann kopieren, indem du ganz oben links im Kit-Editor »Embed Code« anwählst.

Zum Testen von Typekit habe ich z.B. einmal die Schrift »Neue Bebas« auf meinem lokalen Server für die h1- und h2-Überschriften im Nilmini-Theme eingesetzt.

Typekit beim Nilmini-Theme im Einsatz.

4. Schrift-Inspirationen finden

Falls du dir anschauen möchtest, wie Typekit im Einsatz aussieht, kannst du dir zum Beispiel das neue Redesign des New Yorker Webdesigners Jason Santa Maria anschauen. Auch auf dem Typekit-Blog werden immer wieder schöne Webseiten mit Typekit im Einsatz vorgestellt.

Hast du bereits Erfahrungen mit der Verwendung von Typekit gemacht und welche Tipps und Tricks kannst du weitergeben? Über dein Feedback freue ich mich sehr!

Mit dem WhatFont-Tool kannst du mit Hilfe eines Bookmarklets oder der Google Chrome Erweiterung super schnell herausfinden, welche Schriften auf einer Webseite genutzt werden. Wenn dir eine Schrift auf einer Webseite gefällt, klickst du einfach die Browser-Erweiterung an. Dann bewegst du deinen Mauspfeil über den entsprechenden Text und schon wird dir der Name der Schrift in einem kleinen Feld angezeigt. Klickst du den Text noch einmal an, erscheinen weitere Infos zur Schrift wie font-weight, font-style, font-size und line-height. Das Tool ist ein praktischer, kleiner Helfer für alle Webdesigner und Typo-Fans und erspart einem die aufwendigere Recherche nach Schriftarten mit einem Webdeveloper-Tool.

Die chinesische Kunst- und Designszene stand längere Zeit im Schatten der sehr viel moderneren Designarbeiten aus Japan oder Korea. Doch in den letzten Jahren hat sich einiges getan und in den chinesischen Megacities gibt es heute eine lebendige Szene junger Künstler und Designer. Da es immer wieder spannend ist, sich von Design und Kunst aus anderen Kulturkreisen inspirieren zu lassen, habe ich hier einige typografische Arbeiten aus China zusammen gestellt.

Plakatkunst

(Künstler: Qian Qian, Bild-Quelle: Flickr-Foto von Alki1)

Dieses typografische Plakat hat der sehr erfolgreicher junger Grafikdesigner Qian Qian gestaltet. Mir gefällt besonders die Kombination aus modernem, minimalistischem Design und den traditionellen, wie ein Holzschnitt wirkenden Muster. Weitere Arbeiten des Künstlers kannst du dir auch auf seiner Webseite www.q2design.com anschauen.

Piktogramme

(Künstler unbekannt, Quelle: sinosplice.com)

Die Piktogramme wurden alle nach bekannten Schriftzeichen, Figuren aus bekannten chinesischen Sagen oder Sprichwörtern gestaltet. Die ursprüngliche Vorgehensweise, chinesische Schriftzeichen von Symbolen herzuleiten: 人 (Lautschrift: ren) ist z.B. das Zeichen für Mensch und sieht aus wie ein laufender Mensch, wurde bei den Piktogrammen also umgekehrt.

Buchstaben aus Holz

(Künstlerin: Moma, Quelle: Neocha Edge Blog)

Diese Holzbuchstaben für die Zeichen Frau und Mann sind frei interpretierte Eigenkreationen der Shanghaier Künstlerin Moma.

Chinesische Fonts

Die Schrift Yue Roud 悦圆 von REDESIGN.

Die Schrift Ding Ding 丁丁 von REDESIGN.

Die Designagentur REDESIGN hat bereits einige moderne sehr harmonische, chinesische Schriften herausgebracht. Die Schriften können für kommerzielle oder private Projekte auf der Webseite von REDESIGN erworben werden.

Moderne Kalligrafie

(Künstler: Qi Gong, Bild-Quelle: Flickr-Foto von Alki1)

(Künstler: Gu Gan, World of Supreme Bliss von 1991, Quelle: Flickr-Foto von Alki1)

Chinesische Kalligrafie hat eine lange Tradition und ist auch in modernen chinesischen Kunst- und Design-Arbeiten meist sehr präsent. Daher finde ich es sehr spannend, sich auch diese Kunstrichtung genauer anzuschauen.

Wie gefallen dir die Typografie-Inspirationen? Kennst du weitere spannende und inspirierende Arbeiten von chinesischen Künstlern, Designern oder Typografen? Über dein Feedback und weitere Tipps freue ich mich sehr!

1. Font-family

Die erste Entscheidung bei der Umsetzung von Überschriften ist die Wahl der Schriftart. Du solltest darauf achten, dass die Schrift auch in einer größeren Schriftgröße gut lesbar ist. Auch den Charakter der gewählten Schriftart solltest du beachten. Schließlich sind die Überschriften ein sehr dominanter Teil einer Webseite und du solltest dir genau überlegen, ob der Schriftcharakter eher klassisch, verspielt oder schlicht/modern sein soll.

Immer sehr interessant und auflockernd ist auch der Wechsel zwischen einer Serifenschrift in der Überschrift und einer serifenlosen Schriftart für dein Fließtext, oder umgekehrt.

Der Wechsel zwischen serifen und serifenlosen Schriften schafft interessante Kontraste.

2. Font-size

Bei der Schriftgröße ist es wichtig, sich für eine Größeneinheit em, Pixel oder Prozent zu entscheiden. Die beste Kontrolle über die tatsächlich angezeigte Schriftgröße hat man natürlich mit einer genauen Pixelangabe.

Wenn man das Webdesign etwas flexibler gestalten möchte und auf die Standard-Werte des jeweils genutzten Browsers eingehen will, kommt eher die Einheit em in Frage. 1em ist dabei immer die Standard-Schriftgröße des Browsers (in den meisten Fällen 16 oder 17 Pixel). 0.1em sind dann also 1,6 Pixel. Möchtest du deine Schriftgrößen feiner abstufen, kannst du auch Werte wie 0.75em in deinem Stylesheet angeben.

Flexible Einheiten wie em oder Prozent sind besonders gut geeignet, wenn du deine Webseite auch für unterschiedliche Browsergrößen oder mobile Geräte anpassen möchtest. So hast du zwar nicht die die Garantie, dass deine Schrift immer genau in der von dir gewünschten Pixelgröße angezeigt wird, dafür kannst du aber eher davon ausgehen, dass deine Webseiten-Texte auch in den unterschiedlichsten Geräten und Browsern eine gute Lesbarkeit hat. Indem du dein Webdesign auf möglichst vielen unterschiedlichen Geräten testest, kannst du ein gutes Gefühl für die optimalen font-size Werte im CSS bekommen.

3. Margin und padding

Auch die Abstände z.B. zwischen Fließtext und Überschrift oder zwischen der Überschrift und weiteren Informationen wie Datum und Autoren-Info muss mit Hilfe von margin und padding im Stylesheet definiert werden.

Der margin-Wert bestimmt dabei immer den äußeren Abstand von der Überschrift zum nächsten Element, der padding-Wert den Abstand innerhalb des Überschriften-Elements.

Margin und padding-Werte bestimmen.

Wichtig ist, dass die Zuordnung der Elemente für den Leser auf den ersten Blick ersichtlich ist. Eine Überschrift sollte also immer optisch dem darauf folgenden Text zugeordnet sein.

4. Color

Auch die Farbwahl kann dabei helfen, eine Überschrift deutlich als solche zu markieren. Wählst du z.B. einen dunklen Grauton für deinen Fließtext (100% Schwarz wirkt in den meisten Fällen sehr hart), kannst du für den color-Wert deiner Überschrift den nächst dunkleren Farbwert nutzen.

5. Font-weight

Je nach Schriftart kommt es eventuell auch in Frage, die Überschriften in fett zu setzen. Eine Überschrift mit dem font-weight: bold; kommt meiner Ansicht nach meist eher für eine serifenlose Schrift in Frage. Eine fette Überschrift kann aber auch oft dazu beitragen, dass sich die Überschrift fürs Auge deutlicher hervorhebt, was zur Struktur des Textes beiträgt. Ich mache dabei gerne den »Augen-Zukneif«-Test: Dabei zoome ich den Text am Bildschirm kleiner und kneife meine Augen leicht zusammen, so dass ich den Text nur noch leicht verschwommen sehe. Wenn die Überschriften und die Text-Hierarchie auch in diesem »verschwommenen« Zustand noch gut zu erkennen sind, liege ich meist richtig.

6. Line-height

Eine weitere wichtige CSS-Eigenschaft ist auch der line-height Wert. Dieser bestimmt den Zeilenabstand von einer Schriftgrundlinie zur nächsten. Line-height ist also besonders für längere Überschriften von zwei oder mehr Zeilen wichtig.

Der Line-height Wert bestimmt den Abstand von einer Grundlinie zur nächsten.

Du solltest darauf achten, dass der Zeilenabstand auch bei Buchstaben wie g oder ß noch groß genug gesetzt ist, damit sich auch diese überhängenden Buchstaben nicht berühren oder sogar überschneiden. Die line-height Eigenschaft in CSS benötigt keine Einheit (Vielen Dank für diesen Hinweis von Klaus in seinem Kommentar). Der Faktor 1.4 line-height bedeutet einfach, dass der Zeilenabstand 1,4 mal so groß ist, wie die Schriftgröße. Der gewählte Wert sollte also auf keinen Fall kleiner gewählt sein als die font-size selbst, da sich die Schriftzeilen sonst überlappen. Wichtig ist, dass ein angenehm lesbarer Textfluss entsteht, und die Überschrift weder gequetscht noch auseinandergezogen wirkt.

Tipp: Eine sehr detaillierte Slideshow zum Thema CSS line-height kannst du dir auf dem Maxdesign-Blog anschauen.

7. Text-transform

Bei der CSS-Eigenschaft text-transform kannst du zwischen lowercase (alles wird klein geschrieben), uppercase (Großschreibung), capitalize (der Wortanfang wird groß geschrieben) und inherit (der text-transform Wert des Eltern-Divs wird übernommen) auswählen. Uppercase kann, vor allem bei kurzen Überschriften in serifenloser Schrift, sehr schick aussehen. Bei längeren Überschriften können Großbuchstaben aber auch schnell schlecht lesbar werden.

8. Letter-spacing

Je nach Schriftart kann es sein, dass du den einzelnen Buchstaben noch etwas mehr Abstand zwischen einander geben musst. Dies erreichst du mit der CSS-Eigenschaft letter-spacing. Als Einheit kannst du Pixel oder em wählen, Prozentwerte sind nicht möglich.

9. Word-spacing

Manchmal kann es auch sein, dass es nötig ist, einen größeren oder kleineren Abstand zwischen den einzelnen Wörtern der Überschrift zu bestimmen. Auch hier kommt es wieder darauf an, welche Schriftart du wählst. Mit der CSS-Eigenschaft word-spacing in den Einheiten px oder em kannst du den Anstand bestimmen. Wie bei letter-spacing sind auch hier negative Werte erlaubt.

10. Text-shadow

Seit es mit der CSS3-Eigenschaft text-shadow ganz einfach geworden ist, einem Text einen leichten Schatten zu geben, ist dieser Stil immer beliebter geworden. Text-shadow hat 4 Werte, z.B. text-shadow: 0px 2px 3px #555; Der erste Wert bestimmt den Versatz des Schattens nach rechts, der zweite den Versatz des Schattens nach unten. Der dritte Wert steht für den Grad der Unschärfe (blur) und der letzte Wert ist der Farbwert des Schattens. Wichtig ist auch hier wieder auf eine gute Lesbarkeit der Schrift zu achten und es mit dem Schatteneffekt nicht zu übertreiben. Weitere Infos zur text-shadow Eigenschaft findest du auch noch im Artikel »Hilfreiche CSS-Tipps zur Gestaltung von Text (Teil 2)«.

11. Überschriften als Link

Auch bei der Umsetzung von Überschriften als Links (wie z.B. auf der Startseite eines Blogs üblich) gibt es jede Menge kreative Möglichkeiten. Du kannst den Link bei Hover mit text-decoration: underline; unterstreichen, eine eigene Link-Farbe wählen oder eine leichte Hintergrund-Farbe bei Hover wählen.

Gestaltest du deine Webseite auch fürs iPad oder andere Geräte mit Touchscreens solltest du darauf achten, dass dort kein Hover unterstützt wird. Bei Apple-Produkten wird standardmäßig eine leicht graue Hintergrund-Fläche mit abgerundeten Ecken angezeigt, sobald du auf einen Link klickst. Möchtest du diesen Wert individuell anpassen, kannst du über die CSS-Eigenschaft -webkit-tap-highlight-color deine eigene Farbe bestimmen.
(weitere Infos unter Safari Developer Library: Highlighting Elements).

Welche weiteren Tipps zum Thema Überschriften-Gestaltung fallen dir noch ein? Welche CSS-Eigenschaft fehlen deiner Meinung nach in der Auflistung noch? Über dein Feedback und weitere Tipps freue ich mich sehr!

1. CSS3 text-shadow

Die CSS3-Eigenschaften text-shadow ist im Webdesign bereits sehr verbreitet, und neben dem beliebten Effekt, die Schrift leicht in den Hintergrund eingestanzt erscheinen zu lassen (Letterpress-Effekt), lässt sich die Funktion auf für jede Menge kreative Effekte, wie einen Feuer- oder Leuchtschrift-Effekt verwenden.

Die Text-Schatten CSS-Eigenschaft hat 4 Werte. hier ein Beispiel:

text-shadow: 0px 2px 3px #555;

Der erste Wert bestimmt den Versatz des Schattens nach rechts (x-Versatz). Der zweite Wert definiert den Versatz des Schattens nach unten (y-Versatz).

Der dritte Wert ist der Grad der Unschärfe (blur), und der vierte und letzte Wert bestimmt die Farbe des Text-Schattens (Hex-Wert #).

Für den Farbwert (4. Wert) kannst du, neben der Farbangabe als Hex-Wert, auch den RGBA-Farbwert angeben, um den Schatten mit Hilfe des Alpha-Wertes (letzter Wert) in RGBA transparent zu machen. Hier ein Beispiel:

text-shadow:0px 1px 0px rgba(255,255,255,0.75);

Ein sehr hilfreicher Artikel zur Verwendung von RGBA-Farbwerten ist auch Working With RGBA Colour bei 24ways.

Browser-Unterstützung für text-shadow:

- Firefox
- Chrome
- Safari

Die CSS3-Eigenschaft text-shadow wird derzeit leider noch nicht im Internet Explorer unterstützt. Da die CSS-Eigenschaft im IE aber lediglich ignoriert wird, kannst du Text-Schatten durchaus zur grafischen Optimierung deiner Webseite verwenden.

1.1. Eingestanzter Text (der Letterpress-Effekt)

Mit text-shadow lässt sich ganz leicht der Effekt erzeugen, ein Schriftzug sei leicht in den Hintergrund eingestanzt. Hier ein Beispiel:

Der benötigte CSS-Code für dieses Beispiel ist:

.letterpress h2 {
color: #222;
text-shadow: 0px 2px 3px #555;
font: 65px Arial, sans-serif;
text-align: center;
}

Der Letterpress-Effekt ist z.B. bei Logos sehr beliebt (besonders bei App-Webseiten), aber auch bei Webseiten-Slogans oder Fließtext kann er verwendet werden. Jede Menge Beispiele für die Verwendung des Effekts kannst du dir im Artikel Webdesign Trend Showcase: Letterpress Text Effect bei Line25 anschauen.

1.2. Kreative Möglichkeiten mit text-shadow

Neben Letterpress-Text kannst du mit text-shadow aber noch etliche weitere, spannende Text-Effkte erzeugen. Kreative Beispiele sind z.B. Text mit Feuereffekt oder Leuchtschrift-Glow.

Im Artikel Using text-shadow to Create Cool Text Effects bei Line25 findest du jede Menge Beispiele mit Code-Schnipseln.

2. Vertikaler Text mit Text-Rotation

Die Darstellung von vertikalen Texten ist nicht nur mit Hintergrund-Bildern, sondern auch mit einer reinen CSS-Lösung möglich. Der Web-Entwickler Jonathan Snook hat diese Möglichkeit in seinem Artikel Text Rotations with CSS beschrieben.

Angewendet werden kann der Effekt z.B. bei der Darstellung eines Artikel-Datums. Hier ein Beispiel:

Der benötigte HTML-Code:

<div class="example-date">
  <span class="example-day">31</span>
  <span class="example-month">Jan</span>
  <span class="example-year">2010</span>
</div>

Und der dazugehörige CSS-Code lautet:

.example-date {
font-family: Arial, Helvetica, sans-serif;
background-color:#50A72A;
color: #fff;
float:left;
position:relative;
padding:45px 5px 0px;
margin:20px 20px 20px 0;
}
.example-date .example-month {
text-transform: uppercase;
font-size:33px;
}
.example-date .example-day {
font-size:43px;
line-height:45px;
position:absolute; left:5px; top:3px;
}
.example-date .example-year {
display:block;
font-weight: bold;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}

Und selbst im Internet Explorer kannst du Text-Rotation anzeigen, indem du folgende, zusätzliche Bedingung festlegst:

<!--[if IE]>
<style>
.example-date .example-year {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
right:-15px; top:5px;
}
</style>
<![endif]-->

(Code-Quelle: CSS Text-Rotation von Jonathan Snook)

3. CSS-Styles für Zitate (blockquotes)

Zitate kannst du sehr schön mit einer leichten Hintergrund-Farbe und einem linken Rand (border-left) darstellen.

Blockquote mit nur einem Paragraphen (p-tag).

Problematisch wird es, wenn du längere Zitate mit mehreren Paragraphen (p-tags) anzeigen möchtest. Auf Grund des padding-Wertes des untersten p-tags wird der untere Rand des Zitats länger angezeigt.

Bei mehreren Paragraphen ist der untere Rand des Hintergrundes zu lang.

Um dies zu vermeiden, kannst du bei p-tags innerhalb von blockquote den margin-bottom Wert auf 0px und den margin-top Wert auf ca. 15px setzen. Dann nutzt du den CSS Pseudoklassen-Selektor :first-child (dieser wird im Gegensatz zu :last-child auch im Internet Explorer 7 und 8 unterstützt), um den martin-top Wert des obersten Paragraphs auf null Pixel zu setzen. Mit diesem Trick schaffst du es, dass der Abstand zwischen Text und Hintergrund auf allen vier Seiten gleich angezeigt wird.

Der dazugehörige CSS-Code für die Blockquotes lautet dann:

blockquote {
padding: 20px;
background: #eee;
border-left: 7px solid #ccc;
}
blockquote, p {
margin-top: 15px;
}
blockquote p:first-child {
margin-top: 0px;
}

(Code-Quelle: Simple and Nice Blockquote Styling von CSS-Tricks)

4. Text-Animation mit CSS3 transitions

Eine spannender CSS3-Effekt ist die Animation von Texten. Auf der CSS-Playground Webseite von Benjamin De Cock habe ich mir diese zwei animierten CSS-Buttons entdeckt. Der Effekt funktioniert wirklich klasse!

Am besten du schaust dir die Button-Beispiele in verschiedenen Browsern einmal selbst an. Der rechte Button funktioniert sogar im Internet Explorer (meines Wissens in Version 7 und 8).

Wie du sieht, lassen sich mit einigen CSS-Tipps und Tricks jede Menge jede Menge Lösungen für die Darstellung von Typografie im Web finden.

Hilfreiche Tipps zum Weiterlesen sind auch noch die praktischen Code-Snippets auf der Webseite CSS-Tricks. Wenn du einen umfangreichen Überblick über Web-Typografie und Möglichkeiten der Darstellung in CSS suchst, kannst du auch die Artikel auf der Webseite webtypography.net durchlesen.

Wie gefallen dir die vorgestellten CSS-Tipps? Kennst du noch weitere praktische CSS-Funktionen für die Darstellung von Schrift im Web, oder kennst du weitere hilfreiche Webseiten, Blog-Artikel oder auch Bücher zum Thema CSS?

Über dein Feedback und deine Tipps freue ich mich sehr!

1. So funktioniert Lettering.js

Das jQuery-Plugin fügt automatisch span-Tags mit unterschiedlichen CSS-Klassen für einzelne Buchstaben (.char1, .char2, .char3), Wörter (.word1, .word2, .word3) und Absätze (.line1, .line2, .line3) ein. So kannst du den einzelnen Elemente dann im Stylesheet unterschiedliche CSS-Eigenschaften (z.B. color, font-family, font-size) geben.

Um Lettering.js zu nutzen, musst du als erstes die jQuery-Library im head-Tags deines Codes aufrufen. Dies kannst du z.B. über die Google Libraries API tun (so musst du jQuery nicht auf deinen eigenen Server hochladen).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Wenn du eine WordPress-Seite hast, kannst du die hilfreiche Beschreibung von Frank Bültge nutzen, um jQuery über die functions.php Datei deines Themes aufzurufen.

Dann fügst du, am besten direkt darunter aber auf alle Fälle ebenfalls innerhalb des head-Tags den Code für das Lettering jQuery-Plugin ein.

<script type="text/javascript" src="deinpfad/jquery.lettering.min.js"></script>

Die Datei jquery.lettering.js findest du im Download-Ordner des Plugins. Den Link zum Download bei Github findest du ganz oben auf der Lettering.js-Webseite.

Es gibt drei verschiedene Möglichkeiten, das Lettering-Plugin einzusetzen.

1.1. Einzelne Buchstaben stylen

Zum einen kannst du span-Tags mit den durch nummerierten CSS-Klassen .char1, .char2, .char3 usw. einfügen. Dieser Stil eignet sich z.B. für ein speziell gestyltes Webseiten-Logo.

Ist der HTML-Code für dein Webseiten-Logo:

<h1 class="logo">Rainbow</h1>

Fügst du folgenden JavaSript-Code unterhalb des jQuery und lettering.js Scripts innerhalb des head-Tags:

<script>
$(document).ready(function() {
$(".logo").lettering();
});
</script>

Alle Buchstaben werden so automatisch mit einem span-Tag und einer Klasse belegt:

<h1 class="logo">
	<span class="char1">R</span>
	<span class="char2">a</span>
	<span class="char3">i</span>
	<span class="char4">n</span>
	<span class="char5">b</span>
	<span class="char6">o</span>
	<span class="char7">w</span>
</h1>

Jetzt kannst du die CSS-Klassen mit eigenen Styles belegen:

.char1 {
	color: red;
}
.char 2 {
	color: orange;
}
usw.

1.2. Einzelne Wörter mit Lettering.js beeinflussen

Die zweite Option ist es, Lettering anzuwenden, um einzelne Wörter mit speziellen CSS-Styles anzusprechen zu können.

Das Prinzip ist das gleiche, allerdings musst du jetzt im JavaScript-Code noch das Wort word in die Klammer hinter lettering einfügen:

<script>
$(document).ready(function() {
$(".logo").lettering(word);
});
</script>

Einsatzmöglichkeiten für diese Option könnte ebenfalls ein Logo, aber auch ein Webseiten-Slogan sein.

1.3. Einzelne Absätze unterschiedlich gestalten

Die dritte Möglichkeit kannst du das Lettering jQuery-Plugin auch das individuelle Styling einzelner Text-Absätze verwenden. So kannst du spezielle Absätze (markiert mit br-Tags) eines Textes hervorheben.

Aus dem HTML-Code:

<p class="slogan">This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>

wird mit Hilfe folgender JavaScript-Angabe im head-Tag:

<script>
$(document).ready(function() {
$("p.slogan").lettering(lines);
});
</script>

dieser HTML-Code:

<p class="slogan">
<span class="line1">This is an amazing</span>
<span class="line2">Revolution in Typography.</span>
<span class="line3">The possibilities are endless:</span>
<span class="line4">Coloring, Vertical spacing, and Kerning.</span>
</p>

Die einzelnen Absätze im Text kannst du jetzt also über die CSS-Klassen .line1, .line2, .line3 und .line4 individuell stylen.

Die drei Beispiele sind nur die einfachsten Möglichkeiten lettering.js zu nutzen. In der Beispiel-Datei des Download-ZIP Ordners (examples / index.html) findest du noch weitere, fortgeschrittene Optionen, wie du beispielsweise zwei Wörter und die einzelnen Buchstaben der Wörter stylen kannst. Eine ausführliche Erklärung zu lettering.js kannst du außerdem auf der Webseite des Lettering.js-Entwicklers Dave Rupert nachlesen.

2. Einsatzmöglichkeiten und Inspirationen

Seit der Veröffentlichung des Plugins im Herbst 2010 haben etliche Webdesigner das Plugin für ihre kreative und innovative Webseiten-Projekte verwendet. Um die Möglichkeiten des Plugins noch besser kennenzulernen, und Inspirationen für die Verwendung in deinen eigenen Projekten zu bekommen, habe ich einige sehr schöne Beispiele zusammen gestellt.

Atlantis World’s Fair, gestaltet von Frank Chimero

Eldorado World’s Fair, gestaltet von Naz Hamid

Sex Lettering, Typografie-Experiment mit Lettering.js von Andreas Hommel

Moon World’s Fair Webseite, gestaltet von Jason Santa Maria

Typografie auf der Webseite von Designing Monsters

Weitere schöne Inspirationen zum Umgang mit dem Plugin findest du auch in der Showcase-Galerie von Lettering.js.

3. Gibt es eine alternative Lösung zur Verwendung von JavaScript?

Das Lettering.js Plugin ist meiner Meinung nach als eine Art experimentelle Lösung zu sehen, um die Gestaltungs-Möglichkeiten von Typografie im Webdesigns voranzubringen, und so eventuell auch die Entwicklung von reinen CSS-Alternativen voran zu treiben.

Can we replace Lettering.js with CSS? I hope so. Lettering.js is a solution, but perhaps it’s not the ultimate solution.
Trent Walton, in Controlling the Web

In der Zukunft wäre sicher eine Browser-kompatible, reine CSS-Lösung optimal. Trent Walton spricht in seinem Artikel Controlling Web Typography über den Umgang mit Typografie im Web, aktuelle Entwicklungen und seine Einstellung zum Lettering.js Plugin.

Wie gefallen dir diese experimentellen Ansätze mit Typografie im Web umzugehen? Wie findest du die Lettering-Plugin Lösung, und hast du selbst schon Erfahrungen mit dem Plugin gemacht? Über dein Feedback, sowie weitere Tipps und Einsatzmöglichkeiten zum Plugin freue ich mich sehr!

1. Was sind Google Web Fonts?

Mit den Google Web Fonts hast du die Möglichkeit eine ganze Reihe von Schriften auf deiner Webseite zu nutzen, ohne dass du diese auf deinen eigenen Server hochladen oder über ein @font-face Kit (z.B. von Fontsquirrel) selbst aufwendig einbinden musst.

Du musst lediglich, die für dein Design benötigten Schriften und Schriftstile über einen Code-Schnipsel einbinden (hier die Erklärung zur Verwendung der Google Fonts). Sobald deine Webseite aufgerufen wird, werden die Schriften dann über den Google-Server geladen. Mit Hilfe des von Google und Typekit (dem derzeit größten Anbieter einer kostenpflichtigen Web Font Library) entwickelten Web Font Loader (einer JavaScript-Bibliothek) kannst das Ladeverhalten deiner Schriften sogar noch gezielter beeinflussen.

Ein großer Vorteil von Web Fonts, besonders im Vergleich zur Verwendung von Images, ist die so verbesserte Ladezeit. Außerdem können mit den Web Fonts eine viel breitere Vielzahl von Schriften unkompliziert genutzt werden, und auch moderne CSS3-Eigenschaften (wie text-shadow oder gradients) können verwendet werden.

2. Neue Features im Google Font Directory

Um die Schriften im Google Font Directory zu sortieren, gibt es inzwischen die neuen, praktischen Filter-Optionen.

Du kannst die Schriften zum einen nach den Schriftklassen Serif, Sans-serif, Display (dekorative Fonts, besonders für Logos oder Überschriften geeignet) und Handwriting filtern.

Daneben gibt es noch die Möglichkeiten die Web Fonts alphabetisch, nach Einstellungsdatum, Trend, Beliebtheit und Anzahl von Schrift-Varianten zu sortieren.

Eine zusätzliche Option ist das Filtern nach kyrillischen, griechischen, Khmer und lateinischen Schriften. Mit einem kleinen, blauen Symbol in der Schriften-Liste sind die zur Verfügung stehenden Schriften auch noch einmal markiert.

Unter Download the Font in der Einzelansicht der Schriften findest du jetzt neben dem Download-Button auch noch einen Spenden-Button. Wenn du möchtest, kannst du den jeweiligen Font-Designer hier mit einer Spende unterstützen. Da alle Schriften im Google Fonts Directory kostenlose Schriften sind, ist dies für die Verwendung der Schrift aber nicht notwendig. Weiter Infos zur Spenden-Option findest du in den Google Fonts FAQs.

3. Die beliebtesten Google Web Fonts vorgestellt

Inzwischen sind schon eine ganze Reihe Web Fonts im Google Font Directory eingestellt. Daher möchte ich die beliebtesten Font hier etwas genauer vorstellen.

Ubuntu

- Die kostenlose Font-Familie des Open Source Betrieb-Systems Ubuntu.

Auch auf der Ubuntu-Webseite gibt es die Ubuntu-Schrift im Einsatz zu sehen.

The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens.

Seit Dezember 2010 kannst du auch die Ubuntu Schrift-Familie über die Google Font API nutzen. Ubuntu ist in den vier Varianten normal, italic, bold und bold italic verfügbar.

Droid Sans

- Eine beliebte serifenlose, fürs Web optimierte Schrift von Steve Matteson.

Droid Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance.

Droid Sans ist die derzeit beliebteste Schrift der Google Web Fonts. Du kannst die Schrift in den Varianten normal und bold nutzen. Droid Sans ist extra für die Verwendung im Web entwickelt worden, und eignet sich besonders gut für Fließtexte.

Droid Serif

- Eine fürs Web optimierte, angenehm lesbare Serifen-Schrift designt von Steve Matterson.

The Droid Serif font family features a contemporary appearance and was designed for comfortable reading on screen.

Die Droid Serif gibt es in den Varianten normal, italic, bold und bold italic. Die angenehm lesbare Serifen-Schrift eignet sich besonders gut für Überschriften und Fließtexte von Webseiten.

Yanone Kaffeesatz

- Eine von Jan Gerner gestaltete Free-Font.

Its Bold is reminiscent of 1920s coffee house typography, while the rather thin fonts bridge the gap to present times.

Yanone Kaffeesatz eignet sich meiner Ansicht nach besonders für Webseiten-Slogans oder größere Überschriften. Die Schrift gibt es in den font-weights 200, 300, 400 und 700.

Vollkorn

- eine 2005 entwickelte Schrift des Typografen und Designers Friedrich Althausen.

It intends to be a quiet, modest and well working text face for bread and butter use. Unlike its examples in the book faces from the renaissance until today, it has dark and meaty serifs and a bouncing and healthy look.

Vollkorn ist eine Serifenschrift, die sich sowohl für den Fließtext, als auch für Überschriften sehr gut eignet. Es gibt die vier Schrift-Varianten normal, italic, bold und bold italic zur Auswahl. Auf der Webseite von Friedrich Althausen kannst du dir Vollkorn im Einsatz anschauen.

Natürlich sind diese Schriften nur eine kleine Auswahl, und deiner Kreativität sind bei der Verwendung der Google Web Fonts keine Grenzen gesetzt. Viele der Schriften, die zwar nicht unbedingt für Fließtexte geeignet sind, könnten zum Beispiel im Webseiten-Logo zum Einsatz kommen.

4. Nützlich Infos zur Verwendung der Google Fonts

Unterstützung mobiler Geräte

Alle Google Web Fonts unterstützen inzwischen die mobilen Geräte mit den Plattformen Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Weitere Infos zum Support der mobilen Geräte kannst du im Artikel »Web fonts go Mobile« auf dem Google Web Fonts Blog nachlesen.

Browser-Support

Natürlich werden die Web Fonts auch von allen modernen Browsern unterstützt:

- Chrome: 4.249.4+
- Firefox: 3.5+
- Safari: 3.1+
- Opera: 10.5+
- Internet Explorer: 6+
(Quelle: Google Web Fonts FAQs)

Fallback-Schrift im CSS bestimmen

Auf alle Fälle solltest du immer eine Fallback-Schrift in deinem Stylesheet angeben. Dazu kannst du neben Web-safe Fonts, wie Arial für eine Sans-serif Schrift, auch die allgemeingültigen CSS-Werte serif für eine Standard-Serifenschrift (Times New Roman, Georgia), sans-serif für eine standardmäßige serifenlose Schrift (Arial, Verdana) oder monospace für eine Schriftart, in der alle Buchstaben eine einheitliche Breite haben (Courier) nutzen.
(Quelle: W3C Editors Draft Fonts)

Den Web Fonts Loader nutzen

Was in dem kurzen Moment des Ladens der Web Fonts in den Browsern angezeigt wird (nur bei einer sehr langsamen Internet-Verbindung sichtbar), ist nicht einheitlich geregelt. In Safari und Chrome werden leere Zeichen angezeigt, Firefox lädt dagegen erst die angegebene Fallback-Schrift hoch, und wechselt diese zur Google Web Fonts, sobald das Laden abgeschlossen ist.

Um diesen Vorgang besser beeinflussen zu können, kannst du die JavaScript-Bibliothek Web Font Loader nutzen. Eine ausführliche Anleitung zur Verwendung des Scripts mit Anwendungsbeispiel findest du in der Google Font API Dokumentation.

5. Weitere hilfreiche Ressourcen

• Auf der Google Font API FAQ-Seite kannst du alles über Browser und mobile Support, Open Source, Webseiten-Performance und vieles weitere nachlesen.
• Der Google Web Fonts Blog bietet die neusten Infos zu Updates und News der Google Fonts.
• Der Google Font API, Getting Started Guide bietet einen umfangreichen Einstieg in die Nutzung der Google Web Fonts.
• Eine hilfreiche Übersicht über die verschiedenen Anbieter von Webfonts (kostenlos und kostenpflichtig) im Artikel »Webfont Services: Eine Bestandsaufnahme« von Fontwerk.

Wie gefallen dir die bisher integrierten Schriften der Google Font API? Hast du weitere Tipps oder Fragen zur Verwendung der Web Fonts, und wie schätzt du das Angebot der Google Web Fonts im Vergleich zu kostenpflichtigen Anbietern wie z.B. Typekit ein? Über dein Feedback freue ich mich sehr!

1. Mehrspaltigen Text mit CSS3 Multi-Columns

Leider werden die CSS3-Eigenschaften column-count und column-gap für mehrspaltigen Text derzeit noch nicht von allen Browsern unterstützt. Der Internet Explorer macht mal wieder eine Ausnahme. Allerdings kannst du die praktische Eigenschaft zur Text-Formatierung dennoch nutzen, im IE wird der Text-Abschnitt dann einfach weiterhin einspaltig angezeigt.

Hier ein Beispiel für einen dreispaltigen Text mit Hilfe von CSS3:

Tortor placerat penatibus pid elementum sagittis magna ac porttitor porta parturient augue mus massa lorem. Odio duis ultrices tincidunt facilisis, parturient sociis cras penatibus ac aenean etiam dis! Tristique, dis tincidunt integer ac pid rhoncus lorem, nunc nec ridiculus porta, vel turpis platea nec sit, turpis. Porta pellentesque etiam? Urna, et duis, amet ultrices, elementum dapibus in mauris vut ridiculus, parturient turpis turpis pid porta. Mid diam platea sed mauris odio et. Tortor dapibus phasellus dolor parturient, natoque! A in ultrices nisi, ut parturient! Nascetur nec odio scelerisque augue et amet, vel amet montes porta eu? Et nunc porttitor sit montes natoque odio duis. Natoque. Ac ultrices ac tristique mauris integer platea. Platea cum non enim sagittis magna lundium velit. Velit platea duis! Rhoncus lorem dignissim enim elementum, sagittis, et facilisis eu urna lacus ultricies sit adipiscing augue auctor.

Der dazugehörige CSS-Code für mehrspaltigen Text lautet:

p.three-columns {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

Mit column-count gibst du dabei die Anzahl der Text-Spalten an. Mit der Pixelangabe bei column-gap die Pixel-Breite der Lücken zwischen den einzelnen Text-Spalten. Die Angaben für Mozilla Firefox werden mit moz angeben, und für Google Chrome und Safari mit webkit.

2. Initiale (engl. Drop Caps) mit dem CSS Pseudoklassen-Selektor :first-child umsetzen

Mit Hilfe von CSS Pseudoklassen-Selektoren kannst du Initialen (Drop Caps) zu Beginn deiner Texte einfügen. Der erste Buchstabe eines Artikels oder Absatzes wird so groß geschrieben, um den Text spannender und ansprechender zu gestalten. Umsetzen kannst du die Drop Caps, indem du die CSS-Pseudoklassen :first-child:first-letter nutzt.

Hier ein Beispieltext mit Initial-Buchstaben:

Dignissim mus pid enim tristique magnis habitasse dolor tincidunt sit montes enim, penatibus, nisi et lectus ac, augue porta pulvinar porttitor massa urna placerat, non, ultrices, in sociis. Non ac, lacus dolor. Sed turpis rhoncus lundium penatibus turpis et in! Porta nunc? Placerat adipiscing integer enim dis ac, urna placerat tincidunt turpis, enim rhoncus odio in in rhoncus est amet a aenean amet mid penatibus augue nec adipiscing amet penatibus, scelerisque.

Der CSS-Code für diesen Drop Caps lautet:

p:first-child:first-letter {
float: left;
color: #F47A2F;
font-size: 75px;
line-height: 50px;
padding: 10px 5px 0px 0px;
}

(Quelle: Code-Snippet von CSS-Tricks)

Leider unterstützt der Internet Explorer bis Version 8 keine CSS-Pseudoklassen. Wenn du die CSS Pseudoklassen-Selektoren auch noch für weitere Elemente nutzen möchtest, kannst du die JavaScript Fallback-Lösung Selectivizr für den IE einsetzen. Im Artikel »Hilfreiche CSS-Tipps: Die CSS Pseudoklassen-Selektoren :first-child, :last-child und :nth-child« wird diese Lösung noch etwas ausführlicher beschrieben.

Alternativ kannst du auch einen span-tag mit der CSS-Klasse .drop-caps nutzen:

<p><span class="drop-caps">N</span>on in facilisis, nascetur dignissim enim tempor risus turpis adipiscing nec magna, a ac vel quis!</p>

Der CSS-Klasse span.drop-caps gibt du dann wieder die bereits erwähnten CSS-Eigenschaften.

3. Eingerückte Absätze mit text-indent

Das leichte Einrücken zu Beginn eines neuen Text-Absatzes ist ein weiteres Stilmittel, um längere Texte übersichtlicher zu gestalten.

Hier ein Beispiel für einen solchen eingerückten Text-Absatz:

Augue sociis elementum turpis turpis. Pulvinar, ut enim turpis. Enim elementum. Turpis placerat ut, vut sed elementum! A cursus. Scelerisque ut sit ac, pulvinar tempor lorem, porta cum nec. Hac et tortor amet dignissim, sed eros penatibus odio porta dictumst tristique, porta. Nunc, proin! Ultrices porta porta? Urna cras, parturient tincidunt!

Mit der CSS-Eigenschaft text-indent kannst du das Einrücken von Texten umsetzen:

p {
text-indent: 25px;
}

Um zu vermeiden, dass bereits der erste Textabschnitt eines Artikels eingerückt wird, kannst du wieder den CSS Pseusoklassen-Selekor :first-child nutzen.

p:first-child {
text-indent: 0px;
}

Da der Internet Explorer diese Eigenschaft wieder nicht unterstützt, kannst du hier ebenfalls auf die Javscript Fallback-Lösung Selectivizr zurückgreifen.

4. Schönere &-Zeichen (Ampersands)

Es gibt jede Menge Fans von &-Zeichen (Ampersands). Um nicht einfach auf das Standard &-Zeichen für deine Texte zurück zu greifen, kannst du einen extra span-tag mit der CSS-Klasse .amp einfügen, und dieser Klasse im Stylesheet folgende CSS-Eigenschaften geben:

span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

Mit Hilfe dieser Extra-Klasse kannst du ein besonders schönes &-Zeichen in deinen Texten nutzen.

Dan Cedernholm von Simplebits hat in seinem Artikel »Use the Best Available Ampersand« außerdem eine Auflistung verschiedener &-Zeichen für Mac und Windows zur Übersicht zusammen gestellt.

Jede Menge &-Zeichen zur Inspiration bei simplebits.com.

Mit dem wp-typography Plugin für WordPress wird die CSS-Klasse .amp für &-Zeichen übrigens automatisch eingefügt. Du musst also die entsprechenden CSS-Eigenschaften nur noch in deinem Stylesheet ergänzen.

5. Text-Verläufe mit CSS3

Eine spannende, neue Möglichkeit für spezielle Text-Elemente (z.B. im Logo oder Header deiner Webseite) sind CSS3-Verläufe (gradients).

Ein Beispiel für einen solchen Text-Verlauf mit CSS3:

Verlauf

Mit folgendem Code kannst du du einen Farbverlauf innerhalb der Buchstaben erzeugen:

h1 {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

(Quelle: Gradient Text Snippet von CSS-Tricks)

Dieser Code funktioniert derzeit allerdings nur in Webkit-Browsern (also Chrome und Safari). Am besten nutzt du die CSS-Eigenschaften bei Text-Elementen, die auch ohne Verlauf noch gut funktionieren.

Wie gefallen dir die vorgestellten CSS-Optionen für die Text-Gestaltung? Und was ist deiner Meinung nach die beste Vorgehensweise, um mit der derzeit leider noch sehr uneinheitlichen Browser-Unterstützung umzugehen? Über dein Feedback und deine weiteren Tipp zur Text-Optimierung mit CSS würde ich mich sehr freuen!