PX to REM Converter

How to use the PX to REM converter

1. Set the Root font size (px). It is 16 in every major browser unless your stylesheet changes it. The buttons under the field switch to 16 px, 10 px (the html { font-size: 62.5%; } trick) or 18 px.
2. If you work with em, set the Parent font size for em (px): the computed font size of the element that contains the one you are styling.
3. Under Convert a value, type in Pixels (px), REM or EM. The two other fields update as you type, and the line below shows the division used.
4. The Bulk conversion table lists common sizes. Replace the Pixel values with your own design tokens (spacing scale, type scale…) and use Copy table to paste the result into a spreadsheet or a design document.
5. To migrate existing code, paste it into CSS to convert, choose the options and click Convert px to rem. Load an example shows a small stylesheet. Copy the Converted CSS with Copy.

The formulas

• rem = px ÷ root font size. With the default 16 px, 24px = 24 ÷ 16 = 1.5rem.
• em = px ÷ parent font size. Inside a 20 px heading, 10px = 0.5em.
• px = rem × root font size, and px = em × parent font size.

rem vs em: which one to use?

rem (“root em”) always refers to the font size of the html element, so 1.5rem means the same thing everywhere on the page. It is the safest choice for font sizes, spacing, max-widths and layout gaps.

em refers to the font size of the element itself (for font-size, the parent’s). It compounds: a list at 0.9em nested three times ends up at 0.9 × 0.9 × 0.9 = 73 % of the base. That makes em handy for things that should scale with their own text (the padding of a button, the size of an icon next to a label) and risky for global typography.

Why rem matters for accessibility

Many people raise the default font size in their browser settings (for example from 16 to 20 or 24 px) instead of zooming every page. Sizes written in px ignore that preference; sizes in rem or em follow it. Using rem for text and spacing lets the whole layout grow with the reader’s choice, which helps with WCAG 2.2 success criterion 1.4.4 (resize text up to 200 %).

For the same reason, avoid setting html { font-size: 16px; } in px: use a percentage (100%, or 62.5% if you want 1rem = 10px) so the user’s setting still applies.

What the CSS converter changes

It replaces numbers followed by px in declarations with the value divided by the root font size. It never touches comments, strings or url() values.

• Keep border and outline widths in px: border, border-*-width, outline, outline-offset and column-rule stay in px, so thin lines stay crisp. border-radius is still converted.
• Keep 1px values: any value between −1px and 1px stays as it is.
• Convert media queries to em (16px base): in @media conditions, rem and em always refer to the browser’s initial font size, never to your html rule, so the tool divides by 16 and writes em there, whatever your root size. When unchecked, media queries keep their px.