Rechnen Sie em in Pixel um, mit jeder Elterngröße

em wird durch eine einzige Multiplikation zu Pixeln: der Wert in em mal die Schriftgröße des Elternelements. In der Voreinstellung des Browsers hat dieses 16 px, 1em ergibt also 16 Pixel und 1,5em ergibt 24. Die Einheit bezieht sich auf die Schriftgröße des umgebenden Elements [1].

Die Umrechnung lohnt sich beim Lesen eines fremden Stylesheets, wenn Sie wissen wollen, wie viel ein als 0,75em notierter Abstand tatsächlich misst. Die Antwort hängt davon ab, an welcher Stelle des Dokuments dieser Abstand steht – und genau das unterscheidet em von den übrigen relativen Einheiten.

Das Elternelement muss keine 16 px haben. In einer Karte oder Tabelle sind es oft 14 px, in einer Abschnittsüberschrift 20 px oder mehr, deshalb nimmt das Feld jeden Wert von 1 bis 200 an.

Weiter unten finden Sie eine Tabelle mit 26 Werten bei drei Elterngrößen, eine Tabelle zur Aufsummierung bei Verschachtelung sowie die Regel, wann em und wann rem die richtige Wahl ist. Den Weg in die andere Richtung übernimmt der Umrechner von Pixel in em.

Die Formel kennt einen Rechenschritt: Pixel = em × Schriftgröße des Elternelements. Diese Schriftgröße ist die font-size des Elements, in dem Ihr Element steht, und wenn sie niemand geändert hat, nimmt der Browser 16 px an.

Beispiel für einen Abstand von 1,25em: bei einem Elternelement von 16 px ergibt das 1,25 × 16 = 20 Pixel. Derselbe Wert in einer Karte mit 14 px Schrift ergibt 17,5 Pixel, und in einer Überschrift mit 20 px wächst er auf 25.

Eine Regel verdient Aufmerksamkeit. In der Eigenschaft font-size bezieht sich em auf das Elternelement, in jeder anderen Eigenschaft desselben Elements – in padding, margin oder width – dagegen auf die Schriftgröße dieses Elements [2]. Ein Element mit font-size: 1.5em und padding: 1em hat bei einem 16-px-Elternelement 24 px Schrift und ebenfalls 24 px Innenabstand.

Die Einheit rem rechnet genauso, zählt aber immer vom Element html aus und liefert damit im ganzen Dokument denselben Wert: das ist die Aufgabe des Umrechners von rem in Pixel. Dieselben 16 Pixel sind im Satz 12 typografische Punkte, was der Umrechner von Punkt in Pixel berechnet.

em misst sich am Elternelement, und dieses hat selbst ein Elternelement. Wenn dieselbe Angabe font-size: 1.25em über mehrere Verschachtelungsebenen hinweg wiederkehrt, multipliziert jede Ebene das Ergebnis der vorherigen. Nach sechs Ebenen werden aus 16 Pixeln über 61.

Am häufigsten sehen Sie das in verschachtelten Listen, in Menüs mit Untermenüs und in Kommentarsträngen, weil die Struktur die Ebenen von selbst erzeugt. Die Tabelle unten zeigt jeden Schritt samt Rechenweg, damit die Herkunft jeder Zahl sichtbar bleibt.

Daraus folgt die praktische Regel: em passt überall dort, wo ein Wert der Schriftgröße seines nächsten Kontextes folgen soll – der Abstand um den Text einer Schaltfläche, der Einzug einer Liste, die Breite eines Formularfelds. Für Schriftgrade über eine ganze Website hinweg eignet sich rem besser, denn es zählt von der Wurzel des Dokuments und liefert bei jeder Verschachtelungstiefe denselben Wert.

Wenn Sie genau diese Vorhersagbarkeit suchen, übernimmt die Rechnung der Umrechner von rem in Pixel, und ein Maß aus dem Entwurf in rem notiert der Umrechner von Pixel in rem.