Schriftarten und Schriftgestaltung auf Webseiten

Auf Webseiten mit umfangreichem Text sollte man sich auf jeden Fall ausreichend Gedanken über die Schriftgestaltung machen. Dazu hier einige Anregungen.

Standard (normal, 12pt)

Das ist der Testtext mit äöüßÄÖÜ in Arial

Das ist der Testtext mit äöüßÄÖÜ in Tahoma

Das ist der Testtext mit äöüßÄÖÜ in Verdana

Das ist der Testtext mit äöüßÄÖÜ in Book Antiqua

Letter-Spacing

Ein Mittel zur Hervorhebung von Text und zur Verbesserung der Lesbarkeit längerer Texte ist die Vergrößerung der Zeichenabstände. Da font-stretch aktuell nicht unterstützt wird, muss man auf letter-spacing zurückgreifen. Man sollte aber beachten, dass zwar ein etwas größerer Abstand zwischen den einzelnen Zeichen die Lesbarkeit verbessert, ein zu großer Abstand kann sie aber auch verschlechtern.letter-spacing wird von allen aktuellen Browsern unterstützt.

Beispiel Letter-Spacing

.arialgrossabstand1 {
font-family: Arial;
letter-spacing: 0.2em;
}

Word-Spacing

Noch besser ist es wenn man letter-spacing mit word-spacing verbindet. Dann kann man den Text möglicherweise noch besser lesen.

Beispiel Word-Spacing mit Letter-Spacing

.arialgrossabstand2 {
font-family: Arial; letter-spacing: 0.15em; word-spacing: 0.2em; }

Text-Indent

Noch eine Möglichkeit die Lesbarkeit von Text, vor allem von längeren Abschnitten, zu verbessern ist die Einrückung. In diesem Beispiel-Absatz wird die Einrückung mittels text-indent kombiniert mit word-spacing und letter-spacing.

Beispiel Text-Indent mit Word-Spacing und Letter-Spacing

.text-indent {
font-family: Arial;
letter-spacing: 0.15em;
word-spacing: 0.2em;
text-indent: 2em;
}

Text-Shadow

Seit dem auch der Firefox mit der Version 3.5 text-shadow unterstützt (Opera seit Version 9.5, Safari seit 1.0 und Konqueror seit 3.5), kann man auch über den Einsatz von text-shadow nachdenken. Man sollte aber beachten, dass text-shadow die Lesbarkeit des Textes verschlechtert.

Benutzer des Internet Explorer gucken, sofern sie die Version 8 oder niedriger nutzen, in die Röhre.

Beispiel Text-Shadow

.text-shadow1 {
font-family: Arial;
text-shadow: #ff0000 3px 3px 5px;
}

Was bietet der Internet-Explorer?