How do I convert px to rem?

Divide the pixel value by the root font size. With the default 16px root, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px.

How many pixels is 1rem?

16px by default in every major browser. It changes if the page sets a font size on the html element, or if the reader picks a different default font size in the browser settings.

Why use rem instead of px?

A font size in px ignores the default font size a reader has set in the browser. A size in rem follows it: someone who raises the default from 16px to 20px gets text 25% larger from rem values and no change from px values.

What if my base font size is not 16px?

Divide by your own base. On a 10px root, 24px is 2.4rem; on an 18px root it is 1.3333rem. Set the base field to match your project, and the tool keeps it in this browser for your next visit; Clear Saved Values sets it back to 16.

What is the difference between rem and em?

rem is always relative to the root font size. em is relative to the font size of the element itself, or of its parent when used on font-size, so nested em values multiply: 1.2em inside 1.2em is 1.44 times the outer size. EM mode here converts against a parent font size that you enter.

Do rem units in media queries follow the root font size?

No. Inside a media query, rem and em are based on the browser’s default font size, normally 16px, even when the stylesheet changes the html font size. A 48rem breakpoint is 768px.

PX to REM Converter

Convert px to rem and rem to px at any base font size (16px by default), with em, pt and percent conversion and a px to rem chart for common sizes. How it works

Base font size

Unit

Parent font size, for EM and %

Pixels

= 1.0000 rem · 1.0000 em (parent 16px)

REM

= 16.0000 px · 1.0000 em

Points

1 px = 0.75 pt (96 px per inch, 72 pt per inch)

Percent

of the 16px parent font size

Common font sizes

Converted

1.0000 rem

Copy Format

Live background

The quick brown fox jumps over the lazy dog. Background text at 16px (1.0000rem).

About the PX to REM Converter

rem = px ÷ root font size. Browsers use a 16px root by default, so 16px = 1rem, 24px = 1.5rem and 12px = 0.75rem. Typing in the rem box works the other way, rem × root = px, and the EM mode divides by a parent size you set instead. Points are px × 0.75, because CSS sets 1in to 96px and 72pt, and percent is px ÷ parent × 100: 24px is 18pt and 150% of a 16px parent.

px to rem chart

Pixels	rem at a 16px base	rem at a 10px base
1px	0.0625rem	0.1rem
2px	0.125rem	0.2rem
4px	0.25rem	0.4rem
8px	0.5rem	0.8rem
10px	0.625rem	1rem
12px	0.75rem	1.2rem
14px	0.875rem	1.4rem
16px	1rem	1.6rem
18px	1.125rem	1.8rem
20px	1.25rem	2rem
24px	1.5rem	2.4rem
32px	2rem	3.2rem
40px	2.5rem	4rem
48px	3rem	4.8rem
64px	4rem	6.4rem

The 10px column applies when the stylesheet sets html { font-size: 62.5%; }, which makes 1rem equal 10px at the browser default. The converter rounds to four decimal places.

rem to px at a 16px base

rem	Pixels
0.25rem	4px
0.5rem	8px
0.75rem	12px
0.875rem	14px
1rem	16px
1.25rem	20px
1.5rem	24px
2rem	32px
3rem	48px
4rem	64px

Frequently asked questions

How do I convert px to rem?: Divide the pixel value by the root font size. With the default 16px root, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px.
How many pixels is 1rem?: 16px by default in every major browser. It changes if the page sets a font size on the html element, or if the reader picks a different default font size in the browser settings.
Why use rem instead of px?: A font size in px ignores the default font size a reader has set in the browser. A size in rem follows it: someone who raises the default from 16px to 20px gets text 25% larger from rem values and no change from px values.
What if my base font size is not 16px?: Divide by your own base. On a 10px root, 24px is 2.4rem; on an 18px root it is 1.3333rem. Set the base field to match your project, and the tool keeps it in this browser for your next visit; Clear Saved Values sets it back to 16.
What is the difference between rem and em?: rem is always relative to the root font size. em is relative to the font size of the element itself, or of its parent when used on font-size, so nested em values multiply: 1.2em inside 1.2em is 1.44 times the outer size. EM mode here converts against a parent font size that you enter.
Do rem units in media queries follow the root font size?: No. Inside a media query, rem and em are based on the browser’s default font size, normally 16px, even when the stylesheet changes the html font size. A 48rem breakpoint is 768px.

Turning design pixels into rem

Design files give sizes in pixels, but rem is the better unit for font sizes and spacing because it follows the reader's browser font setting. Type a pixel value to get rem, or rem to get pixels back. The px to rem converter also shows points, for print or a design file in pt, and em and percent for a parent size you choose, and copies the result as a value, a CSS custom property or an SCSS variable.

The px to rem formula

rem = px ÷ root font size

em = px ÷ parent font size

pt = px × 0.75 and % = px ÷ parent font size × 100

CSS fixes 1in at 96px and at 72pt, so a pixel is three quarters of a point: 16px = 12pt, and 24px = 18pt = 150% of a 16px parent.

Browsers use a 16 px root font size unless the user or the page changes it, so 1rem = 16px, 24px = 1.5rem, 48px = 3rem and 14px = 0.875rem. Results are rounded to four decimals.

If your stylesheet sets html { font-size: 62.5% }, the root is 10 px. Enter 10 as the base and 24px converts to 2.4rem.

Keep px for things that should not grow with text, such as 1px borders.

Fun Fact: rem means root em. On the font-size property an em refers to the inherited font size, so a 1.2em list nested inside another 1.2em list ends up 1.44 times the outer size. A rem always goes back to the html element, which is why it does not compound.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.