Convert pixels to rem with the correct root font size

To convert CSS pixels to rem, divide the pixel value by the root element’s font size: value in rem = value in px ÷ root size in px. With a 16 px root size, 24 px equals 1.5 rem. With a 20 px root size, the same 24 px equals 1.2 rem.

The PX to REM Converter performs this division. Its root-size field starts at 16, but it does not read your stylesheet. Check the base before converting a font size or spacing.

Find your page’s root font size

One rem refers to the font size of the root element, usually html. A value of 16 px is common, but not universal: the site’s styles and browser preferences can change it. MDN explains the reference used by the rem unit.

1. Open your project’s page in the browser. Inspect the html element with the developer tools.
2. In the computed styles panel, find font-size and note its value in pixels. Do not use the value for body or for the heading you want to convert.
3. Alternatively, run getComputedStyle(document.documentElement).fontSize in the console on that same page. A result of “20px” means you should use a base of 20 in the converter.
4. Check the value again if a responsive rule or setting changes the root size. The measurement describes the page in its current state.

This method uses the styles actually applied, as explained in the getComputedStyle documentation.

Convert and apply the value

1. Enter 24 in the “CSS pixel value” field, without adding px.
2. Enter the base you measured, for example 16. The base must be strictly positive; the value to convert can be zero, but not negative.
3. Run the conversion. The tool displays “24px ÷ 16px = 1.5rem”. For a CSS declaration, use only 1.5rem, for example “font-size: 1.5rem;”.
4. Check the result on your page. If the root size is 20 px, use the result 1.2rem to get 24 px. Keeping 1.5rem would produce 30 px instead.

CSS requires a decimal point: write 1.5rem, not 1,5rem, even if your local number format uses a comma. The pixels in this conversion are CSS pixels, not the screen’s physical pixels. Do not apply a multiplier based on its pixel density. MDN explains this distinction.

Understand the difference between rem and em

Rem units let components share a common reference. Em units follow the element’s font size; in a font-size declaration, they follow the parent’s font size. Text sizes in em can therefore multiply as elements are nested. Choose em if you want this dependence on the component, or rem if you want a reference to the root. The CSS Values and Units module defines these units.

Avoid mistakes with the base and precision

Do not change the root font size just to make a calculation work out: you would also change existing dimensions expressed in rem. Correct the base you entered and recalculate instead.

The result is rounded to at most six decimal places. For example, 17 px with an 18 px root size gives 0.944444rem. Unnecessary trailing zeroes are not retained.

A very small value can disappear from the display: 0.000001 px ÷ 16 produces 0rem after rounding. That does not mean the mathematical quotient is zero. Check before replacing a very small value in your CSS. Non-finite numbers and results outside the supported numeric range are rejected.

Check text resizing too

Using rem does not guarantee accessibility. Test zoom up to 200%, along with text enlargement and font preferences: headings, buttons and fields must remain readable and usable. Watch for clipped or overlapping text in fixed-size containers. A dimension in px is not automatically inaccessible: full-page zoom enlarges it too. WCAG criterion 1.4.4 concerns resizing without loss of content or functionality, not mandatory use of a particular unit.

Frequently asked questions

How many rem is 16 px?

1rem with a 16 px root size; 0.8rem with a 20 px root size. You need to know the base to answer.

Should I convert every px value to rem?

No. Choose the unit for the behavior you want: following the root typography, following the component’s typography or keeping a CSS length independent of the font.

Why does my result differ from the converter’s?

Check the computed font size of html, any CSS rules that override your declaration and the rounding. The converter calculates only from the two values provided.