px in rem — eine CSS-Einheitentabelle mit 120 Größen
16 px sind 1 rem und zugleich 12 pt. Jede Größe von 1 bis 120 px mit ihrem Wert in rem, pt, pc, Zoll und Millimeter.
Die häufigsten Größen
Fließtext bei 16, kleine Schrift bei 14, Abstände von 8, 24 und 32 — die Werte, die immer wiederkehren.
Warum rem durch 16 teilt
Weil Browser die Wurzelschriftgröße auf 16 px setzen und rem ein Vielfaches davon ist. Vergrößert jemand die Schrift im Browser, wächst nur, was in rem steht — alles in px Festgenagelte bleibt.
Am Bildschirm sind pt und Zoll ebenfalls Pixel
CSS legt ein Zoll auf 96 px und einen Punkt auf 1/72 Zoll fest. Deshalb sind 16 px genau 12 pt — hält man aber ein Lineal an den Bildschirm, misst dieses „Zoll“ kein Zoll.
Größen, die glatt aufgehen
Das rem geht bei Vielfachen von 16 glatt auf, das pt bei Vielfachen von 4 — denn 4 px sind genau 3 pt.
Von 1 px bis 120 px
So liest man das
- rem = px ÷ 16, denn Browser setzen die Wurzelschriftgröße auf 16 px.
- pt = px × 0,75, da CSS ein Zoll auf 96 px und einen Punkt auf 1/72 Zoll festlegt.
- Ein pc sind 12 pt, ein Zoll sind 96 px und zugleich 72 pt.
- Für Text und Abstände rem nehmen; px bleibt für Haarlinien wie Rahmen.
Häufige Fragen
Q. Wie viele Pixel sind 1 rem?
Standardmäßig 16 px. Hat jemand die Schrift im Browser vergrößert, wächst rem mit — genau deshalb lohnt sich die Einheit.
Q. Lieber px oder rem schreiben?
Für Text und Abstände rem, dann skaliert alles mit der Leserschrift. Für Haarlinien wie einen 1-px-Rahmen bleibt px.
Q. Warum setzt man font-size: 62.5% auf html?
Damit steht die Wurzel bei 10 px und 1,6 rem liest sich als 16 px. Der Haken: Wer seine Standardschrift bewusst vergrößert hat, bekommt die Seite kleiner.
Q. Warum gibt es pt noch?
Die Einheit stammt aus dem Druck und hält sich in Druck-Stylesheets und E-Mail-Vorlagen. Am Bildschirm rechnet sie sauber: 16 px sind 12 pt.
Q. Was unterscheidet em und rem?
rem misst immer an der Wurzelschriftgröße, em an der Schriftgröße des Elements selbst — verschachtelte em multiplizieren sich.