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, dp and sp against any root size, with a full scale table.

Convert freeSign up to copy the scale tableNo usage limits

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

rem: 1.5rem
em: 1.5em
dp / sp (Android): 24
pt (iOS @1x): 24

px	rem
11	0.6875
12	0.75
13	0.8125
14	0.875
15	0.9375
16	1
18	1.125
20	1.25
24	1.5
28	1.75
32	2
40	2.5
48	3
56	3.5
64	4

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 from a base size and ratio, sized for phone screens.
Device Size Reference — Screen dimensions, logical points, pixel density and safe areas for current iPhones and Android handsets.
CSS Grid Generator — Lay out rows, columns and gaps visually, place items on the grid, and copy the CSS.

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.