CSS-Einheiten-Konverter
Konvertieren zwischen px, rem, em und pt. Passen Sie Ihre Basis-Schriftgröße an.
Punkt (pt):12pt
Schriftgröße des <html>-Elements Ihrer Website (Browser-Standard: 16px)
rem ist relativ zur Schriftgröße des Wurzelelements (<html>). Der Browser-Standard ist 16px, also 1rem = 16px, sofern nicht geändert.
1pt = 1,333px bei 96 DPI (Bildschirmauflösung). Punkt wird hauptsächlich in Print-CSS und Design-Programmen verwendet.
Häufige CSS-Größen
| px | rem | pt | Typische Verwendung |
|---|---|---|---|
| 8 | 0.5 | 6 | Symbol / border-radius |
| 10 | 0.625 | 7.5 | Code, kleiner Text |
| 12 | 0.75 | 9 | Kleiner Text / Hinweis |
| 14 | 0.875 | 10.5 | Fließtext (kompakt) |
| 16 | 1 | 12 | Standard-Fließtext |
| 18 | 1.125 | 13.5 | Fließtext (bequem) |
| 20 | 1.25 | 15 | Großer Text / Untertitel |
| 24 | 1.5 | 18 | H3 / große Überschrift |
| 32 | 2 | 24 | H2 / Display-Überschrift |
| 48 | 3 | 36 | H1 / Hauptüberschrift |
Häufig gestellte Fragen
px (Pixel) ist eine absolute Einheit, die unabhängig von Nutzereinstellungen immer gleich groß ist. rem (Root-em) ist relativ zur Schriftgröße des <html>-Elements — bei Standard 16px: 1rem = 16px, 2rem = 32px. em bezieht sich auf die Schriftgröße des Elternelements. Für skalierbare Layouts empfiehlt sich rem, da es die Browser-Schrifteinstellungen des Nutzers berücksichtigt.
Teilen Sie den Pixelwert durch Ihre Root-Schriftgröße. Mit Standard 16px: rem = px ÷ 16. Beispiel: 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem, 14px ÷ 16 = 0,875rem. Viele Entwickler setzen html { font-size: 62,5%; }, sodass 1rem = 10px gilt — das vereinfacht die Berechnung.
Bei der Standard-Basis von 16px: 16px = 1rem. Wichtige Ankerwerte: 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem. Wenn Ihre Website eine andere Basis verwendet (z. B. 10px), müssen Sie entsprechend umrechnen — daher hat dieser Konverter eine Einstellung für die Basis-Schriftgröße.
rem berücksichtigt die Browser-Schriftgröße des Nutzers, was für Barrierefreiheit wichtig ist. Nutzer mit Sehschwäche können ihre Basis-Schriftgröße vergrößern, und alle rem-Werte passen sich automatisch an. px-Werte ignorieren diese Einstellung. Außerdem vereinfacht rem responsives Design: Passen Sie die Root-Schriftgröße mit einer Media Query an, und alle rem-Elemente skalieren proportional.