PX to REM Converter
Convert pixel values to REM units (and back) with a configurable root font size.
How to use this tool
- 1Enter a pixel value in the PX field, or a REM value in the REM field.
- 2Adjust the root font size if your project uses a non-standard base (e.g. 10px for Tailwind's rem scale).
- 3The converted value updates instantly in the opposite field.
- 4Copy the REM value directly into your CSS or design token.
About PX to REM Converter
This px to rem converter does the division with a configurable root font size so you get consistent results. Pixel mocks still arrive in px while modern CSS uses rem, and the reverse happens when a ticket reports rem and QA thinks in pixels.
Root font size is the variable that makes or breaks the conversion. Some teams use a 62.5% trick to make rem values look like px/10. Tailwind discussions frequently assume 16px. If you convert with the wrong base, every spacing token drifts and visual QA fails in subtle ways. Accessibility also matters: users who enlarge root font size expect rem-based layouts to scale, while hard-coded px may not.
Enter a px value to see rem, or enter rem to see px, using the root font size you configure. The relationship is linear: rem = px / root, px = rem × root. Change the root and both directions update. Copy the rem figure into CSS or design tokens. No design file upload is required — this is arithmetic in the page.
Do not confuse rem with em. rem is relative to the root element; em is relative to the parent font size and compounds in nested components. This converter targets rem ↔ px only. Subpixel results appear when inputs do not divide evenly — decide whether to round for your design system.
Convert Figma spacing to rem tokens for a design system sheet. Translate a px-based legacy stylesheet into rem during a refactor. Check what 0.875rem means in px when a bug report uses mixed units. Align Tailwind spacing mental models when someone says "16px" and the code says 1rem. Document a 10px root convention so newcomers stop assuming 16.
Searches include px to rem calculator 16px base, convert rem to px css, root font size rem converter, and tailwind rem to pixel. This is not a full CSS unit lab for vw, vh, or dpi. It solves the root-relative length problem.
Changing root later invalidates previously copied rem values if px intent stayed fixed. Browser zoom is not the same as changing root font-size, though both affect perception. Component libraries mixing px borders with rem padding can still look inconsistent — borders are often kept in px on purpose. Pasting units into the number field may fail parsing — use bare numbers.
Keep the configured root documented in your repo so the page setting matches production CSS. Write the agreed root font size into your design system README and into a CSS custom property comment near the html rule. New hires should be able to open DevTools, read the computed html font-size, and set this tool to the same number in under a minute.
During visual regression tests, lock the root font size in the test harness so rem math stays deterministic. If tests use a different default than production, screenshots will flake in ways that look like component bugs. When migrating a px-heavy codebase, convert spacing and typography first, leave 1px hairlines in px if your team standard says so, and ban accidental em nesting in the same pass.
Code examples
CSS
/* root font size */
html { font-size: 16px; }
/* 24px → 1.5rem */
.heading { font-size: 1.5rem; }
/* SCSS helper */
@function rem($px) {
@return #{$px / 16}rem;
}Frequently asked questions
Most mismatches come from an incorrect root font size assumption. If the project sets 10px or 62.5% on html, a 16px default conversion will drift. Set the root field to match computed styles on the html element. Recalculate after confirming the real base in DevTools.
Zero is mathematically valid and yields zero rem, which may be useless in UI terms but is not a parse crash. Negative lengths are usually invalid in CSS for sizing and signal bad input. Treat negatives as a scenario to reject in your design process even if the calculator shows a number. Prefer non-negative spacing tokens.
Numeric fields typically expect bare numbers; pasted units can fail or be ignored depending on parsing. Strip the suffix and keep units in your head or labels. If conversion looks stuck, check for non-numeric characters. Clean input is the quick fix for this error-like scenario.
rem scales with the root and stays predictable across nesting. em scales with the parent and can compound unexpectedly in nested text. Prefer rem for spacing and type scales in most design systems. Use em sparingly when a component should scale with its local font size on purpose.
The 62.5% trick makes 1rem equal 10px at default browser settings, which some teams like for mental math. It can surprise third-party widgets that assume 16px. Pick one convention, document it, and set this converter's root to match. Consistency beats the aesthetic of nicer numbers.
Fix the root first, then convert each px step to rem and record both in the token table. Spot-check computed styles in the browser after applying CSS. Bulk refactors fail when one forgotten px value remains. Use this calculator as the source of truth for the arithmetic, not screenshots.
Not every px value divides evenly by the root. You can keep fractional rem—modern browsers handle them—or round to an agreed precision in your token system. Rounding introduces visual drift if overdone. Decide on a precision rule in the design system rather than ad hoc chopping.
Users who enlarge default font size benefit more when layout uses rem. Pure px sizes may stay visually smaller relative to text. Converting spacing to rem is part of building resilient UI. Verify with browser font-size adjustments during QA, not only at default settings. In practice, re-run PX to REM Converter on a smaller sample after each change so you can see which input detail caused the mismatch. Keep the original nearby until you trust the export.
Many design systems keep 1px borders in px while converting spacing and type to rem. That hybrid reduces blurry hairlines on some displays. Convert what your standard says should scale with root font size. Asking the converter to rem-ify every literal including borders can fight your own guidelines.
Related Tools
Color Converter
Enter a HEX color and instantly get the RGB, HSL, and component values side by side.
Length Converter
Convert between mm, cm, m, km, inches, feet, yards, and miles — all values shown at once.
Weight Converter
Convert between mg, g, kg, metric tons, oz, lb, and stone — all values shown at once.