CSS Rechner
PX EM Rechner und Umwandler
Mit diesem Generator und Kalkulator kannst du Pixel in EM umrechnen und den passenden Gegenwert direkt berechnen. Standard ist die bekannte Basis von 16 Pixeln.
CSS Rechner
PX in EM und EM in PX umrechnen
16 px / 16 = 1 em
1 em * 16 = 16 px
Ergebnis
16 px = 1 em
Standardformel: Pixel geteilt durch Basis ergibt EM. EM mal Basis ergibt Pixel.
Anleitung
So nutzt du dieses Tool
Die folgenden Hinweise erklären die Eingaben, Formeln und typische Entscheidungen rund um den Rechner.
In vielen CSS-Setups liegt die Basis bei 16 Pixeln. Wenn dein Projekt eine andere Root-Font-Size nutzt, trägst du diesen Wert als Basis ein.
Pixel geteilt durch die Basis ergibt den EM-Wert. Beispiel: 24 Pixel geteilt durch 16 Pixel ergeben 1,5 EM.
EM multipliziert mit der Basis ergibt Pixel. Das ist praktisch, wenn du relative Werte aus einem Designsystem wieder prüfen möchtest.
Leistungen & Services
Von Shop-Systemen bis Marketing, hier findest du unsere Schwerpunkte im Überblick.
PX, EM und REM: warum relative CSS-Einheiten im Alltag wichtig sind
Der PX EM Rechner von HosonoDE übersetzt Pixelwerte in EM und zurück. Das ist besonders hilfreich in Designsystemen, Komponentenbibliotheken und Shop-Themes, wo Abstände und Schriftgrößen oft zuerst in Pixel angelegt werden, im Code dann aber relativer eingebunden sein sollen.
EM bezieht sich auf die Schriftgröße des aktuellen Elements beziehungsweise des Kontexts. Über die gemeinsame Basis lässt sich schnell prüfen, ob ein gewünschtes Raster in relativen Einheiten halbwegs stabil wirkt.
Was du mit diesem Rechner konkret löst
- Du gehst vom Standard-Setup mit 16 Pixel Root-Schrift aus oder trägst die reale Basis deines Themes ein.
- Du rechnest Buttons, Heading-Abstände, Grid-Zellen oder Media-Queries um, ohne Zwischenstände manuell zu teilen oder zu multiplizieren.
- Du dokumentierst Entscheidungen für Kolleginnen und Kollegen, wenn Komponenten ein gemeinsames Raster nutzen müssen.
Typische Arbeitsschritte in Shopware- oder Shopify-Themes
Viele Frontend-Teams starten mit Figma-, Sketch- oder Design-Handoffs in Pixel. Beim Übertrag in Twig, Liquid oder CSS helfen konsistente EM-Werte, Breakpoints später feiner zu justieren als bei rein festen Pixelwerten überall auf der Seite.
Bitte denk daran: dieses Tool ersetzt keine Prüfung im echten Browser. Kontrast, Line-Height, Container-Queries und eingebettete Schriftfamilien können die wahrgenommene Größe stärker beeinflussen als die bloße Umrechnung einer Zahl.
Qualitätsorientierte Nutzung
- Leg die Basis dokumentiert fest (beispielsweise über
:rootoder Theme-Tokens). - Nutze den Rechner als Referenz beim Review von Pull Requests, nicht als einzige Quelle für Barrierefreiheit.
- Kombiniere relative Typografie mit sinnvollen Mindestgrößen für Touch-Targets und Lesbarkeit.