PX to REM converter

To convert px to rem, divide the pixel value by the root font size: with the browser default of 16 px, 24 px is 1.5 rem and 14 px is 0.875 rem. Change the root size if your CSS sets a different one, convert in either direction, and copy the CSS.

24px at a 16px root

1.5rem

24 ÷ 16 = 1.5

CSS: font-size: 1.5rem;The same value works for margin, padding, gap or width.
Value: 1.5rem
Same size in em: 1.5emOnly while the parent element's font size is also 16px.

rem always refers to the root (html) element's font size, so 1rem is the same size anywhere on the page. em refers to the font size of the element it is used on, and inside font-size itself to the parent's font size, so em sizes multiply when elements are nested.

How do you convert px to rem?

Divide the pixel value by the root font size. The root font size is the font-size of the html element, and with the common browser default of 16 px, 24 px is 24 ÷ 16 = 1.5rem and 14 px is 14 ÷ 16 = 0.875rem. To go back, multiply: 1.25rem × 16 = 20 px.

The root is not always 16 px. A stylesheet can set its own (html { font-size: 62.5% } gives 10 px when the default is 16 px), and readers can change their browser's default text size. Sizes in rem follow that change; MDN notes that text set in px can't be enlarged this way in some browsers.

rem and em are not the same unit. rem always uses the root's font size. em uses the font size of the element it is on, and inside font-size itself the parent's, so font-size: 1.5em inside another 1.5em is 2.25 times the text around both, while 1.5rem stays 1.5 times the root wherever it is.

Results are rounded to at most 4 decimal places with trailing zeros removed, so 10 px at a 12 px root shows as 0.8333rem.

rem = px ÷ root font size
px  = rem × root font size

What are common px sizes in rem?

Common sizes in rem at the browser-default 16 px root, and at a 10 px root (html { font-size: 62.5% })
Pixels	rem at a 16px root	rem at a 10px root
10px	0.625rem	1rem
11px	0.6875rem	1.1rem
12px	0.75rem	1.2rem
13px	0.8125rem	1.3rem
14px	0.875rem	1.4rem
15px	0.9375rem	1.5rem
16px	1rem	1.6rem
18px	1.125rem	1.8rem
20px	1.25rem	2rem
22px	1.375rem	2.2rem
24px	1.5rem	2.4rem
28px	1.75rem	2.8rem
30px	1.875rem	3rem
32px	2rem	3.2rem
36px	2.25rem	3.6rem
40px	2.5rem	4rem
48px	3rem	4.8rem
56px	3.5rem	5.6rem
64px	4rem	6.4rem

How to convert px to rem

1
Pick the directionChoose px → rem to turn a pixel size into rem, or rem → px to see the pixel size of a rem value.
2
Enter the valueType the pixel or rem value. Decimals work, and so do negative values for margins.
3
Set the root font sizeLeave 16 if your CSS doesn't change the html font size, enter 10 if it uses html { font-size: 62.5% }, or enter your own root.
4
Copy the CSSCopy the declaration or the bare value. With a root other than 16, the result also lists the common sizes at your root.

Frequently asked questions

How many pixels is 1rem?

1rem is the root element's font size: 16 px with the common browser default, or whatever your html { font-size } sets. When the root is left at the default or set as a percentage, 1rem grows if a reader raises their browser's default text size.

What is the difference between rem and em in CSS?

rem is relative to the root (html) element's font size everywhere on the page. em is relative to the current element's font size, and in font-size itself to the parent's, so em values compound when elements are nested.

How do I convert rem to px?

Multiply the rem value by the root font size: 1.25rem × 16 = 20 px and 0.875rem × 16 = 14 px. Choose rem → px in the converter to do it for any root.

Should I use px or rem for font sizes?

MDN advises against px for font sizes, because in some browsers readers can't enlarge text set in px, while rem follows their default text size. MDN also says px is a good choice where you need pixel accuracy.

What does html { font-size: 62.5% } do?

It sets the root to 62.5% of the browser's default text size, which is 10 px when that default is 16 px, so 1.4rem is 14 px. A reader with a larger default still gets larger text, because the percentage scales with it.

Sources

CSS Values and Units Module Level 4: font-relative lengths (em, rem) (checked 20 Oct 2026)
MDN: <length> (rem, em and the 16px default) (checked 20 Oct 2026)
MDN: font-size (px and accessibility, em compounding) (checked 20 Oct 2026)

Built and maintained by CountryDevs. Updated October 2026. Runs in your browser; what you type is not sent to us.

Related tools

See all 73 free tools

Need this, but tailored to your brand?

We design UI, UX, and interfaces that feel as good as they look.

See design services Start a project

Built by CountryDevs · No signup · No ads · We count visits, never what you enter