PX to REM Table

REM unit is a mixture of px and em. REM sets the size relative to the root font size of the page. Remember: 1 rem = 16px.

How to Convert PX to REM

To convert pixels to rem, divide the pixel value by the root font size, which is 16px by default in all major browsers. For example, 24px ÷ 16 = 1.5rem, and 12px ÷ 16 = 0.75rem. To convert the other way, multiply: 2rem × 16 = 32px.

The REM unit is always relative to the font size of the root html element, while EM depends on the font size of the surrounding element. That makes REM easier to predict: 1.5rem is the same size everywhere on the page, however deeply the element is nested.

Using REM instead of PX also helps accessibility. When readers increase the default font size in their browser settings, text set in REM grows with it, while text set in PX stays the same.

Some developers set html { font-size: 62.5%; } so that 1rem equals 10px, which makes the math easier. If you do this, set the body font size back to 1.6rem so text doesn’t look too small, and keep in mind that the table below assumes the default 16px.

When to use PX, REM, and EM

Use REM for font sizes, spacing, and layout widths, so the whole page scales with the reader’s settings. EM works well for padding and margins inside a component that should grow with that component’s own text, such as a button. PX still makes sense for details that shouldn’t scale, such as 1px borders and box shadows. In media queries, REM or EM values respond to the reader’s font settings while PX values don’t, so many developers write breakpoints like @media (min-width: 48rem) instead of 768px.