PX to REM Converter
Convert px to rem and rem to px, both directions at once.
A free online px to rem converter (and rem to px converter) — type into either field and the other updates instantly. The base font size defaults to the standard browser value of 16px and is fully editable. No signup, runs entirely in your browser.
Base font size
The root font size 1rem is calculated against (browser default is 16px)
Equivalent
Common px → rem values
| px | rem |
|---|---|
What is a rem unit?
A rem ("root em") is a relative CSS unit equal to the font size of the document's root element (<html>), which is 16px by default in every major browser. So by default, 1rem = 16px, 1.5rem = 24px, and so on. Unlike px, rem scales when the user or a site changes the root font size — which is why it's the preferred unit for font sizes and spacing in accessible, responsive CSS.
The px to rem and rem to px formulas
Converting between the two units is a single division or multiplication against the base font size:
- px to rem:
rem = px ÷ base font size - rem to px:
px = rem × base font size
At the default 16px base, 16px is exactly 1rem, 24px is 1.5rem, and 32px is 2rem. Change the base font size above and every value recalculates against the new base.
Why base font size matters
Rem values are always relative to the root element's font size, not a fixed constant. Most projects leave the browser default of 16px alone, but some reset it — a common trick is html { font-size: 62.5% }, which makes the root 10px so that 1rem = 10px and mental math gets easier (1.6rem = 16px). If your project uses a custom base, set it in the field above so every conversion here matches your actual CSS.
Accessibility: why rem beats px
Browsers let users increase their default font size in accessibility settings for easier reading. Elements sized in rem scale up along with that setting, because rem is always computed relative to the root font size. Elements sized in fixed px stay exactly the same size no matter what the user changes — which can leave text and tap targets too small for people who rely on larger text. This is why rem (or em) is generally recommended over px for font-size, padding, and margin in production CSS.
Frequently asked questions
How do I convert px to rem?
Type a pixel value into the PX field. The REM field updates instantly using the formula rem = px ÷ base font size, where the base font size defaults to 16px (the browser default) but can be changed to match your project's root font size.
How do I convert rem to px?
Type a rem value into the REM field. The PX field updates instantly using the formula px = rem × base font size. Both fields stay in sync — there's no separate mode to switch between the two directions.
What is the default base font size for rem?
16px is the default root font size in every major browser, which is why 1rem equals 16px out of the box. If a project sets a different root font size (for example html { font-size: 62.5% } to make 1rem = 10px), change the base font size field to match.
Why use rem instead of px in CSS?
Rem units scale with the user's browser font-size setting, which px does not. Someone who bumps their browser's default text size up for readability sees rem-based layouts scale accordingly, while pixel-based text and spacing stay locked at a fixed size. This makes rem the more accessible choice for font sizes and most spacing values.
Is my data uploaded anywhere?
No. All conversion happens locally with JavaScript in your browser. Nothing is uploaded or stored on a server.
Related tools: Aspect Ratio Calculator · CSS Clip Path Generator · CSS Box Shadow Generator
