CSS-Einheiten-Umrechner
Zwischen px, rem, em, pt, vw und vh umrechnen, mit einstellbarer Schriftgröße des Wurzelelements, Schriftgröße des Elements und Größe des Anzeigebereichs.
Weiteres Tool ausprobieren
Passend zu diesem Tool ausgewähltDer CSS-Einheiten-Umrechner rechnet einen Wert zwischen px, rem, em, pt, vw und vh um und zeigt alle sechs Ergebnisse auf einmal. Pixel und Punkt sind feste Einheiten, die anderen hängen vom Zusammenhang ab: rem von der Schriftgröße des Wurzelelements, em von der Schriftgröße des Elements selbst, vw und vh von Breite und Höhe des Anzeigebereichs. Diese vier Größen lassen sich deshalb einstellen, voreingestellt sind die Browser-Standardschrift von 16 Pixel und ein üblicher Bildschirm. So stimmt die Umrechnung für das eigene Projekt statt für ein Lehrbuchbeispiel.
So funktioniert das Tool
- 01Wert und Einheit eingebenZum Beispiel 24 und px. Die Umrechnung in alle anderen Einheiten erscheint sofort.
- 02Kontext anpassenSchriftgröße des Wurzelelements, des Elements und die Größe des Anzeigebereichs an das eigene Layout angleichen.
- 03Ergebnis übernehmenDen passenden Wert ablesen und ins Stylesheet übernehmen, etwa 1,5rem statt 24px.
Wann ist das nützlich?
- Designvorlagen in CSS übertragenFigma und andere Werkzeuge liefern Pixel. Für skalierbare Schriften und Abstände werden daraus rem-Werte.
- Responsive Größen planenPrüfen, wie groß 5vw auf einem Smartphone mit 390 Pixel Breite und auf einem Monitor mit 1.440 Pixel tatsächlich ist.
- Druck-StylesheetsFür Druckausgaben in Punkt denken und die passenden Pixelwerte für den Bildschirm ablesen.
Beispiele
- 24 px bei StandardschriftBei 16 Pixel Grundschrift sind 24px genau 1,5rem und 18pt.
- em mit eigener SchriftgrößeHat ein Element 20 Pixel Schrift, entsprechen 24px dort 1,2em.
- vw auf einem breiten BildschirmBei 1.440 Pixel Breite ist 1vw genau 14,4 Pixel, 24px sind also rund 1,67vw.
Tipps für ein besseres Ergebnis
- Schriftgrößen in remrem respektiert die im Browser eingestellte Schriftgröße. Wer sie für bessere Lesbarkeit erhöht, bekommt dann auch größere Texte, was bei festen Pixelwerten nicht passiert.
- em verschachtelt sichEin em-Wert bezieht sich auf die Schrift des Elements, und die kann selbst schon in em angegeben sein. In tiefen Verschachtelungen wird es schnell unübersichtlich, rem ist berechenbarer.
- vh auf SmartphonesMobile Browser blenden Adressleisten ein und aus, 100vh ist dort oft höher als der sichtbare Bereich. Die neueren Einheiten dvh und svh berücksichtigen das.
Feste und relative Einheiten
px und pt sind feste Einheiten: CSS legt fest, dass 1 Zoll 96 Pixel und 72 Punkt entspricht, ein Punkt sind also 1,333 Pixel. rem und em sind relativ zur Schriftgröße, vw und vh zum Anzeigebereich. Ein rem ist die Schriftgröße des html-Elements, ein vw ist 1 Prozent der Breite, ein vh 1 Prozent der Höhe des Anzeigebereichs.
Warum der Kontext zählt
Ohne Angaben zu Schriftgröße und Bildschirm lässt sich rem, em, vw oder vh nicht sinnvoll in Pixel umrechnen. Die meisten Browser verwenden 16 Pixel als Grundschrift, doch Projekte setzen oft eigene Werte, etwa 62,5 Prozent für eine 10-Pixel-Basis. Deshalb sind alle vier Kontextgrößen frei einstellbar.
rem und Barrierefreiheit
Viele Menschen stellen im Browser eine größere Standardschrift ein. Schriftgrößen in rem wachsen mit, Pixelwerte nicht. Für Schriften und oft auch für Abstände ist rem deshalb die bessere Wahl, während feine Linien und Rahmen in px bleiben können.
Häufige Fragen
Wie viele Pixel sind 1rem?
So viele, wie das html-Element an Schriftgröße hat, in den meisten Browsern standardmäßig 16 Pixel. Wer die Grundschrift ändert, ändert damit alle rem-Werte.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich immer auf die Schrift des Wurzelelements, em auf die Schrift des aktuellen Elements. em kann sich deshalb in verschachtelten Elementen aufsummieren.
Wie rechne ich pt in px um?
Mit dem Faktor 96 durch 72: 1pt sind 1,333 Pixel, 12pt sind 16 Pixel.
Was bedeutet 100vw?
Die volle Breite des Anzeigebereichs. Auf manchen Systemen schließt sie die Bildlaufleiste ein, weshalb 100vw etwas breiter als der sichtbare Inhalt sein kann.
Werden meine Eingaben gespeichert?
Nein. Alle Umrechnungen laufen im Browser, nichts wird übertragen.