PX-in-REM-Konverter & Rechner (16px Basis)

PX sofort in REM und REM in PX umrechnen. Basis-Schriftgröße ändern, CSS kopieren und 16px- sowie Tailwind-Referenzwerte nutzen.

Umrechnungsrechner

Setzen Sie Basis-Größe.

Basis-Schriftgröße (px)

Browser-Standard ist 16px.

CSS-Ergebnis

Pixel (px)

REM

Warum REM?

Barrierefreiheit

Schriftgrößen skalieren flexibel.

Responsive Design

Steuern durch Root-Schriftgröße.

Schnellreferenz

1px0.0625rem

2px0.125rem

4px0.25rem

8px0.5rem

10px0.625rem

12px0.75rem

14px0.875rem

16px1rem

18px1.125rem

20px1.25rem

24px1.5rem

32px2rem

40px2.5rem

48px3rem

64px4rem

80px5rem

96px6rem

Warum REM statt PX?

Für Barrierefreiheit relative Einheiten nutzen.

Guide zur Barrierefreiheit

PX in REM umrechnen

Teilen Sie den Pixelwert durch die Root-Schriftgröße. Die meisten Browser verwenden standardmäßig 16px.

rem = px ÷ 16px = rem × 16

Beispiel: 24px ÷ 16px = 1,5rem. Umgekehrt gilt 1,5rem × 16px = 24px.

PX-in-REM-Umrechnungstabelle

Häufige Pixelwerte auf Basis der Standardschriftgröße von 16px.

PX	REM (16px)	CSS
1px	0.0625rem	font-size: 0.0625rem;
2px	0.125rem	font-size: 0.125rem;
4px	0.25rem	font-size: 0.25rem;
8px	0.5rem	font-size: 0.5rem;
10px	0.625rem	font-size: 0.625rem;
12px	0.75rem	font-size: 0.75rem;
14px	0.875rem	font-size: 0.875rem;
16px	1rem	font-size: 1rem;
18px	1.125rem	font-size: 1.125rem;
20px	1.25rem	font-size: 1.25rem;
24px	1.5rem	font-size: 1.5rem;
32px	2rem	font-size: 2rem;
40px	2.5rem	font-size: 2.5rem;
48px	3rem	font-size: 3rem;
64px	4rem	font-size: 4rem;
80px	5rem	font-size: 5rem;
96px	6rem	font-size: 6rem;

Tailwind-CSS-Abstandsreferenz

Häufig verwendete PX- und REM-Werte der standardmäßigen Tailwind-Abstandsskala.

PX	REM	Tailwind
4px	0.25rem	p-1 / m-1 / gap-1
8px	0.5rem	p-2 / m-2 / gap-2
12px	0.75rem	p-3 / m-3 / gap-3
16px	1rem	p-4 / m-4 / gap-4
20px	1.25rem	p-5 / m-5 / gap-5
24px	1.5rem	p-6 / m-6 / gap-6
32px	2rem	p-8 / m-8 / gap-8
40px	2.5rem	p-10 / m-10 / gap-10
48px	3rem	p-12 / m-12 / gap-12
64px	4rem	p-16 / m-16 / gap-16
96px	6rem	p-24 / m-24 / gap-24

PX vs REM

PX ist fest, REM ist relativ.

Häufige Fragen zu PX und REM

Wie viel REM sind 16px?

Bei einer Basis-Schriftgröße von 16px entsprechen 16px genau 1rem.

Wie rechne ich PX in REM um?

Teilen Sie den Pixelwert durch die Root-Schriftgröße. Bei 16px Basis gilt: 32px ÷ 16px = 2rem.

Sollte ich in CSS REM oder PX verwenden?

REM eignet sich für skalierbare Typografie und Abstände. PX bleibt für feine Details wie dünne Rahmen praktisch.

Was ist bei einer anderen Basis als 16px?

Geben Sie die tatsächliche Root-Schriftgröße in den Rechner ein. Bei 10px Basis sind 20px gleich 2rem; bei 14px etwa 1,4286rem.