PX to REM converter

Type a value in any unit and get its equivalent in the others. By default 1rem = 16px, the browser font size; change it if your CSS uses another one. You can also paste a block of CSS and convert all its px to rem at once.

Unit converter

px
px
px
rem is relative to the font size of the root element (html); em and % to that of the parent element; 1pt = 1/72 inch = 1.333px; 1vw = 1% of the viewport width.

Conversion table

pxremempt%

Convert a block of CSS from px to rem

px, rem and em: which one to use?

The pixel (px) is a fixed unit. rem ("root em") is relative to the font size of the html element, which is 16px in every browser unless the user changes it: so 1rem = 16px, 1.5rem = 24px and 0.875rem = 14px. em is relative to the font size of the parent element, so it compounds when elements are nested.

Using rem for font sizes, margins and spacing respects the settings of people who enlarge the browser font size because of visual impairments, as the WCAG accessibility guidelines recommend. px are still handy for thin borders and shadows.

Formula to convert px to rem

rem = px ÷ base size. With the default 16px base: 24px ÷ 16 = 1.5rem. And the other way round, px = rem × 16. Some projects set html { font-size: 62.5%; } so that 1rem equals 10px and the maths is easier; in that case, enter 10 as the base size.

vw and vh are 1% of the viewport width and height: useful for fluid typography together with clamp(), for example font-size: clamp(1rem, 2.5vw, 2rem).