CSS-Einheitenkonverter (px ↔ rem ↔ em ↔ pt)

Konvertieren Sie zwischen CSS-Einheiten. Legen Sie die Stammschriftgröße Ihres Projekts für genaue rem-Berechnungen fest. Ideal für responsive Webentwicklung.

Funktionen

Basis-Schriftgröße einstellbar
px ↔ rem ↔ em ↔ pt
Fertigen CSS-Schnipsel ausgeben

Anleitung

1. Legen Sie die Stammschriftgröße fest (Standard 16px).

2. Geben Sie einen Wert in ein beliebiges Einheitenfeld ein.

3. Alle anderen Einheiten werden automatisch aktualisiert.

Über dieses Werkzeug

Pixel sind leicht zu verstehen, doch rem-Einheiten skalieren mit der bevorzugten Schriftgröße der Nutzer – wichtig für die Barrierefreiheit. Dieser Konverter hält px, rem, em und pt auf Basis einer von Ihnen gewählten Stamm-Schriftgröße synchron – standardmäßig 16px, dem Browserstandard. Geben Sie in ein beliebiges Feld einen Wert ein, und die anderen aktualisieren sich; so übertragen Sie ein in Pixeln geliefertes Design in rem für Ihr Stylesheet oder prüfen, was eine Druckgröße von 12pt auf dem Bildschirm entspricht. Die Umrechnung setzt voraus, dass em auf dieselbe Basisgröße bezogen ist wie rem. Das trifft auf Elemente zu, deren Elternelement die Stamm-Schriftgröße verwendet; verschachtelte Komponenten mit eigener Schriftgröße weichen ab.

Häufig gestellte Fragen

Was ist der Unterschied zwischen rem und em?
rem bezieht sich auf die Schriftgröße des Wurzelelements, 1rem ist also überall auf der Seite gleich groß. em bezieht sich auf die Schriftgröße des Elternelements und multipliziert sich daher in verschachtelten Elementen. Dieser Konverter behandelt em relativ zur eingegebenen Stammgröße.
Warum sollte ich für Schriftgrößen rem statt px verwenden?
Erhöht jemand in den Browsereinstellungen die Standardschriftgröße, wächst Text in rem mit, während Text in px diese Einstellung ignoriert. rem für Schrift und Abstände macht eine Website für Menschen mit Sehschwäche angenehmer.
Wie werden Punkt in Pixel umgerechnet?
CSS definiert 1 Zoll als 96px und als 72pt, 1pt entspricht also 4/3 px (etwa 1,333px). Eine 12pt-Schrift ist demnach 16px groß.
Sollte ich die Stamm-Schriftgröße auf 62.5% setzen?
html { font-size: 62.5% } macht 1rem zu 10px, was das Rechnen vereinfacht, aber den Standardtext verkleinert und überall ausgeglichen werden muss. Viele Teams behalten heute die Standardgröße von 16px und nutzen stattdessen einen Konverter wie diesen.
Entspricht 1px in CSS einem physischen Bildschirmpixel?
Auf Displays mit hoher Pixeldichte nicht. Ein CSS-Pixel ist eine Referenzeinheit; auf einem Gerät mit Pixelverhältnis 2 wird ein CSS-Pixel in jeder Richtung mit zwei physischen Pixeln gezeichnet.

Verwandte Werkzeuge