PX to REM Converter
Convert pixels to rem and em for responsive CSS.
The browser default is 16px.
Results update as you type.
How it works
A px to rem converter translates fixed pixel measurements into rem units, the scalable unit that underpins responsive and accessible CSS. A rem is defined relative to the root font size of the page, so sizing in rem lets an entire layout grow or shrink in proportion when a user changes their browser's base font size, something pixels ignore. This tool divides your pixel value by the root font size to give the exact rem equivalent, and the matching em value. Using rem matters for accessibility and maintainability. Readers who increase their default font size, often because they need larger text, see rem-based layouts scale gracefully while pixel-based ones stay stubbornly fixed. Working in rem also makes global type scaling trivial: change the root size once and everything sized in rem follows. Designers usually think in pixels, so a converter bridges the gap between a mockup and the stylesheet. The conversion works because one rem equals the root font size, so the number of rems is the pixel value divided by that root size. With the browser default of 16 pixels, 16px is 1rem and 24px is 1.5rem. The em unit follows the same arithmetic but is measured against its nearest sized ancestor rather than the root, so it can compound in nested elements. Front-end developers and designers use a px to rem converter to build layouts that respect user font preferences.
rem = pixels ÷ root font size
The rem unit is defined as a multiple of the root font size, so converting a pixel value means asking how many root-font-size steps fit into it, which is simply the pixels divided by the root size. With the common 16-pixel default, 16px equals 1rem and 24px equals 1.5rem. The em unit uses the same division against its reference font size, so with a matching reference the numeric value is identical.
Source:CSS specification (W3C)
We review all our tools from time to time to ensure accuracy.
Worked example
How to use this calculator
- 1
Enter your values
Enter pixel value and root font size.
- 2
Adjust the options
Fine-tune any options to match your situation.
- 3
Read your result
In rem updates instantly as you type — no button to press.
Frequently asked questions
What is the difference between rem and em?
Both are relative units, but they measure against different references. A rem is always relative to the root element's font size, so it stays consistent across the whole page. An em is relative to the font size of its own element or nearest sized ancestor, so it can compound when elements nest inside one another. Rem is predictable for layout, while em is handy for spacing that should scale with local text.
Why is the default root font size 16px?
Browsers ship with a default root font size of 16 pixels, which is why 16px equals 1rem out of the box. This default balances readability across typical screens and viewing distances. Users can change it in their browser settings, and designs sized in rem will honour that choice. Keeping the standard 16-pixel base, rather than overriding it, respects users who have set a larger size for comfortable reading.
Should I use rem or px for font sizes?
Rem is generally preferred for font sizes because it scales with the user's chosen base size, improving accessibility for readers who enlarge text. Pixels stay fixed regardless of that preference, which can frustrate people who need bigger type. Many teams use rem for typography and spacing to keep layouts flexible, reserving pixels for details like fine borders where a fixed, non-scaling size is genuinely desirable.
Does changing the root size break my layout?
If your layout is sized consistently in rem, changing the root font size scales everything together in proportion, which is the intended behaviour and a feature rather than a bug. Problems arise only when rem and fixed pixels are mixed carelessly, so some elements scale and others do not. Sizing consistently in rem lets you retune an entire design's scale from a single root declaration without touching individual rules.
How do I convert rem back to pixels?
Multiply the rem value by the root font size. With the standard 16-pixel base, 1.5rem times 16 equals 24 pixels. This reverse conversion is useful when checking a design against a pixel-based mockup or communicating exact sizes to a designer. Just remember the result depends on the current root size, so if the base changes, the equivalent pixel value for the same rem changes with it.