Rechnen Sie px, em, rem, pt und % mit konfigurierbarer Basis-Schriftgröße um — komplette Äquivalenztabelle in Ihrem Browser.
CSS misst Längen in mehreren Einheiten, die auf dem Bildschirm alle als Pixel enden, und sie von Hand umzurechnen ist ein tägliches Ärgernis der Frontend-Arbeit. Dieser Umrechner nimmt einen Wert — in px, em, rem, pt oder Prozent — und zeigt dieselbe Länge in allen fünf Einheiten auf einmal, mit einer Basis-Schriftgröße, die Sie kontrollieren. Die Standardbasis ist 16 px, die anfängliche Schriftgröße jedes großen Browsers; setzt Ihr Designsystem aber html { font-size: 62.5% } oder eine andere Wurzelgröße, ändern Sie die Basis, und die ganze Tabelle passt sich an.
Die Beziehungen sind linear, und das Tool zeigt die angewandten Formeln: em- und rem-Werte werden mit der Basis-Schriftgröße multipliziert, um Pixel zu erhalten, Punkte werden im CSS-definierten Verhältnis von 96 px zu 72 pt umgerechnet (also 1 pt = 1,333 px), und Prozentwerte werden relativ zur Basis gelesen, genau wie em. Ein ehrlicher Hinweis, den das Tool auch auf dem Bildschirm anzeigt: em und rem liefern hier identische Ergebnisse, weil für beide dieselbe Basis verwendet wird. Auf einer echten Seite unterscheiden sie sich — rem bezieht sich immer auf das Wurzelelement, während em sich auf die Schriftgröße des aktuellen Elements bezieht, die selbst durch die Eltern skaliert sein kann.
Typische Einsätze: eine Designer-Übergabe in Pixeln in die rem-Werte übersetzen, auf die Ihre Codebasis standardisiert ist, prüfen, was 0,875 rem ergibt, bevor Sie eine Media Query schreiben, druckorientierte pt-Größen aus einem Styleguide in Bildschirmeinheiten umrechnen oder barrierefreie Typo-Skalen definieren, die die Browsereinstellungen der Nutzer respektieren. Die Umrechnung läuft beim Tippen zu 100% in Ihrem Browser — nichts wird hochgeladen, nichts muss installiert werden.
px = em × Basis; px = rem × Basis; px = pt × 96 ÷ 72; px = % ÷ 100 × Basis. Umkehrung: em = rem = px ÷ Basis; pt = px × 72 ÷ 96; % = px ÷ Basis × 100. Mit der Standardbasis von 16 px: 1,5 em = 24 px = 18 pt = 150%.
rem ist immer relativ zur Schriftgröße des Wurzelelements (html), während em relativ zur Schriftgröße des aktuellen Elements ist, die durch den Baum vererbt und verkettet wird. Dieser Umrechner nutzt eine Basis für beide, deshalb stimmen die Zahlen hier überein; in verschachtelten Elementen können sie auseinanderlaufen.
Weil jeder große Browser mit einer anfänglichen Schriftgröße von 16 px ausgeliefert wird, sodass auf einer unveränderten Seite 1 rem = 16 px gilt. Ändert Ihr CSS die Wurzelgröße — der beliebte 62,5%-Trick macht 1 rem = 10 px —, tragen Sie diesen Wert im Basisfeld ein.
Mit 72 multiplizieren und durch 96 teilen: CSS legt das Verhältnis auf 96 px pro Zoll und 72 pt pro Zoll fest, also 16 px = 12 pt. Die pt-Einheit ist vor allem für Druck-Stylesheets und Dokumente relevant.
Für Typographie wird allgemein rem empfohlen, weil es mitskaliert, wenn Nutzer ihre bevorzugte Browser-Schriftgröße ändern — px ignoriert das. px bleibt in Ordnung für Dinge, die nicht mit dem Text skalieren sollen, etwa Rahmen oder Schatten.
Nein. Die Umrechnung ist eine Handvoll Multiplikationen in JavaScript auf Ihrem Gerät — nichts wird an einen Server gesendet oder irgendwo gespeichert.
Vai.la verwandelt jede URL in einen Kurzlink mit Klick-Statistiken, QR-Code und Ihrem eigenen Biolink.
Vai.la übernimmt keine Verantwortung für die Nutzung der Tools oder für Entscheidungen, die auf ihren Ergebnissen basieren.