Dynamische Masseinheiten für Schriften
% vs. EM vs. REM

Im Gegensatz zu Pixel als fixe Masseinheit, können mit em Schriftgrössen relativ definiert werden. Relative Angaben für Schriftgrössen in em ensprechen ebenfalls den Accessibility Standards. Em beziehen die Information aus den Voreinstellungen des Browsers. Vorausgesetzt es ist nicht nichts anderes eingestellt, entspricht 1em in den meisten Browsern einer Schriftgrösse von 16 Pixel. Dieser Standardwert kann als Rechnungsgrundlage für weitere Schriftgrössenangaben verwendet werden.

Standard-Wert = 16PX = 100% oder 1EM oder 1REM

Für Schriftgrössenangaben in relativen Masseinheiten ist ein sicheres Verständnis der kaskadierenden Vererbungsregeln von Vorteil.
Schriftgrössenangaben in relativen Masseinheiten sind für mobile Geräte und dynamische Layouts besser geeignet.

1EM oder 1REM (r= root em)

Die CSS3 Schriftgrösseneinheit rem rechnet sich gleich wie em.
PIXEL : 16 = EM oder REM. (px-to-em Calculator)

Der Unterschied liegt in der Vererbung. Der Rem-Wert orientiert sich am Root-Element (html). Gemeint ist hier die Schriftgrösse für html und nicht die Schriftgrössen-Angabe für den documet-body. Siehe auch developer.mozilla.org/. Alle child-Elemente rechnen sich nun vom initial Wert html.
Em orientiert sich an der Schriftgrösse des jeweiligen Eltern-Elements (parent Element).

In rem ist die Berechnung der Schriftgrösse wesentlich einfacher. Bei verschachtelten Elementen oder mehrfach verschachtelten Elementen (Beispiel Listen) muss die Schriftgrösse nicht mehr im Verhältnis zur Schriftgrösse des Eltern-Elments berechnet werden. Rem rechnen sich immer vom html und sind deshalb teilbar durch 16.

Beispiel

Am Beispiel der Liste ist der Unterschied der Vererbung einfach ersichtlich.
Als Standard-Wert wird die Schrift im html mit 0.9375em definiert.

html { font-size: 100%;  }

em im html

Diese Liste hat keine Zusatzdefinitionen für die Schrift.
Die Schriftgrösse vom html-Tag (font-size: 100%; / 16px) wird vererbt.

• erste Linie erste Linie
• zweite Zeile erster Punkt
  • zweite Zeile erster Unterpunkt
    • dritter Unterpunkt der zweiten Zeile
• noch eine auf der ersten Stufe

em im html und em in der Liste

Hier muss auf die kaskadierende Vererbung geachtet werden.
Wird dem Listen-Element ein Wert in em zugeteilt, wird dieser an die Child-Elemente vererbt. Die Schriftgrössen in den Unterlisten werden immer kleiner (0.875em von 0.875em des Parent etc.). Entsprechend vergrössert sich die Schrift wenn ein Wert grösser als 1em zugeteilt wird.

#classic-em li { font-size: 0.875em; }

• erste Linie erste Linie
• zweite Zeile erster Punkt
  • zweite Zeile erster Unterpunkt
    • dritter Unterpunkt der zweiten Zeile
• noch eine auf der ersten Stufe

em im html und rem in der Liste

Wird die Liste im Stylesheet in rem definiert, orientiert sich die darzustellende Schriftgrösse immer am Root-Element. Alle Listen-Elemente sind nun gleich gross.

#new-rem li { font-size: 0.875rem; }

• erste Linie erste Linie
• zweite Zeile erster Punkt
  • zweite Zeile erster Unterpunkt
    • dritter Unterpunkt der zweiten Zeile
• noch eine auf der ersten Stufe

Browser

CSS3 Angaben werden noch nicht von allen Browsern unterstützt. Alte IE Versionen (8+ ) kennen noch keine rem. Eine Fallback-Lösung in Pixeln muss im Sinne von graceful degradation im Stylesheet definieret werden.

li {
font-size:20px;
font-size:1.25rem;
}

Auf die Vererbung achten! Die Angabe in PIXELN muss vor der Angabe in REM stehen, damit PIXEL von REM überschrieben werden können. Browser die REM nicht kennen stellen die angegebenen PIXEL dar.