Tokenlabor

px in rem umrechnen

px in rem umrechnen und zurück: Pixel durch die Basisgröße teilen, mit Tabelle gängiger Werte und Umwandlung ganzer CSS-Dateien von px in rem.

–

 

PixelremBeispiel

Ganze CSS-Datei umrechnen

CSS mit px
CSS mit rem

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

px in rem: Formel und Praxis

px in rem umrechnen ist einfach: Pixelwert geteilt durch die Basisgröße. Die Basisgröße ist die Root-Schriftgröße, also die Schriftgröße des html-Elements, in fast allen Browsern ab Werk 16 Pixel. 24 px sind damit 1,5 rem, 12 px sind 0,75 rem. Umgekehrt rechnen Sie rem in px, indem Sie mit der Basisgröße malnehmen. Der Rechner arbeitet in beide Richtungen, die Tabelle zeigt gängige Werte.

Warum überhaupt Pixel in rem umwandeln? Wer im Browser eine größere Standardschrift einstellt, bekommt bei Angaben in rem automatisch größere Texte und Abstände; feste Pixel ignorieren diese Einstellung. Die em-Einheit bezieht sich dagegen auf die Schriftgröße des jeweiligen Elternelements und verschachtelt sich, was schnell unübersichtlich wird. rem bezieht sich immer auf die Wurzel und bleibt berechenbar.

Der Umwandler für ganze Dateien ersetzt jede Pixelangabe in Ihrem CSS durch rem. 1px-Werte für feine Rahmen bleiben auf Wunsch stehen, weil sie bei Vergrößerung meist dünn bleiben sollen. Grenzen: Er erkennt keine Pixel in Kommentaren oder Zeichenketten als Sonderfall und rechnet sie mit um. Media-Queries in rem beziehen sich auf die Standardschrift des Browsers, nicht auf eine geänderte html-Schriftgröße.

Anleitung: px in rem in 4 Schritten

  1. Die „Basisgröße (Root-Schriftgröße) in px“ eintragen, meist 16.
  2. Einen Wert in das Feld „Pixel (px)“ oder „rem“ eingeben; die andere Einheit wird sofort berechnet.
  3. Unter „Nachkommastellen“ die gewünschte Genauigkeit wählen und gängige Werte in der Tabelle ablesen.
  4. Für ganze Stylesheets das CSS mit px einfügen, „1px-Werte behalten“ nach Bedarf setzen und das CSS mit rem kopieren.

Typische Anwendungsfälle

  • Design aus Figma umsetzen: Pixelangaben aus dem Entwurf in rem für ein barrierearmes Stylesheet übertragen.
  • Altes CSS modernisieren: Eine komplette Datei mit festen Pixeln auf einmal in rem umwandeln.
  • Typografie-Skala festlegen: Schriftgrößen wie 14, 18 und 24 px als rem-Werte für ein Designsystem berechnen.
  • Abweichende Basis: Bei einem Projekt mit anderer Root-Schriftgröße die passenden rem-Werte ermitteln.
Fragen

Häufige Fragen

Wie rechne ich px in rem um?

Teilen Sie den Pixelwert durch die Basisgröße. Bei 16 px Standardgröße sind 32 px also 2 rem und 14 px sind 0,875 rem.

Wie rechne ich rem in px um?

Multiplizieren Sie den rem-Wert mit der Basisgröße. 1,25 rem sind bei 16 px Basis 20 px.

Was ist die Root-Schriftgröße?

Die Schriftgröße des html-Elements. Ohne eigene Angabe übernimmt sie die Standardschrift des Browsers, meist 16 px. Wer html auf 62,5 Prozent setzt, rechnet mit 10 px Basis, überschreibt damit aber die Nutzereinstellung nicht, sondern skaliert sie.

Was ist der Unterschied zwischen rem und der em-Einheit?

rem bezieht sich immer auf die Schriftgröße des html-Elements. em bezieht sich auf die Schriftgröße des Elements selbst beziehungsweise des Elternelements und multipliziert sich bei Verschachtelung.

Sollte ich alles in rem angeben?

Für Schriftgrößen, Abstände und Breiten von Textblöcken ist rem sinnvoll. Feine Rahmen von 1 px und Schatten bleiben oft in Pixeln, weil sie nicht mitwachsen sollen.

Wie rechne ich px in em um?

Den Pixelwert durch die Schriftgröße des Bezugselements teilen. Bei font-size ist das die Schriftgröße des Elternelements, bei anderen Eigenschaften wie padding die Schriftgröße des Elements selbst.

Wie rechne ich px in pt um?

In CSS gelten 96 Pixel pro Zoll und 72 Punkt pro Zoll, also ist 1 px gleich 0,75 pt. 16 px entsprechen damit 12 pt.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen