PX-zu-REM-Umrechner (und REM zu PX)
Rechnen Sie px sofort in rem um und umgekehrt. Passen Sie die Root-Schriftgröße an Ihr Projekt an und sehen Sie das Ergebnis in Echtzeit. Kostenlos, ohne Anmeldung.
PX-zu-REM-Tabelle (Basis 16px)
Gängige px-Werte umgerechnet in rem, ausgehend von der Standard-Root-Schriftgröße von 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Tipps
- Standardmäßig entspricht 1rem 16px, aber sehbehinderte Nutzer erhöhen oft die Standardtextgröße ihres Browsers: rem-basierte Werte folgen dieser Einstellung automatisch, px-basierte Werte nicht.
- Breakpoints in Media Queries werden traditionell in px angegeben, aber font-size, padding und margin eignen sich gut für rem, damit das Gesamtlayout ausgewogen bleibt, wenn Nutzer ihre Textgrößeneinstellung ändern.
- Manche Teams legen html { font-size: 62.5%; } fest, sodass 1rem 10px entspricht und das Kopfrechnen einfacher wird (1,6rem = 16px). Geben Sie oben 10 als Basiswert ein, um mit dieser Konvention umzurechnen.
- Eine gängige Konvention ist, rem für Layout-Werte auf Seitenebene und em für den inneren Abstand einer wiederverwendbaren Komponente zu verwenden, damit die Komponente überall entsprechend ihrer eigenen Schriftgröße skaliert.
Häufig gestellte Fragen
Übrigens – Wie rem in die CSS-Spezifikation aufgenommen wurde
Die Einheit rem wurde um 2011 in das CSS-Modul Values and Units aufgenommen. Zuvor bemaßen fast alle Websites Text und Abstände mit px oder em, und em hatte ein bekanntes Problem: Da es sich auf die font-size des übergeordneten Elements bezieht, summierte sich die tatsächliche Größe bei verschachtelten Elementen in komplexen Layouts oft unvorhersehbar.
rem wurde genau zur Lösung dieses Problems entwickelt, indem es sich stets auf einen einzigen, immer verfügbaren Bezugspunkt bezieht: das Wurzelelement, unabhängig von der Verschachtelungstiefe. In den Jahren, als der Internet Explorer 9 rem noch nicht unterstützte, schrieb man üblicherweise zunächst einen px-Wert als Fallback und danach den rem-Wert (font-size: 16px; font-size: 1rem;). Nachdem die wichtigsten Browser Mitte der 2010er Jahre nachgezogen hatten, wurde dieser Fallback überflüssig.
Heute ist es eine gängige Praxis der Barrierefreiheit, die gesamte Typografie- und Abstandsskala einer Website um rem aufzubauen: So kann sich die gesamte Seite elegant vergrößern, wenn ein Besucher die Textgröße seines Browsers erhöht, statt zu brechen oder Inhalte abzuschneiden. Richtlinien wie die WCAG (Web Content Accessibility Guidelines) empfehlen ausdrücklich, sich bei der Textgröße nicht ausschließlich auf feste Einheiten zu verlassen.