Von Kay Eickhoff
Schriftgrößen im Webdesign: em und rem.
Vergleich der Maßeinheiten em und rem.
em und rem sind Maßeinheiten im Webdesign, die sich auf die Schriftgröße beziehen. Beide Einheiten sind relativ und basieren auf der Schriftgröße eines übergeordneten Elements. Der Hauptunterschied zwischen ihnen liegt jedoch in der Referenz, auf die sie sich beziehen.
em (em-Unit):
em ist relativ zur Schriftgröße des direkten übergeordneten Elements. Wenn die Schriftgröße eines übergeordneten Elements auf 16 Pixel festgelegt ist, und ein untergeordnetes Element hat eine Schriftgröße von 1.5em, beträgt die tatsächliche Schriftgröße 1.5 * 16 Pixel = 24 Pixel. Der Wert ist kumulativ, wenn Elemente ineinander verschachtelt sind. Wenn ein Element in einem Element mit einer Schriftgröße von 1.5em verschachtelt ist und es selbst eine Schriftgröße von 1.2em hat, beträgt die tatsächliche Schriftgröße 1.5 * 1.2 * 16 Pixel.
rem (Root em-Unit):
Im Gegensatz dazu ist rem relativ zur Schriftgröße des Root-Elements, was normalerweise dem <html>-Element entspricht. Unabhängig von der Verschachtelungsebene bleibt die rem-Einheit konstant zur Schriftgröße des <html>-Elements. Wenn die Schriftgröße des <html>-Elements auf 16 Pixel festgelegt ist und ein Element eine Schriftgröße von 1.5rem hat, beträgt die tatsächliche Schriftgröße 1.5 * 16 Pixel = 24 Pixel, unabhängig von der Verschachtelung.
Vergleich:
Der Hauptvorteil von rem ist, dass es die Komplexität bei der Berechnung von Schriftgrößen in verschachtelten Elementen reduziert. Da es sich auf die Root-Schriftgröße bezieht, bleiben die Größen intuitiver und leichter zu kontrollieren.
em kann in bestimmten Fällen nützlich sein, wenn Sie die Schriftgröße eines Elements relativ zur Schriftgröße seines direkten übergeordneten Elements anpassen möchten.
Fazit: Optimale Lesbarkeit und Ästhetik auf verschiedenen Bildschirmen und Geräten gewährleisten!
Die Wahl zwischen em und rem hängt von den spezifischen Anforderungen eines Webdesign-Projekts ab. Beide Einheiten sind relativ zur Schriftgröße, aber der entscheidende Unterschied liegt in der Referenz, auf die sie sich beziehen.
In der Praxis verwenden Webdesigner oft eine Kombination von em und rem, abhängig von den Designanforderungen. rem wird oft für grundlegende Strukturelemente verwendet, um eine konsistente Skalierung zu gewährleisten, während em in speziellen Fällen oder für feinere Anpassungen auf der Ebene einzelner Container genutzt wird. Die Entscheidung zwischen em und rem sollte stets darauf basieren, wie gut die Kontrolle über die Schriftgrößen beibehalten werden kann, um eine optimale Lesbarkeit und Ästhetik auf verschiedenen Bildschirmen und Geräten zu gewährleisten.
Blog durchsuchen:
Das könnte dich auch interessieren:
