Die Größe em ist skalier- und vererbbar

Im Gegensatz zu der Größeneinheit px oder pt, erlaubt em die Vererbung an Kindelemente. Eine nachträgliche Änderung der Größen ist daher viel einfacher. em enthält jedoch einige Hürden, die man kennen muss:

Hürden

• 1 em entspricht der aktuellen Schriftgröße des Abschnitts bezogen auf den Buchstaben m. Unterschiedliche Schriftarten sehen auf dem Bildschirm unterschiedlich groß aus, weil das Zeichen m verschiedene Breiten einnimt.
• Ist die Schriftgröße nicht definiert, nimmt der Browser als Berechnungsgrundlage seinen eigenen Standardwert. In der Regel 16px. Größenangaben wie z.B. 1.1em entsprechen dem 1,1-Fachen der aktuellen Schriftgröße. Das Ergebnis wird gegebenenfalls abgerundet. Das Problem dabei ist, dass bei dieser Berechnung Rundungsfehler entstehen, die sich vererben.

Tipp

• Definieren Sie im HTML-Element die Schriftgröße mit 16px. In der Regel ist das sowieso der Wert, den Browser als Standardwert benutzen. Weisen Sie dann dem Body-Element die Größe 62.5% zu. Da der Browser von 16px ausgeht, multipliziert er diese 16px jetzt mit 0,625. Das Ergebnis ist eine Ausgangsschriftgröße von genau 10px.
  Anders als im Fall von 10pt kann diese Größe an untergeordnete Elemente vererbt werden.
  Die auf diese Weise neu in mit 62.5% definierte Standardgröße von 10px kann nun ohne Rundungsfehler mit em in andere Größen umgesetzt werden. Eine Schrift in der Größe von 14px können Sie jetzt einfach mit 1.4em anlegen. (1.4em = 1.4*10px = 14px)

Vorteile

• Der Benutzer kann in allen Webbrowsern den Text selbst vergrößern.
• Layouts mit elastischer Spaltenbreite sind einfacher umzusetzen, da auch margin- und padding-Abstände in em mitskalieren und die aktuelle em-Einheit an Kindelemente weitergegeben wird.
• In em bemessene Layouts skalieren ganz einfach, da diese im relativen Verhältnis zur Schrift stehen.

Vorsicht

• Relative Elemete wie em oder Prozente sollten nicht auf generische* HTML-Elemente angewendet werden (außer html und body).

_

* Generische Elemente: Generische Elemente unterscheiden sich von den üblichen Elementen vor allem darin, dass sie keine bindende Zweckbestimmung haben. Es ist leicht, zu erklären, was ein Titel oder ein Zitat ist, aber eine ähnliche Erklärung ist für div und span nicht möglich, weil diese Elemente so lange keine inhaltliche Bedeutung haben, bis sie zum Einsatz gelangen. Das ist typisch für generische Elemente.