Zum Inhalt springen
Unicorn Factory
Jetzt anfragen

Kostenloser Rechner · CSS-Einheiten

PX / REM / EM Rechner & CSS-Code-ConverterWerte, Stylesheets und clamp().

Rechnet px, rem und em ineinander um, stellt ganzen CSS-Code um und baut fließende Schriftgrößen. Selektoren, Bildpfade und Kommentare bleiben unberührt.

Häufig:

24 px sind

1.5rem

24 px ÷ 16 = 1,5 rem

px
24px
rem
1.5rem
em
1.5em
Alle Formate, Tabelle und Kaskade ↓

16 px, wenn Ihr CSS nichts setzt. Auch 62,5 % geht.

Für font-size in em. Für padding in em zählt die eigene Schrift.

  • Kostenlos
  • Ohne Anmeldung
  • Rechnet im Browser, Ihr Code verlässt das Gerät nicht
Unicorn Factory · unicorn-factory.net · 2.10.2026

Befund · 24 px

Ergebnis für 24 px: 24 px sind 1,5 rem.Und 1,5 em bei 16 px Eltern-Schrift.

rem rechnet mit der Schrift des html-Elements, em mit der Schrift des Elements selbst. Nur bei font-size in em zählt die Schrift des Eltern-Elements.

Pixel
24pxIhre Eingabe
Fest, wächst nicht mit der Browser-Schrift
rem
1.5rem24 ÷ 16 (Root-Schriftgröße)
Folgt der Browser-Einstellung
em
1.5em24 ÷ 16 (Schrift des Elements)
Hängt vom Element ab, siehe Kaskade

Zum Kopieren

1.5rem als Wert, Deklaration, Variable oder Tailwind

Wert1.5rem
Schriftgrößefont-size: 1.5rem;
Innenabstandpadding: 1.5rem;
Mit px als Kommentarfont-size: 1.5rem; /* 24px */
CSS-Variable--size-24: 1.5rem;
Tailwind-Klasse (setzt auch line-height)text-2xl
Tailwind-Abstandp-6

Barrierefreiheit

Was Besucher mit größerer Schrift sehen

In Chrome lässt sich die Schriftgröße auf „Groß“ stellen, das sind 20 statt 16 px. rem-Werte wachsen mit, px-Werte nicht.

In rem: 1.5rem

30 pxstatt 24 px

In px: 24px

24 pxbleibt gleich

WCAG 1.4.4 (Stufe AA) verlangt, dass sich Text ohne Hilfsmittel auf 200 % vergrößern lässt. Seit dem 28.06.2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz für viele Online-Shops und digitale Dienste für Verbraucher. Ob es Sie betrifft, hängt von Angebot und Unternehmensgröße ab. Das ist keine Rechtsberatung.

em-Kaskade

Warum sich em aufschaukelt

Drei ineinander liegende Elemente, jedes mit font-size: 1.5em, bei 16 px Eltern-Schrift. Jede Ebene rechnet mit der Schrift der Ebene darüber. Mit 1.5rem bliebe jede Ebene bei 24 px.

Ebene 1: 24 px, Ebene 2: 36 px, Ebene 3: 54 px.

Darstellung auf 10 bis 44 px begrenzt, die Zahlen stimmen.

Umrechnungstabelle

Gängige Werte bei 16 px Root und 16 px für em

Ein Klick übernimmt den Wert oben. Tailwind: Schriftklasse oder Abstandsstufe, wenn sie exakt passt.

Eigene Skala als CSS-Variablen oder für Tailwind exportieren
:root {
  --space-4: 0.25rem; /* 4px */
  --space-8: 0.5rem; /* 8px */
  --space-12: 0.75rem; /* 12px */
  --space-16: 1rem; /* 16px */
  --space-24: 1.5rem; /* 24px */
  --space-32: 2rem; /* 32px */
  --space-48: 3rem; /* 48px */
  --space-64: 4rem; /* 64px */
  --space-96: 6rem; /* 96px */
}

Wenn Sie es nicht selbst bauen wollen

Saubere Einheiten sind Handwerk.

