Texte im Webseiten-Layout angenehm lesbar und übersichtlich zu formatieren, erfordert meist ganz schön viel Feinarbeit. Mit Hilfe von praktischen, modernen CSS-Eigenschaften kannst du dir die Arbeit oft erheblich erleichtern, und so Gestaltungselemente wie mehrspaltigen Text, eingerückte Absätze oder Textschatten umsetzen. Daher habe ich eine Übersicht nützlicher CSS Tipps und Tricks für dem Umgang mit Text zusammen gestellt.

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:

[php]
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;
}
[/php]

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:

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

(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:

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

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:

[php]
p {
text-indent: 25px;
}
[/php]

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

[php]
p:first-child {
text-indent: 0px;
}
[/php]

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:

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

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.

Ampersands Beispiele bei simplebits
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:

[php]
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;
}
[/php]

(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!