PX to REM Converter: Pixels to REM at Any Base Size
PX to REM Converter. Enter a pixel value and your Root Font Size in this px to rem converter to get the rem value, or convert the other way. The screen area calculator breaks the math down step by step so the answer is never a black box.
Interactive Tool
Px to rem at your base font size
Common sizes at a 16px root font size. Convert a list below to show your own values.
Bulk Convert
The PX to REM Converter turns pixel values into rem units (and back) using a root font size you control, so enter a value in either the Pixels or REM field and watch the other one update as you type. Set the Root Font Size field if your project doesn't use the browser default of 16px, or paste a whole list of pixel values into the Bulk Convert box to get every rem equivalent at once, ready to copy into your CSS.
Your mockup says 26px, but your stylesheet should speak rem. This PX to REM converter takes any figure in pixels and returns its rem value instantly, and it works in both directions so you can check a rem back against pixels too. Rem, short for root em, is a font-relative length unit, so the answer always depends on one number: your root size.
How to Use the PX to REM Converter
Enter your base size first, then type the pixels you want to change and read the rem result as you type. It's a two way px ⇄ rem converter tool: type in the rem box instead and the pixel field fills in, which saves you opening a separate rem to px converter when you're reading someone else's CSS. Leave the base at the browser default if you haven't changed it, since most developers never do.
Setting the Base Font Size on the Root Element
The root element is the <html> tag that wraps every other tag on the page. Whatever font-size you give it becomes the base font every rem multiplies against. Leave it unset and the root font size is 16px in every major browser. Set it with html { font-size: 20px; }, or target the same html element through the :root pseudo-class, which carries higher specificity than the plain html selector. Whichever you pick, enter that same number as the converter's base.
The Formula to Convert PX to REM
Every CSS rem unit value comes from a single division: divide the pixel figure by the root font size.
$$\text{rem} = \frac{\text{px}}{\text{base font size}}$$
To go from rem to px, reverse it and multiply by the base. Because 1rem always equals the root size, a rem is a CSS unit with no pixel width of its own; it borrows one from the root.
Worked Example: A Pixel Value to Its REM Equivalent
Say your project sets the root to 20px, and a card in the mockup uses 26px of padding, a 46px bottom margin and a 35px heading. Divide each pixel value by 20:
- Padding: \(26 \div 20\) = 1.3rem
- Margin: \(46 \div 20\) = 2.3rem
- Heading: \(35 \div 20\) = 1.75rem
Check one in reverse: \(1.3 \times 20\) = 26px. At the 16px default those same rem equivalent values would render at 20.8px and 36.8px instead, so keep the base in the converter matched to the root your site really uses.
PX to REM Conversion Table at the 16px Default Font-Size
These px to rem conversions apply the formula above at three common roots. The 16px column matches the default font-size, the 10px column suits teams who set the root to 62.5% for easy mental math, and the 20px column fits large-print typography.
| Pixels | rem at 16px | rem at 10px | rem at 20px |
|---|---|---|---|
| 2px | 0.125rem | 0.2rem | 0.1rem |
| 10px | 0.625rem | 1rem | 0.5rem |
| 14px | 0.875rem | 1.4rem | 0.7rem |
| 18px | 1.125rem | 1.8rem | 0.9rem |
| 22px | 1.375rem | 2.2rem | 1.1rem |
| 28px | 1.75rem | 2.8rem | 1.4rem |
| 36px | 2.25rem | 3.6rem | 1.8rem |
| 56px | 3.5rem | 5.6rem | 2.8rem |
| 72px | 4.5rem | 7.2rem | 3.6rem |
| 120px | 7.5rem | 12rem | 6rem |
Read across a row to see how the same pixel figure lands on a different font size once only the root changes. That shift is the whole point of rem.
Moving a 15px Admin Theme Off Its Custom Root: Converting PX to REM Step by Step
I'm cleaning up an internal admin dashboard whose old stylesheet pins the root at 15px. The decision I need to make: can I delete that rule and fall back to the browser's 16px default, which respects readers who enlarge their text, without anything on screen changing size? The answer is yes, but only if every value is reconverted at the new base. Reusing the old rem values makes the whole interface grow by about 6.7%.
I pull four hard-coded pixel values from the theme and run each through the converter twice, once at base 15 and once at base 16:
| Element | Pixels | rem at base 15 | rem at base 16 | Old rem rendered at 16 |
|---|---|---|---|---|
| Table cell padding | 9px | 0.6rem | 0.5625rem | 9.6px |
| Body text | 14px | 0.9333rem | 0.875rem | 14.93px |
| Card title | 21px | 1.4rem | 1.3125rem | 22.4px |
| Sidebar width | 248px | 16.5333rem | 15.5rem | 264.53px |
The last column is the trap. The sidebar keeps its old 16.5333rem and quietly gains 16.53px, which is enough to push a data table into horizontal scroll on a 1280px laptop. I recompute that row by hand: 248 ÷ 16 = 15.5, and 15.5 × 16 = 248, so the new value round-trips exactly.
The body text row shows a second, smaller problem. 14 ÷ 15 gives a repeating 0.9333…, and the previous developer had truncated it to 0.93rem, which rendered at 13.95px. At base 16 the answer is a clean 0.875rem. A 16px root is friendlier to this px to rem math because every whole pixel divides into a terminating decimal.
The non-obvious catch is the 900px media query. Rem inside a media query ignores the html rule and uses the browser's initial size, so the old 60rem query (900 ÷ 15) actually fired at 960px all along. At 16 the correct value is 56.25rem, and for once the conversion fixes a bug instead of preserving one.
My judgement: the number to watch is the widest fixed element, not the text, because errors scale with size. Before deleting the 15px rule, I'd grep the theme for every rem value and rerun each one at base 16. WCAG 1.4.4 asks that text resize to 200% without breaking the layout, and leaving the root at the default while storing every size in converted rem is exactly what lets that resize carry through the whole dashboard.
Root Em Explained: The Difference Between PX and REM
The difference between px and rem comes down to what each unit is tied to. A pixel is an absolute unit with a fixed size: 14px stays 14px no matter what. A rem is relative to the root, so it's scalable, and raising the root grows every rem-sized box with it. That also means rem respects the user's browser font-size setting: someone who bumps their default to 20px for readability gets proportionally larger text, while px-locked text ignores them. The same holds on every screen, from mobile devices to wide desktop monitors.
EM vs. REM: Why Nested EM Values Compound
Em is relative to the parent element's font size, so nested values compound: a 1.2em list inside another 1.2em list renders at 1.44 times the outer size. A rem always points back to the root, so it gives the same result at any depth. Rem needs no px fallback today; only older browsers such as Internet Explorer 8 did.
Where to Declare the Root Size: Inline Style or Stylesheet
Find where the root is declared before you convert, since its pixel size is your base. It can live in three places: an inline style on the tag itself (<html style="font-size: 20px">), an internal stylesheet inside a <style> block in the head, or an external stylesheet linked as a .css file, which is the usual choice for production sites. Inside that file, the element selector html is the simplest target. An id selector (#site) or class selector (.theme-large) on the same tag also works and lets you swap roots per theme.
Why Pixels to REM Works for Responsive Design
Converting pixels to rem pays off once a layout has to flex. In fluid responsive design you can change the root at a breakpoint, say 15px below a 600px viewport, and every rem-based box and type size rescales together without touching each rule. That's why a design system usually stores its spacing as rem design-token values, and why Tailwind ships its spacing scale in rem. Unlike other web design measurement units, rem only changes when the root does: pt is fixed to print points, a percentage follows the parent, and vw/vh track the window.
Frequently Asked Questions
- How do you convert px to rem?
- Divide the pixel value by the root font size. With a 20px root, 30px becomes 1.5rem; with the 16px browser default, 40px becomes 2.5rem.
- Is 1rem always equal to 16px?
- No. 1rem equals whatever font-size the <html> element has. It is 16px only when the root is left at the browser default; set the root to 18px and 1rem becomes 18px.
- What base font size should I enter?
- Enter the font-size declared on your html or :root rule. If your stylesheet never sets one, use 16, the default in every major browser.
- How do I convert rem back to px?
- Multiply the rem value by the base font size. At a 16px root, 2.25rem is 36px. Enter the rem value in the reverse field to get the pixel result.
- What is the difference between rem and em?
- Rem is always relative to the root font size, so it gives the same result anywhere on the page. Em is relative to the parent element's font size, so nested em values compound.
- What is the root element?
- It is the <html> element that contains every other tag in the document. The font-size you give it is the base every rem value is calculated from.
- Why use rem instead of px?
- Rem sizes scale with the root, so they respect a reader's browser font-size setting and let you resize a whole layout by changing one value, which helps responsive design.