Wir bauen Websites, die bei jeder Schriftgröße funktionieren.

Ein System statt Einzelwerte · Barrierefrei von Anfang an · Gebaut und betreut
  • Ein System statt EinzelwerteAbstände und Schriften als Skala in rem. Eine Änderung wirkt auf der ganzen Website.
  • Barrierefrei von Anfang anText wächst mit der Browser-Einstellung, Kontraste und Bedienung nach WCAG.
  • Gebaut und betreutWir entwickeln das Frontend, testen es und pflegen es nach dem Start, wenn Sie wollen.
Website erstellen lassen

Persönliche Antwort von Florian Konrad oder Daniel Haenle.

Ratgeber

Ratgeber: PX/REM/EM Rechner

Viele Websites wirken uneinheitlich, weil Abstände, Schriftgrößen und Layoutwerte mit unterschiedlichen CSS-Einheiten durcheinandergewürfelt wurden. Besonders in modernen, responsiven Layouts führt das schnell zu Inkonsistenzen. Wer sauber arbeiten will, sollte verstehen, wie px, rem und em funktionieren – und warum eine zentrale Base Font Size so wichtig ist.

Tipp: Ein konsistentes Einheitensystem sorgt für bessere Skalierbarkeit, Barrierefreiheit und ein vorhersagbares Design.

Kurzzusammenfassung

  • px ist absolut, rem und em sind relative Einheiten.
  • rem bezieht sich auf die Root-Font-Size, em auf das jeweilige Eltern-Element.
  • Eine klare Base Font Size macht Layouts konsistent und skalierbar.
  • Tools zur Umrechnung verhindern Fehler und erleichtern Refactoring.
  • Für responsive Projekte sind rem-Werte meist die beste Wahl.
Daniel HaenleErreichbar an: Montag, Dienstag, Mittwoch, Donnerstag, Freitag (jeweils zwischen 9 – 18 Uhr)Daniel HaenleGründer & Ihr Ansprechpartner

Erreichbar Montag–Freitag, 9–18 Uhr

Haben Sie Fragen oder benötigen Hilfe beim Thema „PX/REM/EM Rechner“?

Unsere Full-Service-Agentur steht Ihnen bei Fragen und der Umsetzung zur Seite. Zögern Sie nicht, uns zu kontaktieren: persönlich, nicht per Bot.

Jetzt einfach Kontakt aufnehmen

Abschnitt 1: Grundlagen der CSS-Einheiten

Wenn Websites skalierbar sein sollen, sind relative Einheiten unverzichtbar. Während px einen festen Pixelwert beschreibt, passen rem und em sich an die gewählte Typografie an. Dadurch bleiben Layouts unabhängig von Geräteauflösungen oder Nutzereinstellungen flexibel.

Ein Beispiel:
Wenn der Browser auf 16px Basisschriftgröße eingestellt ist, entspricht 1rem = 16px.
Wird die Basis geändert, skaliert das gesamte Design automatisch mit.

Abschnitt 2: Typische Szenarien in Projekten

Viele Entwicklerinnen und Entwickler erleben ähnliche Situationen:

1. Vermischte Einheiten im Code
Schriftgrößen in px, Abstände in rem, Margins in em. Das führt zu unvorhersehbaren Layouts.

2. Unerwartete Verdopplungen bei em
em-Werte addieren sich über Eltern-Elemente.
Beispiel: Wenn ein Container mit font-size: 1.25em verschachtelt ist, kann padding: 2em plötzlich viel größer ausfallen als erwartet.

3. Barrierefreiheit leidet
Wer px nutzt, um Schriftgrößen festzulegen, blockiert Nutzereinstellungen für größere Fonts – ein klares Accessibility-Problem.

4. Media Queries skalieren nicht mit
px-basierte Breakpoints passen sich nicht an die Root-Font-Size an. Dadurch entstehen Layout-Sprünge.

