Convert px, rem, em, pt and % with a live table and copy-ready CSS

Value to convert
px
px

rem is relative to the root font size; em and % are relative to the parent.

Converted values
px
0
rem
0
em
0
pt
0
%
0
Common values
PXREMEMPT
10
12
14
16
18
20
24
28
32
40
48
64
CSS snippet

						

About Pixel to EM/REM Converter

The pixel to EM/REM converter translates CSS length values between px, rem, em, pt and percent. Enter a value in any of the five units and a live table shows its equivalent in all the others — plus a copy-ready CSS snippet you can paste straight into a stylesheet.

The conversions respect how CSS actually resolves units: rem is relative to the root font size, while em and % are relative to the parent element’s font size. Both reference sizes are editable, so you can model a 16 px root with a 14 px component, or any design-system scale you use.

A common-values table maps the sizes designers reach for most — so questions like “what is 24px in rem” are answered at a glance. The tool is free, updates as you type and is a staple for converting fixed pixel mockups into accessible, scalable rem-based CSS.

How to use Pixel to EM/REM Converter

  1. Enter the value to convert and select its unit: px, rem, em, pt or %.
  2. Adjust the root font size (for rem) and the parent font size (for em and %) if they differ from 16 px.
  3. Read the converted values in the live table.
  4. Copy the generated CSS snippet or any value from the common-values table.

Frequently asked questions

rem is always relative to the root (html) font size, while em is relative to the current element’s inherited font size. Nested em values compound, which is why rem is usually more predictable for layout.

With the default 16 px root font size, 16 px equals exactly 1 rem. Change the root size field and the converter recalculates — at an 18 px root, 16 px becomes about 0.889 rem.

rem values scale when users change their browser’s base font size, keeping text readable for people who need larger type. Fixed px sizes ignore that preference, which hurts accessibility.

CSS defines 1 pt as 1/72 of an inch and 1 px as 1/96, so 1 pt = 1.333 px and 12 pt = 16 px. Points mostly appear in print stylesheets and documents imported from word processors.

For font sizing, % is relative to the parent element’s font size, just like em: 100% equals the parent size, so 87.5% of a 16 px parent is 14 px. Set the parent size field to match your context.


Popular searches
px to rem converter px to em converter pixel to rem rem to px css unit converter px em rem calculator
Need help?
Found an issue with this tool? Let our team know.
Report an issue

Add this free tool to your own website — copy and paste the code below.