PX to REM Converter
Convert between px, rem, and em instantly with a custom root font size — two-way, with an em option and a handy reference table. Free, runs in your browser.
| px | rem | Common use |
|---|
💡 How to use
- Type in any box — the other units update instantly using your root font size.
remis relative to the root (html) font size;emis relative to the parent element.- The default 16px root matches the browser default, so 1rem = 16px unless you change it.
Free PX to REM Converter (CSS Unit Converter)
Convert between px, rem, and em instantly. Type any value and the others update live, based on a root font size you control. Includes an em option relative to a parent element and a handy px-to-rem reference table. Free, no sign-up, runs entirely in your browser.
Why convert px to rem?
Pixels are fixed, but rem units scale with the user's preferred font size, which makes them the modern choice for accessible, responsive typography and spacing. Designers often work in pixels, so converting those pixel values to rem is a constant task in front-end development. This tool does the math for you and lets you set the root font size that the conversion is based on.
px vs rem vs em
Each unit answers a different question:
- px — an absolute pixel value that never changes.
- rem — relative to the root (html) font size, so it scales site-wide from one place.
- em — relative to the font size of the current element's parent, so it compounds through nesting.
- Use rem for consistent, global scaling and em for values that should scale with their local context.
How to use the converter
It is fully two-way:
- Set your root font size (the browser default is 16px, so 1rem = 16px).
- Type a value into the px, rem, or em box.
- The other units update instantly.
- Use the reference table for common sizes at a glance.
The 16px default and why it matters
Browsers default to a root font size of 16px, so 1rem equals 16px unless you change the html font size. That default is important for accessibility: users who increase their browser's font size expect rem-based layouts to grow with it. Avoid setting the root to a tiny fixed pixel value just to make the math rounder — it can override a user's accessibility settings. If you keep the default, the mental shortcut is simply px ÷ 16 = rem.
When to use em instead of rem
em is relative to the parent element's font size, which makes it perfect for values that should scale with their component — like padding inside a button that should grow if the button's text grows. The catch is that em compounds: nest several em-sized elements and the sizes multiply. rem avoids that by always referring to the root, which is why rem is usually the safer default for font sizes and global spacing.
Pro tip
Define your spacing and typography scale in rem so the whole interface responds to one root value and to user font-size preferences. Reach for em only when you specifically want an element to scale with its local context. For fluid type that scales between breakpoints, pair rem with CSS clamp(). See our other CSS tools for gradients, shadows, and layout.
FAQ
Is this CSS unit converter free?
How do I convert px to rem?
What is the default root font size?
What is the difference between rem and em?
Should I use px or rem for font sizes?
Why avoid changing the root font size to 10px?
Can I convert rem back to px?
Related tools
Pro tip: pair this tool with Upside Down Text Generator and Text Similarity Checker for a faster SEO workflow.