Stil mit {stil}

Sep 2009

CSS font – Schrift für Webseiten

Erst seit die wichtigsten Browser die @font-face-Regel unterstützen, können Schriften auf breiter Basis in Webseiten eingebettet werden.

Obwohl mit CSS Schriftfamilie, Schriftgröße und -farbe festgelegt werden können, war die Schriftgestaltung auf Webseiten bislang eingeschränkt. Browser können nur Schriften anzeigen, die auf dem Rechner des Besuchers installiert sind. Darum erlaubt CSS eine Liste von bevorzugten Schriften und Alternativen.

Schrift	Bild
Adobe Garamon Pro Lucida Calligraphy Sathu Lucida Sans Typewriter

Das schränkt die Schriftgestaltung auf Webseiten auf relativ sicher installierte Schriften wie Arial, Helvetica, Times oder Times New Roman und Verdana ein. Wer Webseiten entwirft, musste sich bislang damit abfinden, dass er nur eine Empfehlung für die Schriftfamilie ausspricht.

Die Liste der alternativ zu verwendeten Schriften sollte sorgfältig durchdacht sein. Arial und Helvetica sind Schriften, die sich stark ähneln und die etwa dieselbe Größe aufweisen. Verdana hingegen ist eine Schrift, die größer ist und breiter läuft und so zu einem vollkommen anderen Zeilenumbruch führen wird. Eine Liste von relativ sicheren Zusammenstellungen gibt es auf der Seite font-family.

Schriftgröße

Darüber unterliegt auch die Größe der Schrift nicht unbedingt den Vorgaben des Webdesigners. Der Besucher kann in allen Browsern eigenständig die Schriftgröße ändern. Und als ob diese Freiheit des Benutzers nicht genügend Stolperfallen für das Webdesign wären, bringt CSS verschiedene Systeme für die Bestimmung der Schriftgröße ins Spiel: Schriften können in Pixel (px), in EMS (em) und in Punktgrößen (pt) festgelegt werden.

Üblich ist die Größenangabe in px (Pixeln). Zwar wird durch die Angabe der Schriftgröße in Pixeln eine konsistente Darstellung erreicht, aber auf einem 13-Zoll-Notebook wird eine 10 Pixel-große Schrift bei einer Bildschirmauflösung von 1024x768 Pixeln anders wirken als auf einem 26-Zoll-Monitor mit einer Auflösung von 1600 x 1200 Pixeln.

Da hilft nur der Blick auf die Webseite auf verschiedenen Monitoren – es gibt keine eindeutige Mehrheit für irgendeine Monitorauflösung.

Serifen

Während im Druck meist Schriften mit Serifen genutzt werden, sehen wir auf Webseiten nahezu ausschließlich Schriften ohne Serifen. Der Monitor hat eine geringere Auflösung als der Druck und eine Schrift mit Serifen müsste der Lesbarkeit zuliebe deutlich größer gesetzt werden als eine Schrift ohne Serifen.

zurück zum Seitenanfang