Abschnitt 3: Sofortmaßnahmen / schnelle Lösungen

  • Einheitensystem festlegen: Ideal: 100% / 16px als Root-Font-Size.
  • Schriftgrößen mit rem definieren: Einheitlich und skalierbar.
  • Abstände ebenfalls in rem halten: So wächst das gesamte Layout proportional.
  • em nur für Ausnahmefälle nutzen: Z. B. Buttons, die relativ zum eigenen Text wachsen sollen.
  • Code automatisiert umrechnen lassen: Spart Zeit und verhindert Flüchtigkeitsfehler.

Kurz gesagt: Nutzen Sie rem für Konsistenz, em für lokale Effekte und px nur für Linien, Icons oder exakte Werte.

Abschnitt 4: Schritt-für-Schritt-Vorgehen

Schritt 1: Base Font Size festlegen

  • Standard in Browsern: 16px
  • Alternativ: 62.5% (ergibt 10px = 1rem, beliebt in Design-Systemen)

Schritt 2: px → rem umrechnen

Formel:
Wert in px ÷ Base Font Size = rem-Wert

Beispiele:

  • 16px → 1rem
  • 8px → 0.5rem
  • 24px → 1.5rem

Schritt 3: Code konsolidieren

  • Alle Schriftgrößen auf rem umstellen
  • Abstände (Padding, Margin, Gap) auf rem setzen
  • Breakpoints optional in rem umrechnen (bessere Accessibility)

Schritt 4: Automatische Tools nutzen

Ein Online-Tool oder Konverter spart Zeit:

  • erkennt px-, rem- und em-Werte
  • wandelt komplette CSS-Dateien um
  • funktioniert sogar in calc(), negativen Werten und Media Queries
  • Formatierung bleibt erhalten

Schritt 5: Projektweite Regeln definieren

  • Einheitensystem in einem Style-Guide dokumentieren
  • Kleines Utility-System erstellen (z. B. --space-1: 0.5rem;)

Abschnitt 5: Typische Fehler vermeiden

  • em für globale Werte verwenden: führt zu unberechenbaren Verschachtelungen.
  • px als Standard für Typografie nutzen: erschwert Skalierung.
  • Inkonsistente Root-Font-Size im Projekt: sorgt für verwirrte Abstände.
  • Media Queries in px belassen: kann zu falschen Breakpoints führen.
  • 0-Werte mit Einheiten schreiben: 0rem ist unnötig, 0 reicht.
Daniel HaenleErreichbar an: Montag, Dienstag, Mittwoch, Donnerstag, Freitag (jeweils zwischen 9 – 18 Uhr)Daniel HaenleGründer & Ihr Ansprechpartner

Erreichbar Montag–Freitag, 9–18 Uhr

Haben Sie Fragen oder benötigen Hilfe beim Thema „PX/REM/EM Rechner“?

Unsere Full-Service-Agentur steht Ihnen bei Fragen und der Umsetzung zur Seite. Zögern Sie nicht, uns zu kontaktieren: persönlich, nicht per Bot.

Jetzt einfach Kontakt aufnehmen

Abschnitt 6: Langfristige Lösungen & Best Practices

  • Arbeiten Sie mit einem einheitlichen Design-System.
  • Nutzen Sie rem für alle global gültigen Layoutwerte.
  • Dokumentieren Sie Einheiten und Skalierungen im Projekt.
  • Testen Sie Layouts regelmäßig mit vergrößerter Schrift (Accessibility).
  • Lassen Sie größere Projekte von einer Agentur überprüfen, wenn Inkonsistenzen auftreten.

Die Unicorn Factory unterstützt Kundinnen und Kunden bei der Strukturierung von CSS-Systemen, Refactoring von Altprojekten und der Entwicklung skalierbarer Frontend-Architekturen.

Häufige Fragen zu CSS-Einheiten

rem bezieht sich immer auf die Schriftgröße des Root-Elements (html), während em relativ zur Schriftgröße des direkten Eltern-Elements ist. Dadurch ist rem stabiler und vorhersagbarer, em dagegen flexibler, aber manchmal schwerer kalkulierbar.

px eignet sich für exakte Werte wie Border-Stärken, Icons oder schmale Linien. Für Typografie oder Abstände wird px nicht empfohlen, weil es nicht mit skaliert.

