Two-way conversion
Type in the pixel or the rem box and the other updates instantly, so you never have to flip modes.
Free developer tool · Instant
PX to REM Converter Convert Pixels to REM, REM to PX & Bulk-Convert CSS
Turn pixel values into rem units, or rem back into pixels, using any root font size. This free px to rem converter also gives you em, pt, % and vw, converts entire CSS files at once and shows a live preview of the size.
- Two-way, any base size
- Bulk CSS converter
- One-click copy
PX to REM converter
Decimal places
Live preview
Aa Sample
font-size: 1.5rem; /* 24px ÷ 16px */
Bulk convert CSS
Paste a stylesheet and every value is converted as you type.
Paste CSS to start.
Quick conversion table
Based on a 16px root. Click any value to copy it.
| PX | REM | PX | REM |
|---|
Features
Everything you need to work in rem
Most converters handle one number at a time. This one fits the way you actually build: any base size, every common unit and whole stylesheets at once.
Any root font size
Use the browser default of 16px, a 62.5% setup of 10px, or any custom base your design system uses.
em, pt, % and vw too
See every equivalent at once, with your own parent font size for em and a viewport width for vw.
Bulk CSS conversion
Paste a full stylesheet and convert every px to rem, or every rem to px, with options to keep 1px borders and media queries.
Live size preview
See the real size of your value on screen, plus a ready-to-paste CSS line showing the maths behind it.
One-click copy
Copy any result, any table value or the whole converted stylesheet in a single click, with your settings remembered.
How to use
How to use the px to rem converter
Set the root size
Leave it at 16px for most sites, or enter the html font size your project uses.
Enter a value
Type pixels to get rem, or type rem to get pixels. Both boxes stay in sync.
Grab other units
Click the em, pt, % or vw card to copy that value straight to your clipboard.
Convert whole files
Paste CSS into the bulk converter, choose the direction and copy the result.
Reference
PX to REM conversion table (16px base)
The most used pixel sizes and their rem values with the default browser font size of 16px.
| Pixels | REM | Pixels | REM | Pixels | REM | Pixels | REM |
|---|---|---|---|---|---|---|---|
| 1px | 0.0625rem | 12px | 0.75rem | 26px | 1.625rem | 50px | 3.125rem |
| 2px | 0.125rem | 14px | 0.875rem | 28px | 1.75rem | 56px | 3.5rem |
| 3px | 0.1875rem | 15px | 0.9375rem | 30px | 1.875rem | 60px | 3.75rem |
| 4px | 0.25rem | 16px | 1rem | 32px | 2rem | 64px | 4rem |
| 5px | 0.3125rem | 18px | 1.125rem | 36px | 2.25rem | 72px | 4.5rem |
| 6px | 0.375rem | 20px | 1.25rem | 40px | 2.5rem | 80px | 5rem |
| 8px | 0.5rem | 22px | 1.375rem | 44px | 2.75rem | 96px | 6rem |
| 10px | 0.625rem | 24px | 1.5rem | 48px | 3rem | 100px | 6.25rem |
Learn
PX vs REM vs EM: which unit to use
Pixels are fixed, while rem and em scale. Knowing the difference helps you build layouts that respect each visitor's font settings.
PX: fixed size
A pixel value stays the same no matter what. It is precise, but it ignores a visitor who has increased their default text size.
font-size: 18px;REM: relative to the root
rem means root em. It scales with the font size of the html element, so one change resizes your whole interface consistently.
font-size: 1.125rem;EM: relative to the parent
em follows the font size of the parent element, so it compounds when nested. It is useful for spacing that should grow with a component's text.
padding: 0.5em 1em;PT: print points
Points come from print. On screens, 1pt equals 1.333px because CSS defines 96px and 72pt per inch.
pt = px × 0.75VW: relative to the viewport
1vw is 1% of the browser width. It is great for fluid headings, usually combined with clamp() to set limits.
vw = px ÷ viewport × 100The 62.5% trick
Setting html to 62.5% makes 1rem equal 10px, which makes mental maths easy while still respecting user preferences.
html { font-size: 62.5%; }Benefits
Why switch from px to rem
Better accessibility
Text sized in rem grows when people raise their browser font size, which pixel-sized text does not.
Consistent scaling
Change one root value and every rem-based size, gap and radius updates in proportion.
Cleaner design systems
Spacing and type scales expressed in rem are easier to document, share and keep consistent.
Responsive by default
Adjust the root size in a media query and your whole layout adapts without touching each rule.
Framework friendly
Tailwind, Bootstrap and most modern frameworks size type and spacing in rem by default.
Faster refactors
Convert a legacy pixel stylesheet in seconds instead of rewriting every value by hand.
FAQ
PX to REM FAQ
How do you convert px to rem?
Divide the pixel value by the root font size. With the default browser size of 16px, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem. If your site sets a different root size, divide by that number instead.
How do you convert rem to px?
Multiply the rem value by the root font size. With a 16px root, 2rem × 16 = 32px and 0.875rem × 16 = 14px.
What is the default root font size?
Most browsers use 16px as the default font size for the html element. Visitors can change it in their browser settings, which is exactly why rem-based layouts are more accessible.
What is the difference between rem and em?
rem is always relative to the root html font size, so it stays predictable everywhere. em is relative to the font size of the parent element, so nested em values multiply together and can grow or shrink unexpectedly.
Why should I use rem instead of px?
Sizes in rem scale when a visitor increases their default browser font size, while px sizes stay fixed. Using rem for text and spacing makes a site more accessible and lets you rescale a whole layout from one root value.
Should I use html { font-size: 62.5% }?
Setting the root to 62.5% makes 1rem equal 10px with the default browser size, which makes conversions easy. Because it is a percentage it still respects user preferences, but you then need to set body text back to about 1.6rem.
How do I convert px to pt?
Multiply pixels by 0.75. CSS defines 96 pixels and 72 points per inch, so 16px equals 12pt and 24px equals 18pt.
Can I convert a whole CSS file from px to rem?
Yes. Paste your stylesheet into the bulk converter, choose PX to REM, and copy the result. You can keep 1px borders unchanged and skip media query lines if you prefer to leave breakpoints in pixels.
Build with rem, without the maths
Keep the px to rem converter open while you code, convert old stylesheets in seconds, and ship layouts that scale for everyone. For more front-end helpers, explore our free online tools.
Convert px to rem More developer tools