PX to REM Converter

You can convert a pixel (PX) value into a REM value as well as convert a REM value into a pixel (PX) value. The base font size can be changed from 16px if required.

This can be perfect for designers and developers during the handover process as it allows the respective measurements to be converted to suit each team member. This way, team members with different professions are working with a shared understanding, making the handover process much smoother.

REM is short for “root em”, which is a measurement unit that refers to the root font size.

1rem means one multiplied by the root font size, which could be 1 multiplied by 16px. For example, a font size of 2rem would equal 32px.

Pixel is short for “picture element” and is the smallest element in a raster / bitmapped image. 1px previously represented a single dot on the screen. However, this is quite rare as modern screens have higher pixel resolution.

A pixel is an absolute unit of measurement, meaning it will be the same size on different screen sizes. However, REM is a relative unit that is based on the root element size. For example, if the root size is 16px, an element that is 48px would be 3rem.

Changing the root element font size would cause the REM values to increase but would not affect a pixel (PX) value. For example, increasing the base font size to 18px would mean that 3rem would increase from 48px to 54px.

The REM size is calculated by dividing the font size by the root font size.

For example, if the font size is 32px divided by a root font size of 16px would equal 2rem.

The PX size is calculated by multiplying the REM size by the root font size.

For example, if the REM size is 2rem multiplied by a root font size of 16px would equal 32px.