px in rem umwandeln
Dieser Umrechner wandelt CSS-Pixel in rem und rem zurück in Pixel um. Der Standardwert ist 16 px für 1 rem, wie in vielen Browser-Grundeinstellungen. Die Basisschriftgröße kann angepasst werden, damit Designsysteme, Themes und barrierearme Layouts korrekt gelesen werden.
CSS-Formel mit Root-Wert
rem bezieht sich auf die Schriftgröße des Root-Elements. Bei 16 px gilt rem = px ÷ 16. Wird die Root-Schriftgröße verändert, ändert sich die Umwandlung entsprechend.
Für deutsche Websites, Shops und redaktionelle Layouts ist rem sinnvoll, weil Nutzereinstellungen und responsive Typografie besser berücksichtigt werden können. Pixel bleiben für exakte Abstände, Grafiken und Grenzwerte weiterhin gebräuchlich.
Letzte Umwandlungen
Die Liste speichert ausgewählte Größen wie Schriftgrade, Abstände oder Komponentenmaße.
Beispiele aus CSS
24 px Überschrift
Ansatz: 24 ÷ 16 = 1,5
Ergebnis: 24 px = 1,5 rem.
Ein typischer Schriftgrad lässt sich so skalierbar notieren.
32 px Abstand
Ansatz: 32 ÷ 16 = 2
Ergebnis: 32 px = 2 rem.
Abstände bleiben an die Root-Schriftgröße gekoppelt.
1,25 rem zurück
Ansatz: 1,25 × 16 = 20
Ergebnis: 1,25 rem = 20 px.
Die Rückrichtung hilft beim Abgleich mit Designvorgaben.
Tabelle px in rem bei 16 px Root
| px | rem | Einordnung |
|---|---|---|
| 1 | 0,0625 | Ein einzelner Pixel als rem-Bruchteil. |
| 2 | 0,125 | Sehr kleiner Wert. |
| 4 | 0,25 | Kleiner Abstand oder Border-Kontext. |
| 8 | 0,5 | Halbes rem. |
| 10 | 0,625 | Kompakter Text- oder Spacing-Wert. |
| 12 | 0,75 | Kleine Schriftgröße. |
| 14 | 0,875 | Zwischenwert für UI-Text. |
| 16 | 1 | Exakt 1 rem. |
| 18 | 1,125 | Leicht größere Standardschrift. |
| 20 | 1,25 | 1,25 rem, häufig in Typografie. |
| 24 | 1,5 | 1,5 rem, typische Überschrift. |
| 32 | 2 | 2 rem für große Abstände. |
| 48 | 3 | 3 rem, deutlicher Layoutwert. |
| 64 | 4 | 4 rem, große Komponente oder Abstand. |
Beliebte Umwandlungen
| Suche | Ergebnis | Kontext |
|---|---|---|
| 16 px in rem | 1 rem | Basiswert bei 16 px Root. |
| 24 px in rem | 1,5 rem | Häufige Überschrift. |
| 32 px in rem | 2 rem | Großer Abstand. |
| 12 px in rem | 0,75 rem | Kleiner UI-Text. |
| 1 rem in px | 16 px | Rückrichtung des Standards. |
| 1,25 rem in px | 20 px | Gängiger Schriftwert. |
| 1,5 rem in px | 24 px | Überschrift oder Abstand. |
| 2 rem in px | 32 px | Großer Layoutwert. |
px und rem einordnen
px ist eine direkte CSS-Längeneinheit. Sie eignet sich für präzise Grenzlinien, feste Maße und Abgleich mit Designentwürfen.
rem ist relativ zur Root-Schriftgröße. Dadurch reagieren Schriftgrößen und Abstände besser auf Nutzereinstellungen und globale Theme-Anpassungen.
Wenn ein Projekt eine andere Root-Größe als 16 px nutzt, ändern Sie den Wert im Eingabefeld. Sonst entstehen falsche rem-Werte.
Verwandte CSS-Einheiten
| Einheit oder Thema | Beziehung | Hinweis |
|---|---|---|
| px | absoluter CSS-Pixel | Direkte Layoutangabe. |
| rem | abhängig vom Root-Wert | Skalierbare Typografie. |
| em | abhängig vom Elementkontext | Nicht identisch mit rem. |
| % | relative Angabe | Für flexible Layouts. |
| vw und vh | Viewport-bezogen | Responsive Flächen. |
| pt | Drucknahe Einheit | Im Web seltener. |
| Root-Font-Size | oft 16 px | Basis für rem. |
| Barrierefreiheit | Nutzerpräferenz zählt | rem unterstützt Skalierung. |
Hinweise für Designsysteme
In einem Designsystem sollte klar dokumentiert sein, welche Root-Schriftgröße angenommen wird. Viele Teams nutzen 16 px, manche setzen 10 px für einfachere Kopfreihen oder passen den Wert über responsive Regeln an. Der Umrechner macht diese Annahme sichtbar.
rem eignet sich nicht nur für Schriftgrößen. Auch Spacing, Radius oder Komponentenabstände können in rem notiert werden, wenn sie mit der Textskalierung wachsen sollen. Für Haarlinien, Pixelgrafiken oder exakte Medienmaße bleibt px häufig die bessere Wahl.
Bei Barrierefreiheit ist rem meist hilfreicher, weil Nutzereinstellungen stärker respektiert werden. Trotzdem sollte das Layout getestet werden, wenn die Root-Schriftgröße steigt. Lange deutsche Wörter, Buttons und Formulare brauchen genug Platz.
Vertiefung für responsive Gestaltung
px und rem wirken im Designalltag ähnlich, erfüllen aber unterschiedliche Aufgaben. Pixel sind direkt und eignen sich gut für exakte Abgrenzungen, Bildgrößen oder technische Mindestmaße. rem bindet Werte an die Root-Schriftgröße und unterstützt dadurch skalierbare Oberflächen.
In deutschen Websites mit langen Wörtern ist skalierbare Typografie besonders wichtig. Wenn Nutzende die Standardschrift vergrößern, sollten Buttons, Formulare und Abstände nicht sofort brechen. rem kann helfen, Proportionen beizubehalten. Trotzdem müssen Komponenten bei mehreren Schriftgrößen geprüft werden, weil Layoutbreite und Wortlängen weiterhin Grenzen setzen.
Ein Designsystem sollte seine Basis offen nennen. Bei 16 px ist 1,5 rem gleich 24 px. Wird die Root-Größe auf 10 px gesetzt, hätte 1,5 rem nur 15 px. Ohne diese Information sind rem-Werte schwer vergleichbar. Der Umrechner macht die Annahme sichtbar und erlaubt schnelle Gegenprüfung.
Plausibilitätsprüfung für rem-Werte
Bei einer Root-Schriftgröße von 16 px entspricht 16 px genau 1 rem. 32 px werden zu 2 rem, 8 px zu 0,5 rem. Diese einfachen Werte sind gute Kontrollpunkte. Wenn 24 px nicht bei 1,5 rem landet, wurde vermutlich eine andere Root-Größe verwendet. Das kann im Projekt korrekt sein, muss aber dokumentiert werden. Für Designübergaben sollte daher immer sichtbar sein, ob die Werte auf 16 px, 10 px oder einer anderen Basis beruhen.
Zusätzlicher CSS-Abgleich
Vor der Übergabe an Entwicklung oder Redaktion sollte geprüft werden, ob alle rem-Werte aus derselben Root-Annahme stammen. Einzelne Komponenten können sonst optisch aus der Reihe fallen. Besonders bei responsiven Breakpoints ist es sinnvoll, Schriftgrößen, Abstände und Buttonhöhen gemeinsam zu betrachten. Ein rem-Wert allein sagt noch nicht, ob die Komponente bei langen deutschen Texten stabil bleibt.
Häufige Fragen
F: Wie wird px in rem umgewandelt?
A: Teilen Sie px durch die Root-Schriftgröße, häufig 16.
F: Wie viele px sind 1 rem?
A: Bei 16 px Root sind 1 rem genau 16 px.
F: Kann die Root-Schriftgröße anders sein?
A: Ja. Ändern Sie den Wert im Zusatzfeld.
F: Warum rem statt px verwenden?
A: rem unterstützt skalierbare Typografie und globale Anpassungen.
F: Darf px negativ sein?
A: Für manche CSS-Werte ja, etwa Verschiebungen. Der Umrechner akzeptiert deshalb negative px-Werte.
F: Ist em dasselbe wie rem?
A: Nein. em hängt vom aktuellen Element ab, rem vom Root-Element.