Für die Umwandlung von PIXEL Einheiten (px) in REM Werte (rem) gibt hier eine kleine Umrechnungstabelle mit den gängigsten Werten. Besonders die Schriftgröße (font-size) gehört zu den wichtigsten Parametern bei der Gestaltung einer Website.
Während man früher fast immer nur px (Pixel) als absolute Einheit für die Schriftgröße verwendet hat, stehen heute mehrere praktische relative Einheiten zur Verfügung – darunter rem, em, %, sowie vh und vw (relativ zur Viewport-Größe).
Dabei beziehen sich em und Prozentwerte stets auf das jeweilige Elternelement, während sich rem immer auf die Basis-Schriftgröße des HTML-Dokuments stützt. Die Einheit bleibt also konstant relativ zum Root-Element und nicht zum übergeordneten Element. Das ist insbesondere in responsiven Layouts ein deutlicher Vorteil.
Die Umrechnung von Pixel zu REM bezieht sich üblicherweise immer auf die Standard-Browserschriftgröße von 16 Pixeln.
html {
font-size: 100%;
}Anhand der Formel Pixelwert : 16 = rem-Wert werden die Angaben umgerechnet.
Damit entspricht 1rem = 16px, 2rem = 32px, 3rem = 48px usw.
PIXEL in REM konvertieren – Umrechnungstabelle
| Pixel | REM |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 3px | 0.1875rem |
| 4px | 0.25rem |
| 5px | 0.3125rem |
| 6px | 0.4375rem |
| 7px | 0.375rem |
| 8px | 0.5rem |
| 9px | 0.5625rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.063rem |
| 18px | 1.125rem |
| 19px | 1.188rem |
| 20px | 1.25rem |
| 22px | 1.375rem |
| 24px | 1.5rem |
| 26px | 1.625rem |
| 28px | 1.75rem |
| 30px | 1.875rem |
| 32px | 2rem |
| 34px | 2.125rem |
| 36px | 2.25rem |
| 38px | 2.375rem |
| 40px | 2.5rem |
| 42px | 2.625rem |
| 44px | 2.75rem |
| 46px | 2.875rem |
| 48px | 3rem |
| 50px | 3.125rem |
| 52px | 3.25rem |
| 54px | 3.375rem |
| 56px | 3.5rem |
| 58px | 3.625rem |
| 60px | 3.75rem |
Ausnahmefälle:
1. Anderer Root-Font-Size
Wenn die Root-Font-Size im CSS verändert wird:
html {
font-size: 18px;
}Dann gilt z.B.: 1 rem = 18 px (nicht 16 px)
2. Browser-Einstellungen
Auch die Browser-Einstellungen des Nutzers können zu einem Ausnahmefall führen. Wenn Nutzer in ihrem Browser die Mindestschriftgröße ändern, z. B. auf 20px Mindestgröße, dann passt der Browser rem automatisch an.
Beispiel: Nutzer stellt „größere Schrift“ ein – Standard 16px wird zu 20px – Alle rem-Werte skalieren automatisch.
3. Zoom-Einstellungen
Browser-Zoom wirkt sich nicht auf px aus, aber immer auf rem. px bleibt dabei absolut, rem vergrößert/verkleinert sich relativ zum Zoom.
Beispiel: 150% Browser-Zoom – 1rem fühlt sich an wie 24px (150% von 16px).
4. Eingebettete Umgebungen (z. B. iFrames)
Ein iFrame, der von extern eingebunden wird, kann eine eigene Root-Font-Size haben.