PX ↔ REM Converter
Convert pixel values to rem and back using a configurable base font size.
What is PX ↔ REM Converter?
A px to rem converter takes a CSS length in absolute pixels and re-expresses it as a relative rem value scaled by the root element’s font size, or runs the math the other direction to turn a rem back into pixels. Both units are defined in the CSS Values and Units Module Level 4 specification: px is an absolute length equal to 1/96th of an inch on a reference device, and rem is a relative length equal to the computed font-size of the root <html> element.
This PX ↔ REM Converter accepts any number in either field, recalculates the paired value live as you type, and lets you change the base font size (default 16 px) to match the project you are working in. Frontend developers, design system maintainers, and accessibility specialists use a px to rem converter to migrate fixed-pixel layouts to scalable rem-based typography, to translate Figma specs into responsive CSS, and to confirm that a custom html { font-size: ... } actually produces the spacing the design calls for.
Why use a PX ↔ REM Converter?
- Migrate legacy pixel layouts to scalable units. Convert each spacing token from
pxtoremin seconds so the design respects user font-size preferences without manual division. - Match a non-default base font size. When a project sets
html { font-size: 62.5% }to make1rem = 10px, change the base in the converter and every conversion follows. - Translate Figma specs to CSS. Designers usually work in pixels. Drop the figure into the converter and paste the
remvalue straight into your stylesheet. - Improve accessibility. Browsers scale rem-based typography when users increase the default font size, while fixed pixel values ignore the preference and break layouts.
- Verify rounding behavior. The converter rounds to four decimal places so
13pxat a 16 px base reads as0.8125rem, which is exactly how the browser would compute it.
How to use the PX ↔ REM Converter
- Confirm the Base Font Size (px) matches the root font size of your project. The default is 16, which matches every browser’s untouched default.
- Type a value into Pixels (px) to convert to rem, or into Rem to convert to pixels.
- Read the live result in the other field and in the summary card below.
- Change the base font size and watch both conversions recompute.
- Copy the value you need straight into your stylesheet or design token file.
When to use rem vs px
Both units have a place in modern CSS. The table below covers when each one is the better default.
| Use case | Pick px | Pick rem | Why |
|---|---|---|---|
| Body text size | – | Yes | Scales with user font-size preference |
| Headings | – | Yes | Stays proportional to body text |
| Spacing tokens | – | Yes | Layout adapts to text scaling |
| Media queries | Yes | Optional | Browsers vary on rem behavior pre-2020 |
| Borders, hairlines | Yes | – | Always 1 physical line, regardless of zoom |
| Box shadow offsets | Yes | Optional | Tiny offsets often need pixel precision |
| Icon dimensions | Optional | Yes | Icons inside text should scale with it |
| Image dimensions | Yes | – | Aspect-driven, not type-scale driven |
A common pattern is rem for everything that should scale with text, px for borders and image intrinsic sizes. Tailwind CSS, for example, uses rem for spacing (p-4 = 1rem) and px for borders (border = 1px).
Conversion formula
The math is a single division (or multiplication) against the base font size.
rem = px / base
px = rem * baseAt the default 16 px base, a few common values:
/* px → rem at base 16 */
8px = 0.5rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
20px = 1.25rem
24px = 1.5rem
32px = 2rem
48px = 3remIf the project sets html { font-size: 62.5% }, the base becomes 10 px and the math shifts so 1rem = 10px, which makes 16px = 1.6rem. Change the base value in the converter to match.
Base font size reference
Common base font sizes you may encounter:
| Base setting | Resolved base | Why teams use it |
|---|---|---|
| Browser default | 16 px | No font-size set on :root |
font-size: 100% | 16 px | Explicit but equivalent to default |
font-size: 62.5% | 10 px | Makes 1 rem = 10 px for easy mental math |
font-size: 14px | 14 px | Some legacy systems and editor themes |
| User-scaled large | 20 px+ | When the user increases default font size for accessibility |
The browser default is the safest baseline because it respects the user’s setting. A 62.5% trick is convenient but overrides whatever the user picked, which can break accessibility unless every rem value is reasonable at any base.
Common use cases
- Frontend developers translating Figma sizes. Designers ship pixel values; you ship rem. The converter handles the round trip without spreadsheet math.
- Design system maintainers building tokens. Convert every spacing and font-size token from px to rem once, store the rem values, and let consumers scale the system by changing the root font size.
- Accessibility engineers auditing zoom behavior. Walk through a layout at base 20 px to see what users with large default text experience.
- CSS framework users matching custom themes. Tailwind, Chakra, and Material UI all express sizes in rem. Use the converter to bridge a designer’s pixel spec into the framework’s token format.
- Email developers debugging fixed widths. Some email clients ignore rem; convert back to px before pasting into a template.
Frequently asked questions
Why convert px to rem?
Rem scales with the user’s root font-size preference, so a layout sized in rem respects accessibility settings while a layout sized in px ignores them. Converting fixed pixel values to rem is the first step in making a design responsive to user typography preferences.
What is the default rem size?
The default root font-size in every major browser is 16 px, so 1rem = 16px unless a project changes the root. The converter defaults to 16 for that reason.
Is 1rem always 16px?
Only if no CSS or user setting changes the root font-size. Many design systems set html { font-size: 62.5% } to make 1rem = 10px. Users who change their browser default to 20 px will see 1rem = 20px. Always verify the actual base before relying on a constant.
What is the difference between rem and em?
Rem is relative to the root element’s font-size. Em is relative to the parent element’s font-size. Em values compound through nesting, which can produce surprising results; rem values stay stable no matter how deeply they nest.
Should I use px or rem in media queries?
Both work, but rem is more accessible. Browser zoom and user font-size preferences scale rem-based media queries, so a layout built with min-width: 48rem shifts breakpoints when the user enlarges text. Pixel-based media queries ignore that preference.
Why does Tailwind use rem for spacing?
Tailwind’s spacing scale is rem-based (1 = 0.25rem, 4 = 1rem, 8 = 2rem) so that layouts scale with typography. Users who change their default browser font size see proportional changes throughout the UI without overriding any class.
How precise should I make the rem value?
Four decimal places is enough. 13px / 16 = 0.8125rem is exact; anything beyond is rounding noise the browser ignores. The converter rounds to four decimals for that reason.
Does the converter work for em or %?
The converter handles px and rem only. Em values depend on the parent element’s font-size, which changes per element, so a single converter cannot output them safely. Percent values map cleanly to rem (100% = 1rem) when applied to font-size on the root.
Related tools
- HAR Viewer: Open and inspect HTTP Archive files captured from DevTools.
- User-Agent Parser: Decode any user agent string into browser, OS, and engine.
- Browser Info: Show your current browser, OS, language, and hardware capabilities.
- CSS Prettify: Format and indent CSS for review and readability.
Related tools
HAR Viewer
Drop a .har file and get a network timeline. Filter by status, method, or slow requests.
Open toolURL Parser
Decompose a URL into components and edit query params interactively.
Open toolUnix Timestamp Converter
Convert Unix timestamps to readable dates and back. Supports seconds and milliseconds.
Open toolShotMark captures what you do here, in one click.
The traces, payloads, and tests you run by hand? ShotMark grabs the whole bug and hands it to your AI agent.