PX to REM converter

The most used sizes at the browser default. For another root size, change it in the tool above and the table there updates.

rem = px ÷ root font size

24px ÷ 16 = 1.5rem
14px ÷ 16 = 0.875rem
24px ÷ 10 = 2.4rem   (html { font-size: 62.5%; })

1rem is the computed font-size of the root html element. Browsers start it at 16px, and a user can change that default in their browser settings. If your CSS sets html { font-size: 62.5%; }, the root becomes 10px (62.5% of 16px) and the math gets easier: 24px is 2.4rem. Setting the root in px (font-size: 10px) also works, but it overrides the user's chosen text size, which is the main reason to use rem in the first place.

Not sure what your project uses? Run getComputedStyle(document.documentElement).fontSize in the browser console on your site.

Sass (use math.div; the / division operator is deprecated):

@use 'sass:math';

@function rem($px, $root: 16px) {
  @return math.div($px, $root) * 1rem;
}

.card { padding: rem(24px); }   // 1.5rem

JavaScript, using the root size the page really has:

const root = parseFloat(getComputedStyle(document.documentElement).fontSize); // 16
const pxToRem = px => `${px / root}rem`;
pxToRem(24); // "1.5rem"

PostCSS: the postcss-pxtorem plugin rewrites px to rem at build time, so you can keep writing px. Its propList and minPixelValue options do what the "keep 1px borders" switch does in the tool.

Tailwind CSS: one spacing step is 0.25rem, so 24px is 1.5rem is p-6. The tool shows the class for each value. Tailwind v4 accepts any multiple of 0.25 (like p-13), while v3 has a fixed scale and needs an arbitrary value such as p-[3.25rem] between its steps. The REM to PX converter has the full Tailwind spacing table.

WCAG 2.2 asks that text can be resized to 200% without losing content (success criterion 1.4.4). Browser zoom does that for px too, but people who raise only the default font size in their settings get bigger text only where the CSS uses rem or em.

• Media queries ignore your root. @media (min-width: 48rem) is always 48 times the browser default (768px at 16px), even with html { font-size: 62.5% }. Convert breakpoints with 16, not 10.
• em compounds, rem does not. Swapping px for em in nested components makes sizes multiply. rem is the safer one-to-one replacement.
• Long decimals are fine. 13px is 0.8125rem; browsers handle the decimals, and rounding to 0.81rem changes the result by a fraction of a pixel.
• Tailwind's rem values assume 16px. If you set the root to 10px, p-4 becomes 10px instead of 16px. Change the root and the whole scale moves.
• 1px = 0.0625rem. A border in rem grows with the reader's default text size: with a 20px default, 0.0625rem is 1.25px. Hairlines are meant to stay thin, so keep them in px (the bulk converter does that by default).

Shrinking CSS after converting? The CSS minifier removes whitespace and comments. For sizing images and video, try the aspect ratio calculator, and browse Tailwind CSS tools on DevHunt.