Rechnen Sie px in rem, em, pt, Pica, Zoll und mm anhand der Schriftgröße des Wurzelelements, der Elternschriftgröße und der DPI um. CSS definiert 1 in = 96 px = 72 pt.
Von AdminMit KI-Schreibwerkzeugen entworfenAktualisiert Geprüfte Beispiele: 7
Bei 16 px Wurzelschriftgröße und 96 Pixeln pro Zoll entsprechen 24px dem Wert 1.5rem.
| Einheit | Wert | Definition |
|---|---|---|
| Pixel (px) | 24px | 1 px |
| Punkt (pt) | 18pt | 1 pt = 1/72 in |
| Pica (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Zoll (in) | 0.25in | 1 in = DPI px |
| Zentimeter (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Millimeter (mm) | 6.35mm | 1 mm = 1/25.4 in |
| Viertelmillimeter (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (Schriftgröße des Elternelements) | 1.5em | 1 em = parent font size |
| rem (Schriftgröße des Wurzelelements) | 1.5rem | 1 rem = root font size |
| Prozent der Elternschriftgröße (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS rechnet jede Länge über Pixel um. Absolute Einheiten haben feste Verhältnisse: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q ist ein Viertelmillimeter. Schriftrelative Einheiten hängen von der Seite ab: 1 rem ist die Schriftgröße des Wurzelelements; bei font-size ist 1 em (oder 100%) die Schriftgröße des Elternelements. Der Wert wird in Pixel umgerechnet und anschließend durch die Pixel pro Zieleinheit geteilt.
Webentwickler rechnen Pixelmaße eines Entwurfs in rem um, damit Text der Schriftgrößeneinstellung des Lesers folgt: Bei 16 px Wurzelschriftgröße sind 24 px gleich 1.5 rem. Für Druckentwürfe dient das Feld Pixel pro Zoll; bei 300 DPI benötigt ein Logo von 10 mm etwa 118 Pixel. Damit Text der Browserpräferenz folgt, muss die Wurzelschriftgröße diese Einstellung respektieren.
Ein CSS-Zoll muss kein gemessener Bildschirmzoll sein. CSS legt 96 px pro Zoll fest; der Referenzpixel hat etwa 0.0213° Sehwinkel. Implementierungen können an physische Maße oder Pixel anknüpfen; Gerätemapping, Betrachtungsabstand und Druckskalierung beeinflussen das tatsächliche Maß.
In der Formel sind xₛ und xₜ Ausgangs- und Zielwert; pₛ und pₜ geben Pixel pro Ausgangs- und Zieleinheit an. Die Faktoren berücksichtigen die eingegebenen Schriftgrößen und die Pixeldichte.
rem bezieht sich auf die Schriftgröße des Wurzelelements. Im folgenden Beispiel ist diese ausdrücklich festgelegt. Für em und Prozent benutzt dieses Formular die eingegebene übergeordnete Schriftgröße; bei echtem CSS hängt der Bezug auch von der Eigenschaft ab.
rem = px ÷ root(px)
24 px ÷ 16 px = 1.5 rem
Bei font-size bezieht sich em auf den Elternwert, bei anderen Eigenschaften auf die Schriftgröße des Elements. Prozentwerte anderer Eigenschaften können etwa eine Breite statt einer Schriftgröße meinen. Ein anderer eingetragener Pixel-pro-Zoll-Wert dient hier der Bild- oder Druckrechnung und ändert nicht die feste CSS-Definition absoluter Einheiten.
| Wert | Ausgangseinheit | Zieleinheit | Kontext | Umgerechneter Wert |
|---|---|---|---|---|
| 24 | px | rem | Wurzel 16 px | 1.5 |
| 24 | px | rem | Wurzel 20 px | 1.2 |
| 12 | pt | px | 96 Pixel/in | 16 |
| 1 | pc | pt | 96 Pixel/in | 12 |
| 100 | % | em | Elternschrift 16 px | 1 |
| 10 | mm | px | 300 Pixel/in | 118.110236 |
CSS-px sind keine garantierten physischen Bildschirm-Pixel. Die Kontextspalte der Tabelle ist deshalb Teil jeder Rechnung. Die Millimeterzeile ist gerundet; übernimm für eine Webseite den tatsächlichen Schriftkontext und für Druckdaten die gewünschte Auflösung.
Grundlage: W3C CSS Values and Units.
Prüfquelle: Beispielprüfung: CSS Values 3 §6.1: 1rem = Schriftgröße des Wurzelelements (16 px hier angenommener Browserstandard); 24 / 16 = 1.5
Prüfquelle: Beispielprüfung: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
Prüfquelle: Beispielprüfung: CSS Values 3 §6.2: 1in = 96px
Prüfquelle: Beispielprüfung: 1 rem = Schriftgröße des Wurzelelements (16 px); 1.5 × 16
Üblicher Standard sind 16 Pixel. Ein rem entspricht der Schriftgröße des Wurzelelements html. Gängige Browser verwenden 16 px, sofern der Leser die Voreinstellung oder das Stylesheet html { font-size } nicht ändert. Bei dieser Voreinstellung ergibt html { font-size: 62.5% } dann 1 rem = 10 px. Die W3C-Spezifikation CSS Values and Units definiert rem; 16 px ist eine Browser-Voreinstellung, keine Vorgabe der Spezifikation.
Multipliziere Pixel mit 0.75; von Punkt zu Pixel mit 4/3 (etwa 1.333). Beide Faktoren folgen aus der W3C-CSS-Regel 1 in = 96 px = 72 pt, also 1 px = 72/96 pt. Text mit 16 px entspricht 12 pt; 11 pt aus einer Textverarbeitung sind etwa 14.67 px.
rem bezieht sich immer auf die Schriftgröße des Wurzelelements, em auf die des aktuellen Elements beziehungsweise bei font-size auf das Elternelement. Verschachteltes em vervielfacht sich: Eine Liste mit 1.2em in einer weiteren Liste mit 1.2em ergibt das 1.44-Fache der äußeren Ausgangsgröße. Dagegen bleibt 1.2rem bei einer Wurzelschrift von 16 px stets 19.2 px, unabhängig von der Verschachtelung.
Nutze rem, wenn Text der Schriftgrößeneinstellung des Lesers folgen soll. Seitenzoom vergrößert px und rem gleichermaßen; die Standard-Schriftgrößeneinstellung wirkt dagegen auf rem, em und Prozentgrößen. WCAG 2.1, Erfolgskriterium 1.4.4 (Stufe AA), verlangt eine Vergrößerung auf 200% ohne Inhalts- oder Funktionsverlust. Browserzoom kann dies auch mit px erfüllen; rem berücksichtigt zusätzlich die Schriftgrößenpräferenz. Die Wirkung von rem, em und Prozentgrößen hängt vom Wurzel- oder Elternkontext ab; die Wurzel muss die Leserpräferenz respektieren.
Ein CSS-Zoll kann vom gemessenen Bildschirmzoll abweichen. CSS definiert 1 in als exakt 96 px; der W3C-Referenzpixel ist ein Pixel eines 96-DPI-Bildschirms aus 28 in Abstand, etwa 0.0213° Sehwinkel. Gerätemapping und Abstand variieren, daher kann ein Feld von 96 px am Handy kleiner als ein physischer Zoll sein. Bei Druck in tatsächlicher Größe kann 1 in = 25.4 mm mit dem Lineal übereinstimmen; Druckskalierung und Kalibrierung wirken ebenfalls.
Dieser Rechner enthält 7 Rechenbeispiele mit Ergebnissen aus unabhängigen Quellen. Sie laufen in der Testsuite und können auch hier ausgeführt werden.