Wandeln Sie zwischen px, rem, em, vw, vh und pt um.
Die Ergebnisse dienen zur Information. Überprüfen Sie sie anhand anderer Quellen.
Verschachteln Sie 1,25em vier Ebenen tief, und daraus werden 39px statt 20px
em bezieht sich auf das Elternelement, Verschachtelung multipliziert es also. Vier Elemente mit je 1,25em landen beim 2,441-fachen der Wurzel — 39,06px, wo die Autorin oder der Autor mit ziemlicher Sicherheit 20px meinte. rem bezieht sich auf die Wurzel und summiert sich nie auf, und genau das ist der ganze praktische Unterschied zwischen beiden Einheiten.
So wird gerechnet
- Rechnet zwischen px, rem, em, pt und Prozent bei der CSS-Referenz von 96 dpi um.
- Macht das Aufmultiplizieren von em sichtbar, denn von dort kommen die Überraschungen.
- Zeigt, was aus einem Wert wird, wenn Nutzende ihre Wurzelschriftgröße ändern — genau das tun Barrierefreiheitseinstellungen.
rem = px ÷ Wurzelschriftgröße (Standard 16px) em = px ÷ Schriftgröße des Elternelements 1pt = 96 ÷ 72 = 1,3333px also 12pt = exakt 16px verschachteltes em multipliziert: 1,25em in 1,25em = 1,5625 × Wurzel
Rechenbeispiel
Derselbe Faktor 1,25 als em und als rem, vier Ebenen tief.
- Ebene 1 — em: 20,00px · rem: 20px
- Ebene 2 — em: 25,00px · rem: 20px
- Ebene 3 — em: 31,25px · rem: 20px
- Ebene 4 — em: 39,06px · rem: 20px
- 1,25⁴ = 2,4414
Die em-Kette verdoppelt die beabsichtigte Größe bis zur vierten Ebene beinahe, während jedes rem-Element bei 20px bleibt. Keine der Einheiten ist kaputt; sie beantworten verschiedene Fragen, und zu em zu greifen, wo rem gemeint war, ist einer der häufigsten CSS-Größenfehler.
Das Ergebnis lesen
- Der klassische Fehlschlag sind verschachtelte Listen. Setzen Sie ul { font-size: 0,875em }, und jede Ebene schrumpft erneut: 14,00px, dann 12,25px, dann 10,72px. Auf der dritten Ebene ist der Text 33,0% kleiner als die Wurzel, nicht die 12,5%, die die Regel nahezulegen scheint.
- 12pt entspricht exakt 16px, und das ist ein echter Zufall, den man kennen sollte. Die Standardschriftgröße des Browsers und die übliche Fließtextgröße im Druck treffen sich bei der CSS-Referenz von 96 dpi auf demselben Wert, pt und px stimmen also an genau einem nützlichen Punkt überein und sonst nirgends.
- rem ist die barrierefreie Wahl für Typografie, weil es der Wurzeleinstellung der Nutzenden folgt. Wer den Browser auf 24px gestellt hat, sieht 1,5rem als 36px gerendert, während fest verdrahtete 24px bei 24px bleiben und ihn schlicht ignorieren.
- em bleibt die richtige Einheit, wenn Sie Proportion zum lokalen Text wollen — etwa Innenabstand in einer Schaltfläche, der mit deren eigener Beschriftung skalieren soll. Die Faustregel: rem für Schriftgrößen, em für Abstände, die zum Element gehören.
Häufige Fragen
- Soll ich rem oder em verwenden?
- rem für Schriftgrößen, em für Abstände, die mit dem eigenen Text des Elements skalieren sollen. rem summiert sich nie auf, eine Komponente drei Ebenen tiefer rendert also identisch; em summiert sich absichtlich auf, was für Innenabstände nützlich und für Typografie schädlich ist.
- Warum schrumpft mein verschachtelter Text?
- Weil em auf jeder Ebene multipliziert. Eine 0,875em-Regel auf drei verschachtelte Listen ergibt 14,00px, 12,25px und dann 10,72px. Stellen Sie die font-size auf rem um, und jede Ebene rendert unabhängig von der Tiefe in derselben Größe.