Kommentare 31

Hilfreiche CSS-Tipps zur Gestaltung von Text (Teil1)

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:

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.

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:

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!

31 Kommentare

    • Hallo Ralf,

      ja die multi-columns sind eine geniale CSS3-Eigenschaft, und auf alle Fälle noch ein Grund mehr den IE nicht zu mögen…

      Naja, wir haben die columns auch auf unserer About-Seite schon eingesetzt, im IE gibt’s dann halt nur eine Spalte :-)

      Viele Grüße,
      Ellen

      • Hallo Ellen,
        ich habe noch mal eine Frage zu den mehrspaltigen Layouts. Wenn sich in dem mehrspaltigen Bereich z.B. nur Bilder befinden, so werden diese ggf. zerschnitten und auf die Spalten aufgeteilt. Gibt es dazu eine Lösung?

  1. Vielleicht zu profan, um es extra zu erwähnen, aber für Text mag ich persönlich kaum mehr auf text-shadow verzichten; fast immer mit den Werten 0 1px 1px, weil sonst unscharf, und immer öfter mit halbtransparentem Schwarz als Farbe mittels rgba(0,0,0,.5).

    P.S. (offtopic): Man hört ja immer wieder die Frage, ob “-webkit-” für das Web2.0 zu dem wird, was früher “filter” für den IE war.
    Die -webkit-Trickkiste kann aber, jenseits aller schönen Spielereien, tatsächlich enorm hilfreich sein, wenn es um speziellere Anwendungsszenarien geht. Wir haben neulich eine kleine WebApp im Kundenauftrag geschrieben, die absolut ausschließlich auf dem iPad zu laufen hatte und wie das native UI aussehen sollte. Da war es ein Traum, -webkit- so richtig nutzen zu dürfen! Wir haben fast die komplette Anwendung, inkl. “nativ” aussehendem UI und Animationen, nur mit CSS und -webkit- umgesetzt.

    • Hallo Caspar,

      nein, text-shadows finde ich auch noch eine super Ergänzung für diese Liste. Ich habe inzwischen auch noch einige weitere CSS/Text Tipps gefunden, da werde ich wohl noch einmal einen Artikel zusammen stellen :-)

      Ja, das stimmt, webkit bietet wirklich jede Menge tolle Möglichkeiten. Hoffentlich werden die CSS-Eigenschaften in der Zukunft für alle Browser einheitlicher unterstützt, so dass man die Optionen immer voll ausnutzen kann :-)

      Viele Grüße,
      Ellen

  2. Hi Ellen
    wieder mal eine coole Zusammenstellung. Das dreispaltige ist wirklich der Hammer. Schade, dass man CSS3 (noch) nicht tim täglichen Gebrauch einsetzen kann. IE ist immer noch sehr präsent, den kann man (ich zumindest), nicht einfach ignorieren…

  3. Klasse Ellen! Danke für die Tipps!
    Ich denke da ähnlich wie Lemi – der IE ist da wieder mal am spaßbremsen. Ich denke, das wird sich auch nicht ändern.

    Für Kundenprojekte verzichte ich daher noch auf den neuen “Spielkram”.

    Lieben Gruss

  4. @Jonathan & Lemi:

    Hi!
    Nach aktuellen Statistiken (http://bit.ly/eKwY2u) liegen Firefox und Chrome gemeinsam in Deutschland z.Z. bei ca. 69% Marktanteil, IE bei 22%.
    Es ist natürlich jedem selbst überlassen, daraus Schlüsse für die eigene Arbeit zu ziehen oder nicht, aber es würde mich echt interessieren, wie Ihr das seht.

    Ich persönlich schreibe eine Website zunächst mal für “fähige” Browser und streiche danach für IE6-7 eine visuell um die kritischen CSS-Eigenschaften abgespeckte Version zusammen.
    Natürlich dürfen keine echten Features fehlen, wenn jemand mit IE daher kommt. Aber ein Plus an rein ästhetischen Effekten wie Zweispaltigkeit oder Textverläufe für die Nutzer eines “echten” Browsers ist m.E. vertretbar und auch fair. Nach dem Motto: “Du nutzt einen Browser? Danke! Hier ist die Belohnung” (Hab ich so neulich tatsächlich irgendwo auf einer Portfolio-Site so gesehen!)

    Ein anderes Thema sind m.E. die proprietären Deklarationen von Webkit und Mozilla, und zwar an der Stelle, wo diese keine Deckung mit (noch nicht unterstützten) CSS3-Eigenschaften mehr aufweisen. Solche Effekte würde ich wirklich nur in speziellen Fällen nutzen.

    Ist es nicht schade, auf sowas Schönes zu verzichten, bloß weil der alte IE noch im Äther rumschwirrt?

    • Hallo Caspar
      Natürlich ist es schade. Auch um die Zeit die wir für Browserhacks vergeuden… ;-) Noch tragischer finde ich, dass die Browserhersteller sich nicht auf einen Standart einigen können, bzw. wollen…

      Die Zahlen um die Browser-Marktanteile für Deutschland stimmen. Das habe ich auch schon mal gelesen. Trotzdem darf man aus meiner Sicht die immerhin noch 22% IE Benutzer nicht einfach ignorieren. Aber OK, mittlerweile wird der Steinzeitbrowser IE6 von mir auch nicht mehr gross beachtet, ausser der Kunde wünscht das explizit und ist bereit für solche Basteleien zu zahlen. ;-)

      Ausserhalb Deutschland sieht die Browserwelt aber ziemlich anders aus. Im restlichen Europa liegt der Anteil des IE (alle Versionen) immer noch um die 40%. Genauso in der Schweiz, wo ich meine meiste Kundschaft habe.

      Vielleicht nicht super exakt, aber eine generelle Übersicht zum Browsermarkt liefert z.B. diese Seite: http://gs.statcounter.com

      LG

    • Caspar, prinzipiell stimme ich dir da zu. Aber die Statistik – wie zuverlässig ist die? Ich könnt jetzt Googlen und würd auf Anhieb 3 weitere Statistiken mit nun wieder ganz anderen Zahlen finden.

      Und aus diesem Grund schaue ich mir vorzugweise die Browseranteile der Zielgruppe an. Wir bedienen hier leider ein breites Feld, das den IE-Browser nutzt.

      Lieben Gruss

      • @Jonathan Browseranteile der Zielgruppe klingt gut! Weisst Du zufällig eine Quelle für verlässliche Daten? Mit der Verlässlichkeit von Statistiken im Allgemeinen hast Du natürlich recht.

        @Lemi Ignorieren wäre sicher fatal, da bin ich Deiner Meinung. Wie diese Unterschiede zwischen der Schweiz und Deutschland wohl zustande kommen?

        • Caspar,
          das ist immer so die Sache mit der Zielgruppe. Die zuverlässigste Quelle dir ich dir empfehlen kann, sind Kundengespräche. Andere Zuverlässige zahlen könnten aus “Sniper-Sites” entstehen. Also dein Produkt/Dienstleistung durch 10 bis 15 verschiedenen Keyword-Sites mit WordPress optimieren.
          Nach einer gewissen Zeit, siehst du dann anhand der zuhauf vorhandenen Statistik-Tools, wer zu welchem Keyword mit welchem Browser und aus welchen Regionen deine Sniper-Seiten besucht.
          Du brauchst dafür an sich nur Geduld, Zeit und nerven ;)

          Was besseres fällt mir um ziemlich genau um Mitternacht nicht mehr ein.

          Lieben Gruß, ich leg mich erstmal hin ;)

  5. Uli

    Vielen Dank für diese tolle Zusammenstellung, Ellen. Hab ich mir gleich gebookmarkt und werde bestimmt das eine oder andere bald verwenden.
    text-shadows benutze ich auch sehr gerne. Es sorgt noch für den letzten Schliff. Es gibt zwar viele Leute, denen der Unterschied gar nicht aufffällt, aber für mich gehört es eigentlich dazu.
    Und so wie Caspar sehe ich das auch – natürlich sollen alle wichtigen Funktionen in allen Browsern möglichst gleich funktionieren, aber das eine oder andere kleine feature für die modernen Browser sind schon klasse.

  6. David

    Hallo Ellen,

    das ist wieder mal ein gelungener Artikel.. ganz besonders hat mir Dein Tipp mit dem Selectivizr-Script geholfen. Vielen Dank dafür!! Das reduziert den Aspirin-Konsum im Umgang mit dem IE beträchtlich :)

    Zu den CSS3-Colums hier noch ein paar Erweiterungen:

    In Deinem Beispiel teilst Du die verfügbare Breite des Elternelements mit column-count und column-gap in die angegebene Anzahl von Spalten mit entsprechendem Abstand zueinander auf. Es geht aber auch umgekehrt:

    -moz-column-width:100px; /* Firefox */
    -webkit-column-width:100px; /* Safari, Chrome */
    column-width:100px; /* W3C Standard */

    Hier wird die verfügbare Breite mit 100px breiten Spalten gefüllt; es macht natürlich hier keinen Sinn column-count und column-width zu kombinieren :)
    Außerdem kann man zwischen den Spalten nicht nur den Abstand festlegen sondern auch eine vertikale Trennlinie einfügen:

    -moz-column-count:2; /* Firefox */
    -moz-column-rule:1px dashed #ccc;
    -webkit-column-count:2; /* Safari, Chrome */
    -webkit-column-rule:1px dashed #ccc;
    column-count:2; /* W3C Standard */
    column-rule:1px dashed #ccc;

    column-rule wird dabei genauso wie border formatiert, oder man gibt die Eigenschaften separat an:
    column-rule-width, die Breite der Linie
    column-rule-style, der Stil der Linie (solid, dashed, dotted, etc.)
    column-rule-color, die Farbe der Linie

    Zum Schluss kann man den Text innerhalb der Spalten noch mit text-align:justify ausrichten, auch wenn das mit CSS3 nichts mehr zu tun hat.. Das Ergebnis sieht dann schon fast wie eine Tageszeitung aus, auch wenn es natürlich die Qualität von InDesign nicht erreicht ;)

    Viele Grüße,
    David

    • Hallo David,

      freut mich, dass dir der Artikel und der Tipp zum Selectivizr-Script gefallen hat.

      Und vielen herzlichen Dank für deine hilfreichen Ergänzungen zur Mehrspaltigkeit mit CSS3. Da werde ich den Absatz im Artikel wohl noch einmal etwas erweitern :-)

      Danke dir und viele Grüße,
      Ellen

  7. Ich lande in letzter Zeit doch immer öfter bei elmastudio.de. Besonders die Sache mit der Mehrspaltigkeit im Fließtext ist ja pfiffig ;-)

    Zwei kleine Tippfehler sind mir aufgefallen:
    text-intent => text-indent
    amphersand => ampersand

    Danke für den schönen Überblick.

  8. Hi Ellen,

    ich weiß, das ist hier vielleicht nicht der richtige Ort, aber vielleicht hast Du ein paar links parat, durch die ein PC-Dummie wie ich kapiert, wie ich meine bisherige Seite für wordpress umbaue. Ich würde es gerne selber lernen Themes zu erstellen. Vielleicht sagst Du ja auch “lass es machen”. Aber vielleicht gibt’s ja wirklich ein paar klasse Erklärungsvideos. Irgendwas was “schnell” geht?
    Lieben Dank und Gruß aus Mainz

    Linus

  9. Hallo,
    klingt alles super. ich hatte mal das Plugin wp typography für sowas eingesetzt bin aber bei der Nutzung nicht durchgestiegen. Für ganz Doofe, wo und wie muß ich die CSS Klassen denn eigentlich hinsetzen? ich verwende den CKEditor für WordPress im visuellen Modus.

  10. Trooper

    Hallo,

    das mit dem ersten Buchstaben groß schreiben klappt im Grunde, aber er macht bei jedem Absatz den Buchstaben groß. Lässt sich das irgendwie ändern?

    my code:

    .entry {
    line-height: 20px;
    font-size: 15px;
    font-family: Open Sans, Arial, Sans-serif;
    }

    p:first-letter {
    float: left;
    font-family: Open Sans, Arial, Sans-serif;
    font-size: 290%;
    margin-right: 3px;
    margin-top: 5px;
    padding: 2px;
    text-transform: uppercase;
    }

Schreibe eine Antwort