PX-REM-EM Rechner
Spare Zeit und Probleme mit dem Multi-Level REM/EM Einheiten Rechner für deine Website Projekte.
Was sind REM und EM?
Sowohl REM (Root EM) als auch EM sind relative CSS Einheiten, die primär für Schriftgrößen und Abstände verwendet werden.
- REM beziehen sich immer auf die Schriftgröße des Root-Elements (
<html>). Diese zentrale Referenz sorgt für einheitliche Größen über die gesamte Website hinweg. - EM beziehen sich auf die Schriftgröße des aktuellen Elements. In verschachtelten Strukturen wird der Wert mit jeder übergeordneten Ebene multipliziert, wodurch sich Komponenten proportional skalieren lassen.
Der Einsatz dieser Einheiten anstelle fester Pixelwerte macht Designs barrierefrei, mobile-friendly und leichter zu pflegen.
Wie verwende ich diesen Rechner?
Root-Schriftgröße Modul
Hier legst du die Root-Schriftgröße fest, auf der alle REM- und EM-Berechnungen basieren. Trage einfach die gewünschte Größe in Pixel ein oder wähle eine der Voreinstellungen.
Der Standartwert für die Root Schriftgröße beträgt meist 16px
Einheiten-Konverter
Dieses Modul rechnet schnell zwischen REM/EM und Pixel Einheiten um, und erspart dir den manuellen Denkaufwand.
- Modus auswählen
- REM Modus: Umrechnungen basierend auf der Root-Schriftgröße
- EM Modus: Umrechnung auf Basis des aktiven Kontext-Levels (markiert mit blauem Icon in der Tabelle).
- Gib deinen REM/EM oder Pixelwert ein. Der Rechner funktioniert in beide Richtungen und aktualisiert alle anderen Felder automatisch.
EM Skalierungs-Tracker
Die Tabelle zeigt, wie EM-Werte in verschachtelten Elementen skaliert werden. Damit lassen sich einfach unerwartet Größen nachvollziehen und Komponenten gezielt gestalten.
- “Ebene hinzufügen”: Erstelle eine weitere Ebene in der Tabelle, die ein verschachteltes Element darstellt.
- Für jede Ebene kannst du die Schriftgröße in EM festlegen. Der Rechner berechnet automatisch den entsprechenden REM- und Pixelwert.
- Kontext-Button (Zielscheibe): Markiert die Ebene als Referenz für den Einheiten-Konverter. Das aktuell aktive Level wird durch ein blaues Icon hervorgehoben.
- Entfernen-Button (Mülleimer): Löscht die Ebene und schließt sie aus den Berechnungen aus.
Ein Beispiel: Der Rechner in Aktion
- Setze die Root-Schriftgröße entsprechend deines Projekts
- Nutze den Einheiten-Konverter im REM-Modus um globale Elemente wie Überschriften oder Abstände umzurechnen
- Wechsel in den EM-Modus und baue die Verschachtelung deiner Komponenten in der Tabelle nach, um die exakten Einheiten jedes Elements zu sehen.
- Nutze das Kontext-Feature um aus der Perspektive von verschiedenen Elementen zu rechnen
- Kopiere den generierten CSS-Code als zukünftige Referenz
Mehr Tools, mehr Know-how, für dein Postfach
Erhalte Updates, Tools, Veröffentlichungen und frische Tipps jede Woche bequem per E-Mail.