How many pixels is 1rem?

16px by default, because that is the browser's default root font size. If you change html { font-size }, 1rem changes with it — which is why this tool lets you set the root value.

Should I use rem or px for font sizes?

rem. Text sized in px ignores the user's font-size preference entirely, while rem scales with it. This matters more on mobile than desktop, because a significant share of phone users run larger system text.

What is the difference between dp and sp on Android?

Both are density-independent, but sp additionally scales with the user's font-size setting. Use sp for text and dp for everything else — using dp for a label is the Android equivalent of hard-coding px.

floow.design

px to rem Converter

Convert pixels to rem, em, pt, dp and sp, with every density export size and a full token scale.

Convert freeFree to export spacing tokens to 6 platformsNo sign-upNo watermarkRuns in your browser

ValueRoot font sizeBrowsers default to 16px. Change it only if you have overridden html { font-size }.Scale

rem: 1.5rem
em: 1.5em
pt (iOS): 24
dp (Android): 24

iOS @1x: 24px
iOS @2x: 48px
iOS @3x: 72px
xhdpi: 48px
xxhdpi: 72px
xxxhdpi: 96px

dp and pt are both 1:1 with CSS px at baseline density, so a 16px gap is 16dp and 16pt. Only the exported raster asset changes: multiply by the density factor.

px	rem	pt / dp	mdpi	hdpi	xhdpi	xxhdpi	xxxhdpi
0	0	0	0	0	0	0	0
2	0.125	2	2	3	4	6	8
4	0.25	4	4	6	8	12	16
6	0.375	6	6	9	12	18	24
8	0.5	8	8	12	16	24	32
10	0.625	10	10	15	20	30	40
12	0.75	12	12	18	24	36	48
16	1	16	16	24	32	48	64
20	1.25	20	20	30	40	60	80
24	1.5	24	24	36	48	72	96
32	2	32	32	48	64	96	128
40	2.5	40	40	60	80	120	160
48	3	48	48	72	96	144	192
56	3.5	56	56	84	112	168	224
64	4	64	64	96	128	192	256
80	5	80	80	120	160	240	320
96	6	96	96	144	192	288	384

:root {
  --space-0: 0rem; /* 0px */
  --space-2: 0.125rem; /* 2px */
  --space-4: 0.25rem; /* 4px */
  --space-6: 0.375rem; /* 6px */
  --space-8: 0.5rem; /* 8px */
  --space-10: 0.625rem; /* 10px */
  --space-12: 0.75rem; /* 12px */
  --space-16: 1rem; /* 16px */
  --space-20: 1.25rem; /* 20px */
  --space-24: 1.5rem; /* 24px */
  --space-32: 2rem; /* 32px */
  --space-40: 2.5rem; /* 40px */
  --space-48: 3rem; /* 48px */
  --space-56: 3.5rem; /* 56px */
  --space-64: 4rem; /* 64px */
  --space-80: 5rem; /* 80px */
  --space-96: 6rem; /* 96px */
}

Type a pixel value and get rem, em, and the Android dp and sp equivalents. Change the root size and everything recalculates.

The generated table gives you a whole spacing or type scale at once, rather than converting one value at a time.

What rem is relative to

One rem equals the root font size — the size set on the html element, which browsers default to 16px. So 24px is 1.5rem at the default. The distinction from em matters: em is relative to the current element's font size and therefore compounds through nesting, which is why rem is the safer default for a design system.

Why rem matters for accessibility

A user who raises their default text size expects your app to respond. Sizes set in px ignore that setting entirely; sizes in rem scale with it. On mobile, where a meaningful share of users run larger text, honouring that preference is the difference between a usable app and one they delete.

sp versus dp on Android

Android distinguishes the two deliberately: dp for layout dimensions, sp for text. sp additionally scales with the user's font-size preference, which is exactly why text must never be specified in dp. Using dp for a label is the Android equivalent of hard-coding px for type.

How to use the px to rem converter

Enter the pixel value you are converting.
Leave the root size at 16 unless you have deliberately overridden html { font-size }.
Read the rem value for CSS, and the dp/sp equivalents if you are working on Android.
Use sp for anything that renders text on Android, and dp for everything else.
Copy the whole scale table to seed your spacing or type tokens in one paste.

Use it with

Type Scale Generator — Build a modular type scale sized for phone screens, and export it to CSS, Tailwind, SwiftUI, Compose or Flutter.
Device Size Reference — Screen dimensions, density and safe areas for current handsets — searchable, and exportable as code.
CSS Grid Generator — Lay out rows, columns and gaps visually, then export as CSS, Tailwind, LazyVGrid, Compose or Flutter.

Frequently asked questions

How many pixels is 1rem?: 16px by default, because that is the browser's default root font size. If you change html { font-size }, 1rem changes with it — which is why this tool lets you set the root value.
Should I use rem or px for font sizes?: rem. Text sized in px ignores the user's font-size preference entirely, while rem scales with it. This matters more on mobile than desktop, because a significant share of phone users run larger system text.
What is the difference between dp and sp on Android?: Both are density-independent, but sp additionally scales with the user's font-size setting. Use sp for text and dp for everything else — using dp for a label is the Android equivalent of hard-coding px.