What is the PX to REM Converter?#
The PX to REM Converter converts between px and rem for CSS. Both fields stay editable: type in either one and the other updates, ready to copy into a stylesheet.
A rem is a multiple of the root font size. At a 16px root, 16px is 1rem.
How to Use#
- Enter a number in the px or rem field.
- Copy the value you need.
Options#
- Base font size: the root font size the conversion is based on, from 12, 14, 16, or 18. Match the
font-sizeof yourhtmlelement. Most projects use 16.
Common Values#
The table lists common px values with their rem equivalents at the current base. Choosing a row puts that px value into the px field and updates the rem field.
Use Cases#
- Turning px sizes from a design mockup into rem for a fluid layout.
- Reading an existing rem value back as px to picture its size.
- Aligning spacing and type sizes to one root before writing CSS.
Notes#
- The other field is rounded to four decimal places at most. At a 16px root, a px value of 12 reads 0.75 in the rem field.
- rem changes with the root font size, so match the base to your CSS before you copy.
FAQ#
Use rem for type and spacing that should follow the reader's root font size, so the layout respects their browser settings. Use px when you need a fixed size, such as borders and fine details.
No. This tool converts px and rem only. em is relative to the parent element's font size, and a percentage depends on the property it is used in, so both need a different basis.
Yes. Values such as 1.5 or -8 are accepted, so signed lengths like negative margins can be converted.
No. Enter a plain number with no unit or separators, such as 16 or 1.5. A value with px or rem attached, commas, or exponents is not accepted. Entering a plain number clears the message.