Warum rem statt px
In modernen Webprojekten werden Größen häufig in rem angegeben statt in Pixeln. Eine rem-Einheit entspricht der Schriftgröße des Wurzelelements, im Browser meist 16 Pixel. Wer 1,5 rem schreibt, erhält 24 Pixel. Der Vorteil: Nutzer, die die Schriftgröße im Browser vergrößern, bekommen eine skalierende Seite, was die Barrierefreiheit verbessert.
Der Rechner wandelt einen Pixelwert in rem um, zeigt den gleichen Wert als em bei identischer Basis, in Punkt für den Druck, in Prozent und in Millimetern bei 96 Pixeln pro Zoll. So können Sie Entwürfe aus Designprogrammen, die in Pixeln arbeiten, in flexible CSS-Einheiten übertragen.
Die Basisschriftgröße lässt sich anpassen, falls Ihr Projekt vom Standard abweicht. Manche Entwickler setzen die Wurzelgröße auf 62,5 Prozent, sodass 1 rem genau 10 Pixeln entspricht und die Umrechnung im Kopf leichter fällt.
rem, em und Pixel im Einsatz
Der Unterschied zwischen rem und em ist wichtig: rem bezieht sich immer auf die Wurzelschriftgröße, em auf die Schriftgröße des umgebenden Elements. Verschachtelte em-Angaben multiplizieren sich und führen leicht zu unerwarteten Größen, deshalb sind rem für Schriftgrößen und Abstände meist die berechenbarere Wahl.
Pixel sind im CSS keine Bildschirmpunkte, sondern eine feste Referenzeinheit von einem 96stel Zoll. Auf hochauflösenden Bildschirmen werden mehrere Gerätepixel für ein CSS-Pixel genutzt. Für Rahmen, Schatten und sehr feine Details sind Pixel weiterhin üblich, für Text und Layout werden relative Einheiten empfohlen.
Der Punkt (pt) stammt aus dem Druck und entspricht einem 72stel Zoll. Deshalb sind 12 pt gleich 16 Pixel. Für Druckvorlagen und Dokumente sind Punkt und Millimeter geläufiger, für Bildschirme Pixel und rem.
Weitere Umrechnungen zwischen Längen finden Sie im Längen-Umrechner. Wenn Sie Bildgrößen für Druck und Bildschirm planen, hilft der Papierformat-Rechner mit Pixeln bei verschiedenen Auflösungen.
Beim Umsetzen eines Designs lohnt sich eine kleine Tabelle der wichtigsten Größen, etwa 12, 14, 16, 20, 24 und 32 Pixel in rem. So bleibt die Typografie einheitlich, und Änderungen der Basisschriftgröße wirken sich überall gleichmäßig aus. Prüfen Sie das Ergebnis in verschiedenen Browsern und bei vergrößerter Schrift, damit das Layout nicht bricht.
Tipps und typische Fehler
CSS-Einheiten wählen.
- rem: Für Schrift und Abstände.
- Pixel: Für Linien und Details.
- Basis: Meist 16 Pixel.
- Barrierefrei: Skalierung zulassen.
Weitere Rechner: Beruf & Arbeitszeit
- Passwort-Entropie-Rechner
- Subnetz-Rechner
- Stundenlohn-Rechner
- Arbeitszeitrechner
- Überstunden-Rechner
- Urlaubstage-Rechner
- Gehaltserhöhung-Rechner
- Kündigungsfrist-Rechner
Alle Rechner dieser Kategorie oder alle Rechner A–Z.
Auch gesucht als
Dieser Rechner hilft bei diesen und ähnlichen Fragen:
- px in rem
- Pixel in rem umrechnen
- rem in px
- px in em
- px in pt
- CSS Einheiten umrechnen
Häufige Fragen
Wie viele Pixel sind 1 rem?
Standardmäßig 16 Pixel, abhängig von der Basisschriftgröße.
Was ist der Unterschied zwischen em und rem?
em bezieht sich auf das übergeordnete Element, rem auf das Wurzelelement.
Wie viele Punkt sind 16 Pixel?
12 Punkt.
Wie viele px sind 1 rem?
Standardmäßig 16 Pixel.
Warum rem benutzen?
Weil es mit der Schriftgröße im Browser skaliert.
Alle Berechnungen erfolgen direkt in Ihrem Browser, Ihre Eingaben werden nicht übertragen oder gespeichert. Die Ergebnisse sind Orientierungswerte ohne Gewähr und ersetzen keine steuerliche, rechtliche oder finanzielle Beratung. Letzte inhaltliche Änderung dieser Seite: . Mehr dazu: So entstehen und prüfen wir die Rechner.