Schriftgrößen-Umrechner

Multipliziere den rem-Wert mit der Root-Schriftgröße in Pixeln. Bei der im Browser üblichen Root-Schriftgröße von 16 px entsprechen 1 rem genau 16 px, 1,5 rem entsprechen 24 px und 2 rem entsprechen 32 px. Wenn dein CSS eine andere Schriftgröße für das html-Element festlegt, trägst du diesen Wert als Root-Schriftgröße ein.

Teile den Pixelwert durch die Root-Schriftgröße. Bei einer Root-Schriftgröße von 16 px entsprechen 24 px beispielsweise 1,5 rem und 10 px entsprechen 0,625 rem. Eine kleinere Root-Schriftgröße ergibt für denselben Pixelwert einen größeren rem-Wert.

Browser setzen die Schriftgröße des Root-Elements html standardmäßig auf 16 px. 1 rem bezieht sich immer auf genau diese Root-Schriftgröße. Ändert ein Stylesheet oder eine Benutzereinstellung den Wert, ändert sich auch die Umrechnung. Trage deshalb die tatsächlich verwendete Root-Schriftgröße ein.

Wenn du die Root-Schriftgröße auf 62,5 % des Browserstandards setzt, ergibt sich bei einem Standardwert von 16 px eine Root-Schriftgröße von 10 px. Dann entsprechen 1,6 rem genau 16 px und 2,4 rem genau 24 px. Der Trick vereinfacht Kopfrechnungen, ändert aber nicht das Prinzip der rem-Einheit.

rem bezieht sich immer auf die Schriftgröße des Root-Elements html. em bezieht sich dagegen auf die Schriftgröße des jeweiligen Elternelements und kann sich bei verschachtelten Elementen mehrfach auswirken. rem bleibt dadurch im gesamten Dokument leichter vorhersehbar. Dieser Rechner verwendet rem und benötigt deshalb nur eine Root-Schriftgröße.

rem passt sich der bevorzugten Schriftgröße des Browsers und der Zoomstufe an. Dadurch unterstützt die Einheit Einstellungen für bessere Lesbarkeit. Pixel bleiben unabhängig davon fest. Viele Websites verwenden rem für Schriftgrößen und Abstände, während Pixel für feine Rahmen oder andere bewusst feste Details sinnvoll sein können.