rem skaliert sauber, wenn Nutzerinnen und Nutzer die Browser-Schriftgröße erhöhen. px-Werte blockieren diese Anpassung häufig.

In den meisten Browsern entspricht 1rem = 16px. Wird die Root-Font-Size geändert, ändern sich alle rem-Werte entsprechend.

Ja, das kann sinnvoll sein. Breakpoints skalieren dann ebenfalls, wenn Nutzer größere Schriftgrößen eingestellt haben.

px-Wert durch die Root-Font-Size teilen. Beispiel: 24px ÷ 16 = 1.5rem.

Ja, viele Tools können px-, rem- und em-Werte im gesamten Code erkennen und korrekt umwandeln – inklusive Media Queries, calc() und negativen Werten.

em ist nützlich für Elemente, die sich relativ zu ihrer eigenen Schriftgröße skalieren sollen, z. B. Buttons oder Icons im Textfluss.

Das ist verbreitet, weil 1rem dann 10px entspricht. Es vereinfacht Berechnungen, ist aber Geschmackssache.

Wie geht es weiter?

Sie möchten es selbst umsetzen

  • Legen Sie eine konsistente Base Font Size fest.
  • Rechnen Sie alle px-Werte in rem um.
  • Prüfen Sie, wo em sinnvoller ist.
  • Aktualisieren Sie Media Queries bei Bedarf.
  • Testen Sie Ihr Layout mit verschiedenen Schriftgrößen.
  • Nutzen Sie Tools, um Ihren CSS-Code automatisch zu konvertieren.

Sie möchten Unterstützung

Die Unicorn Factory hilft bei:

  • der Analyse Ihrer CSS-Struktur
  • Refactoring von bestehenden Projekten
  • Aufbau skalierbarer Design-Systeme
  • technischer Betreuung und laufender Optimierung
  • professioneller Umsetzung Ihrer Webprojekte
Daniel HaenleErreichbar an: Montag, Dienstag, Mittwoch, Donnerstag, Freitag (jeweils zwischen 9 – 18 Uhr)Daniel HaenleGründer & Ihr Ansprechpartner

Erreichbar Montag–Freitag, 9–18 Uhr

Haben Sie Fragen oder benötigen Hilfe beim Thema „PX/REM/EM Rechner“?

Unsere Full-Service-Agentur steht Ihnen bei Fragen und der Umsetzung zur Seite. Zögern Sie nicht, uns zu kontaktieren: persönlich, nicht per Bot.

Jetzt einfach Kontakt aufnehmen
5/5 · 1 Bewertung
War dieser Beitrag hilfreich?
Florian Konrad

Florian Konrad

Gründer und Digitalisierungs-Experte

Florian Konrad, Mitbegründer und Geschäftsführer der Unicorn Factory, begann bereits in der Schule mit Webentwicklung und Online-Marketing. Mit Jahren der Erfahrung hat er umfassende Expertise in SEO, Automatisierung und Webentwicklung entwickelt.

Alle Beiträge

Weitere Werkzeuge

KontrastrechnerFarbkontrast nach WCAG 2.2 und APCA prüfen, exakt und nie aufgerundet. Mit Vorschlägen, die Ihre Markenfarbe erhalten.Font CheckerWelche Schriften lädt eine Website wirklich? Herkunft, Schnitte, Dateigröße und Datenschutz auf einen Blick.Google Fonts CheckerLädt eine Website Schriften von Google? Startseite und Unterseiten geprüft, mit Fundstelle und fertiger Lösung.Farbpaletten GeneratorFarbpaletten in OKLCH mit Rollen, Abstufungen und Kontrastprüfung. Export für CSS, Tailwind und JSON.Favicon GeneratorFavicon-Paket aus Initialen, Emoji oder Logo: ICO, SVG, Apple- und Android-Icons und Manifest als ZIP.SERP PreviewTitel und Beschreibung in Pixeln messen, für Rechner und Telefon, mit Seitenabruf und Vorschlägen.
Alle Werkzeuge ansehen →

Diesen Rechner haben wir gebaut.Wir bauen auch Ihren.

Rechner oder Konfigurator anfragen