PX to REM Converter

Pixels and REM are two common measurements used in the build of a website. During the handover process, web designers and developers can convert font size measurements from pixels (PX) into REM.

PX
REM

The following table uses the 1.250 – Major Third type scale using a base font size of 16px. It provides PX values and suitable REM values for common typographic web elements such as H1 to H6, body and small.

Pixel (PX) Font Size
REM Font Size
61px
3.813rem
48px
3rem
39px
2.438rem
31px
1.938rem
25px
1.563rem
20px
1.25rem
16px
1rem
13px
0.813rem

Frequently Asked Questions (FAQ)

What can you do with the PX to REM Converter Tool?

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.

What is a REM value?

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.

What is a pixel (PX) value?

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.

What is the difference between PX and REM (PX vs REM)?

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.

How do you calculate the REM value from PX?

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.

How do you calculate the PX value from REM?

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.