Relativ zur Schriftgrösse

EM

Der Standard-Wert des EM eines Elementes ist seine Font-Size.

Zentrales Merkmal für die Wertbestimmung ist das Vererbungsprinzip. Ist die Font-Size 1EM wird geschaut, was die Schriftgrösse des Parent-Elementes ist und schlussendlich die Body Font-Size oder HTML Font-Size als Basis genommen.

Der EM Wert 1em ist äquivalent mit 100% des Parent. Wohl, weil viele EM Werte grösser als 100% sind.

Der EM Wert kann und soll nicht nur als Schriftgrösse herhalten. So kann die Schriftgrösse als Referenz auch für Abstände (z.B. Margin und Paddings), Distanzen von relativ positionierten Elementen oder anderen Layout bedingten Abhängigkeiten mit der Schriftgrösse genutzt werden.

© Webdesign Essentials

REM

Der Root-EM behält immer die HTML Font-Size (Default 16px) als Standard-Wert und somit kann sein Wert nicht vererbt werden. Die Font-Size des HTML/Body kann aber sehr wohl auf verschiedenen Media-Queries unterschiedlich gross sein.

EM/REM sind sinnvoll, da sie ihre Grösse proportional zu ihrer Basis verändern. Stellt man also die Basis um (z.B. bei Media Queries oder via Browsereinstellung), verändern sich die Grössen proportional zur Basis mit.

Vertiefe dich ins ganze Kapitel

Responsive Design