PX zu REM & Zeilenhöhe
px, rem, em und pt umrechnen und eine gut lesbare Zeilenhöhe erhalten
- Dateien verlassen Ihr Gerät nicht
- Läuft im Browser
- Kostenlos, ohne Anmeldung, ohne Wasserzeichen
Umrechner
In ein beliebiges Feld tippen, die anderen folgen.Vorschau
Typografie ist das Handwerk, Sprache sichtbar zu machen. Eine gute Zeilenlänge und großzügiger Zeilenabstand lassen das Auge mühelos von einer Zeile zur nächsten gleiten.
Gängige Größen
Klicken Sie auf eine Zeile, um sie in den Umrechner zu laden.| px | rem | em | pt | vw | Zeilenhöhe |
|---|---|---|---|---|---|
| 10 | 0.625 | 0.625 | 7.5 | 0.694 | 1.7 |
| 12 | 0.75 | 0.75 | 9 | 0.833 | 1.65 |
| 13 | 0.8125 | 0.8125 | 9.75 | 0.903 | 1.63 |
| 14 | 0.875 | 0.875 | 10.5 | 0.972 | 1.6 |
| 15 | 0.9375 | 0.9375 | 11.25 | 1.042 | 1.57 |
| 16 | 1 | 1 | 12 | 1.111 | 1.55 |
| 18 | 1.125 | 1.125 | 13.5 | 1.25 | 1.52 |
| 20 | 1.25 | 1.25 | 15 | 1.389 | 1.5 |
| 24 | 1.5 | 1.5 | 18 | 1.667 | 1.4 |
| 28 | 1.75 | 1.75 | 21 | 1.944 | 1.32 |
| 32 | 2 | 2 | 24 | 2.222 | 1.25 |
| 36 | 2.25 | 2.25 | 27 | 2.5 | 1.23 |
| 40 | 2.5 | 2.5 | 30 | 2.778 | 1.2 |
| 48 | 3 | 3 | 36 | 3.333 | 1.15 |
| 56 | 3.5 | 3.5 | 42 | 3.889 | 1.13 |
| 64 | 4 | 4 | 48 | 4.444 | 1.1 |
| 72 | 4.5 | 4.5 | 54 | 5 | 1.09 |
| 96 | 6 | 6 | 72 | 6.667 | 1.05 |
Typografische Skala
px
+6 · 61pxDer flinke Fuchs3.815rem
+5 · 48.8pxDer flinke Fuchs3.052rem
+4 · 39.1pxDer flinke Fuchs2.441rem
+3 · 31.3pxDer flinke Fuchs1.953rem
+2 · 25pxDer flinke Fuchs1.563rem
+1 · 20pxDer flinke Fuchs1.25rem
0 · 16pxDer flinke Fuchs1rem
-1 · 12.8pxDer flinke Fuchs0.8rem
-2 · 10.2pxDer flinke Fuchs0.64rem
Fluide Schrift mit clamp()
Die Schrift wächst stufenlos zwischen zwei Viewport-Breiten und bleibt außerhalb fest.
px
px
px
px
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
Der flinke Fuchs
Bei 375 px Breite
16px
Bei 768 px Breite
18.95px
Bei 1024 px Breite
20.88px
Bei 1440 px Breite
24px
So verwenden Sie: PX zu REM & Zeilenhöhe
Rechnen Sie zwischen px, rem, em, pt, % und vw um, basierend auf Ihrer eigenen Root- und Eltern-Schriftgröße, und erhalten Sie für jede Größe eine empfohlene Zeilenhöhe und Zeilenlänge. Die Seite erstellt außerdem eine typografische Skala und eine fluide clamp()-Regel für responsiven Text.
- 1
Legen Sie unter „Bezugsgrößen“ Root-Schriftgröße, Schriftgröße des Elternelements und Viewport-Breite fest.
- 2
Geben Sie im „Umrechner“ in ein beliebiges Feld einen Wert ein; die anderen Einheiten folgen.
- 3
Lesen Sie für diese Größe die „Empfohlene Zeilenhöhe“ und die „Angenehme Zeilenlänge“ ab.
- 4
Optional: Erstellen Sie aus einem Verhältnis eine „Typografische Skala“ oder eine Regel unter „Fluide Schrift mit clamp()“ und kopieren Sie das CSS.
Häufige Fragen
Wie viele Pixel sind 1rem?
1rem entspricht der Schriftgröße des Root-Elements (<html>), die Browser standardmäßig auf 16 px setzen. Nutzt Ihre Website eine andere Basis, ändern Sie die Root-Schriftgröße.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich auf die Root-Schriftgröße, em und % auf die Schriftgröße des Elternelements. Für korrekte em-Werte stellen Sie die Schriftgröße des Elternelements ein.
Wie wird die Zeilenhöhe ermittelt?
Nach gängiger typografischer Praxis: etwa 1,5 für Fließtext, engere Werte für große Überschriften. Zusätzlich wird ein auf das 4-px-Raster gerundeter Wert angezeigt.
Was macht der clamp()-Generator?
Er schreibt eine font-size, die zwischen zwei Viewport-Breiten gleichmäßig wächst und außerhalb davon fest bleibt. Mit „Viewport-Breite simulieren“ sehen Sie das Ergebnis bei jeder Breite.
Kann ich Punkt für den Druck umrechnen?
Ja. pt nutzt das CSS-Verhältnis 72 pt zu 96 px, 12 pt entsprechen also 16 px.