Textgröße in CSS

Ein kleiner Guide

Inhalt:

Punkt (pt) als Schriftmaß
Das relative Schriftmaß Em
Schriftmaß Pixel (px)
Fazit

Em, Prozent oder doch die guten alten Pixel? Es gibt viele Möglichkeiten, per CSS die Schriftgröße einer Website zu regulieren. Doch welche Variante ist die Beste? Mit Sicherheit gibt es auf diese Frage keine absolute Antwort, doch dieser Artikel soll dabei helfen, sich mit den Vor- und Nachteilen von Em, Px und Co. auseinander zu setzen.

Punkt (pt) als Schriftmaß

Gleich vorneweg: Ich würde von dieser Maßeinheit für Schriftartendarstellung im Web grundsätzlich abraten. Punkt ist eine Maßeinheit aus der Print-Welt und zählt zu den absoluten Schriftgrößenmaßen. Ein Punkt (pt) entspricht hierbei 1/72 Zoll. Problem ist die Umrechnung von Zoll in Pixel auf dem Computer. Windows-Rechner verwenden standardmäßig eine Bildschirmauflösung von 96 dpi, das bedeutet, 96 Pixel repräsentieren 1 Zoll auf dem Bildschirm. Macs hingegen rechnen mit 72 dpi, also 72 Pixel pro Zoll. Somit ergeben sich hierbei schon deutliche Unterschiede bei der Schriftgraddarstellung. Hinzu kommt, dass der dpi-Wert des Bildschirms variabel ist und beliebig eingestellt werden kann.

Als Schriftmaß für den Druck eignet sich der Punkt sehr gut, da der Drucker selbst auch mit Punkt statt Pixeln rechnet. Somit ist die Einheit pt perfekt für das Druckstylesheet.

Das relative Schriftmaß Em

Mit der Verwendung von Em auf Webseiten entscheidet man sich für ein relatives Schriftmaß. Besonders bei der Vererbung der Schriftgröße ins nächste Element kann es hierbei zu Problemen kommen. Folgendes Beispiel verdeutlicht dies:

CSS:

.groß {
 font-size: 0.9em;
}
.kleiner {
 font-size: 0.9em;
}

Html:

<span class="groß"><span class="klein">Text</span></span>

Welche Größe hat nun der Text im inneren der verschachtelten Container? Durch die Vererbung ergibt sich für die Schriftgröße: 0.9em x 0.9em = 0.81em. Somit ist die Schriftröße kleiner, als man eventuell erwartet hat. gerade bei komplizierten Seitenstrukturen kann es hier sehr schnell zu unübersichtlichen Schriftgrößenvererbungen kommen.

Ein weiteres Problem: In vielen Browsern, darunter zum Beispiel auch im Firefox, lässt sich der Standardwert für Em anpassen. Somit kann nicht gewährleistet werden, dass die Schriftgröße auch Systemunabhängig in der selben Größe angezeigt wird.

Für die Schriftgrößenangabe in Prozent (%) verhält es sich im übrigen sehr ähnlich.

Schriftmaß Pixel (px)

Früher hätte ich generell von der Verwendung von Pixeln (px) als Schriftmaß abgeraten. Der Internet Explorer 6 war nicht in der Lage, Schriftgrößen in Pixeln zu skalieren, wodurch sich erhebliche Probleme für Sehbehinderte (Stichwort Barrierefreiheit!) ergaben.
Mit dem IE7 ist dieses Problem allerdings der Vergangenheit angehörig.

Pixel gehören zu den absoluten Schriftgrößen und eignen sich sehr gut für die Bildschirmdarstellung, da der Computer keine interne Umrechnung vom Maß auf die Bildschirmdarstellung durchführen muss, da er selbst auch mit Pixeln arbeitet.

Mit Pixeln lassen sich somit sehr exakte Layouts erstellen, die auf unterschiedlichsten Systemen gleich dargestellt werden.

Besondere Vorsicht gilt allerdings auf Handhelds, Handys und Co.: Da hier die Pixel oftmals sehr klein sind, können Schriftarten die auf Computermonitoren noch gut lesbar sind, bereits zu unleserlichen Pixelhaufen auf dem Handydisplay verkommen.

Fazit

Mit Sicherheit lässt sich keine absolute Lösung für das Problem des Schriftmaßes finden. Allerdings tendiere ich, wie man aus der Schreibweise dieses Artikels unschwer erkennen kann, zur Verwendung von Pixeln als Schriftmaß. Doch die genaue Betrachtung des Mediums auf welchem die Schrift dargestellt werden soll ist bei der richtigen Wahl des Maßes unabdingbar und kann dann auch zugunsten von Punkt oder Em ausfallen.

Dieser Artikel wurde verfasst von Martin Reithmayer.
Der Artikel ist am 01.11.2008 um 17:19 Uhr veröffentlicht worden und wurde bislang 1 mal kommentiert.
Tags: CSS