Text-Auszeichnungen

Es gibt zahl­rei­che CSS–Eigen­schaf­ten mit denen Texte beson­ders her­vor­ge­ho­ben oder aus­ge­zeich­net wer­den kön­nen. Einige Mög­lich­kei­ten und Tricks wer­den hier erläutert.

Ver­sal­wör­ter

Im Text werden VERSALWÖRTER kleiner gesetzt.

Ver­sal­wör­ter im Text soll­ten ein wenig klei­ner gesetzt wer­den, um einen ange­neh­men Lese­fluss zu ermöglichen.

Im Text werden VERSALWÖRTER kleiner gesetzt.

span.caps {
   font-size: 0.8em;
   font-weight: 500;
   letter-spacing: 0.1em; 
}

Je nach Schrift kann es sinn­voll sein die Schrifts­tärke etwas zu erhö­hen, um ein gleich­mä­ßi­ges Schrift­bild zu errei­chen. Auch soll­ten Ver­sa­lien teil­weise gesperrt werden.

Zah­len

1 2 3 4 5 6 7 8 9 0

Wenn in der Schrift­art vor­han­den, soll­ten inner­halb vom Fließ­text Zah­len mit Unter– und Ober­län­gen »old style« ein­ge­setzt werden.

Im Bei­spiel links z. B. »old style« Zah­len der hier ein­ge­setz­ten Schrift­art »Calluna« von Jos Bui­venga.

Absatz Ein­rü­ckun­gen

Möchte man die erste Zeile eines Absat­zes ein­rü­cken, um lange Texte zu struk­tu­rie­ren, lässt sich das per CSS erreichen.

p {
   text-indent: 3em;
}

Möchte man jedoch nicht jeden Absatz ein­rü­cken, son­dern nur alle auf den ers­ten Absatz fol­gen­den Absätze, kann man dies auch per CSS definieren.

p + p {
   text-indent: 3em;
}

Mit der obi­gen Anwei­sung spricht man jeden Absatz an, der auf einen vor­he­ri­gen Absatz folgt (p + p).

Initi­al­buch­sta­ben

Wird der erste Buch­stabe eines Absat­zes grö­ßer dar­stel­len als der übrige Text, spricht man von Initi­al­buch­sta­ben. Diese las­sen sich per CSS definieren:

p {
   font-size: 1em;
   line-height: 1em;
}

p:first-letter {
   font-size: 2em;
   line-height: 2em;
   text-transform: uppercase;
}

Text mit Schat­ten versehen

Glow

Mit der CSS-Eigenschaft text-shadow las­sen sich Texte ein­fach mit einem Schat­ten­wurf versehen:

h1 {
   text-shadow: #000 1px 1px 2px;
}

Dabei wird die Farbe des Schat­tens sowie sein Ver­satz in hori­zon­ta­ler und ver­ti­ka­ler Rich­tung defi­niert. Die letzte Angabe (2px) defi­niert den Weich­zeich­nungs­ra­dius und ist optio­nal. Die Farbe kann auch als RGBa ange­ge­ben wer­den. Dabei defi­niert a (in die­sen Fall 0.5) die Transparenz.

h1 {
   text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px;
}

Defi­niert man den Schat­ten ohne Ver­satz und ent­spre­chend viel Weich­zeich­nungs­ra­dius ent­steht eher ein Glühef­fekt als ein Schat­ten, wie im Beispiel.