Maßeinheiten

In CSS können eine Reihe von Maßeinheiten Verwendung finden: Als relative Maßangaben existieren %, em (Element), ex (Höhe des Kleinbuchstaben x im Elternelement) als absolute Maßangaben pt (Punkt), px (Pixel), in (inch), mm (millimeter), cm (Zentimeter), pc (Pica). An dieser Stelle wird auf die drei wichtigsten Maßeinheiten eingegeangen: em, pt und px (Maßeinheiten wie in, cm oder mm sind nur bei druckoptimierten CSS bedingt sinnvoll).
 

 

 
Relative Größe über em (Element)

Schreibweise: 1.2em oder 0.4em

Bezieht sich auf die Schriftgröße des Elternelements. Beträgt die eingestellte Schriftgröße für <body> 12 pt, wird eine mit 1.5em ausgezeichnete Überschrift mit 18pt dargestellt. Solche Angaben können auch verschachtelt werden, also
body {font-size:12pt}
p {font-size:0.8 em} Schrift im Absatz 12x0.8= 9,6pt
p strong {font-size:0.8em} im Absatz hervorgehobene Schrift 12x0.8x0.8= 7,7pt

Wie man an diesem Beispiel sieht, sind auch gemischte Angaben (relativ & absolut) möglich.
 

 
Absolute Größe über pt (Punkt)

Schreibweise: 12pt oder 9pt
Bei der Verwendung von pt als Maßeinheit für Schrift ist zu beachten, das die Größenausgabe je nach Betriebssystem differieren kann. Macs unter Classic-OS stellen in Punkt ausgezeichnete Schriften im Browser deutlich kleiner dar als Windows-Systeme (was zu Unleserlichkeit führen kann).

body {font-size:12pt}
 

 
Absolute Größe über px (Pixel)
Schreibweise: 18px oder 11px
Bei der Verwendung von px als Maßeinheit für Schrift ist zu beachten, das im Internet Explorer Windows in Pixel ausgezeichnete Schriften nicht nachträglich im Clientbrowser skaliert werden können (über Darstellung/Ansicht > Schriftgröße), was für sehbehinderte User einen Nachteil darstellt (dieses Problem kann über einen Style-Switcher behoben werden). Dafür ist eine recht pixelgenaue Anwendung von Schriftelementen nur in dieser Form möglich) ohne dass durch die nachträgliche Skalierung das Layout zerreisst. Kleinere Werte als 11px sollten nicht verwendet werden.

body {font-size:12px}

Pixelwerte werden auch häufig für die Angabe von Abmessungen von "Containerelementen" verwendet werden. Diese Container ( mit <div> oder <span> ausgezeichnete Inhalte, also Texte, Grafiken oder Tabellen usw.) können fixe Abmessungen erhalten und durch entsprechende Eigenschaften frei im Browserfenster plaziert werden (tabellenfreies Layout).