REM to PX Converter

Some projects set html { font-size: 62.5%; } so that 1rem equals 10px and the math becomes easy. It works, but you then need to reset body text to 1.6rem, and third-party components that assume a 16px root can end up too small.

Keeping the default 16px root and converting with a table like the one above is usually the safer choice.

A rem (root em) is a CSS length unit equal to the font size of the root element, which is the html element. Browsers set that root font size to 16px by default, so 1rem equals 16px in almost every real-world project. If you change the root font size, every rem value in your stylesheet scales with it.

That makes rem different from px. A pixel value stays fixed, while a rem value follows the root font size, including when a person increases the default font size in their browser settings. This is why most modern design systems express font sizes and spacing in rem: the whole interface grows proportionally for people who need larger text.

The formula is simple: multiply the rem value by the root font size. With the default 16px root, 0.5rem is 8px, 1rem is 16px, 1.25rem is 20px, 1.5rem is 24px, 2rem is 32px and 3rem is 48px.

If your project uses a different root size, multiply by that number instead. A site that sets the root to 10px (often done with html { font-size: 62.5% }) turns 1.6rem into 16px and 2.4rem into 24px. A site with an 18px root turns 1rem into 18px. The converter above lets you switch the root size and see the result immediately.

Design tools like Figma work in pixels, so developers usually convert values when building. The cleanest approach is to keep the browser default of 16px and convert every type size and spacing value by dividing by 16. A 14px label becomes 0.875rem, a 24px heading becomes 1.5rem and a 40px section gap becomes 2.5rem.

If the design follows a 4px or 8px grid, most values convert to tidy rem numbers: multiples of 0.25rem or 0.5rem. Odd values like 13px or 15px produce long decimals (0.8125rem, 0.9375rem), which is a good sign that the design should be rounded to the grid.

Not every value needs to be in rem. Hairline borders (1px), box-shadow offsets and some decorative details should stay in px so they do not become thick or blurry when text is scaled. Media queries can use either; em-based breakpoints respond to the user's font size setting, which some teams prefer.

A practical rule is: use rem for anything related to reading (font size, line spacing, padding around text, layout widths that hold text), and px for fine visual details that should never grow.

Tailwind's default scales are written in rem. The spacing scale is based on 0.25rem steps (p-1 is 0.25rem or 4px, p-4 is 1rem or 16px, p-6 is 1.5rem or 24px), and the font sizes run from text-xs (0.75rem, 12px) to text-9xl (8rem, 128px). Because of this, keeping the default 16px root is the easiest way to make Tailwind values match your design file.

Most other design systems, including Material and many company systems, also define tokens in rem or in px values that map neatly to rem at a 16px root. Writing your own design tokens in rem keeps them consistent with these tools.

If you convert values often, let your tools do it. In Sass, a small function such as rem($px) that returns math.div($px, 16px) * 1rem turns rem(24px) into 1.5rem at compile time. In plain CSS, you can keep the pixel value readable with calc(24 / 16 * 1rem), which modern browsers resolve to 1.5rem.

In JavaScript, for example when generating inline styles or design tokens, divide by the root font size: 24 / 16 = 1.5. If you need the live root size (for users who changed their default), read parseFloat(getComputedStyle(document.documentElement).fontSize) instead of assuming 16.

Design systems rarely use raw numbers in components. Instead, 24px would live in a token such as --font-size-heading-24 for type or --space-6 for spacing, defined once as 1.5rem. Components then reference the token, so a later change to the scale updates every use at once.

If your team uses Figma variables or a tokens file (for example in the W3C design tokens format), store the value in px for designers and generate the rem version in the build step. That keeps both sides speaking the same language while the shipped CSS stays accessible.

When the browser computes a rem value, it multiplies it by the computed font size of the html element. That font size starts from the user's default (16px unless they changed it), then applies whatever your CSS sets on html. So 1.5rem means "1.5 times the root size", and it is resolved once per page, unlike em, which is recalculated at every level of nesting.

Because the root is shared, rem values are predictable across the whole document: a 1.5rem gap in a sidebar is exactly the same size as a 1.5rem gap in a modal, regardless of the text size inside each.