PX to REM Converter
Convert pixels to rem and back, or a whole stylesheet at once.
Sizes That Respect The Reader’s Font Setting
A rem is the root element’s font size — 16 pixels in every browser by default. Sizing text and spacing in rem instead of pixels means the layout follows a reader who has asked for larger text, which is an accessibility requirement as much as a nicety. The arithmetic is simple, but doing it forty times while refactoring a stylesheet is not.
Convert a single value either way, read a table of common sizes, or paste a whole stylesheet and convert every pixel value in one go. Hairline borders and media query breakpoints can be left in pixels, which is usually what you want.
Key features
- Two-way conversion — type pixels or rem and the other updates.
- Any root size — for sites that set html { font-size } to something other than 16px.
- Bulk stylesheet conversion — every px value in pasted CSS, instantly.
- Sensible exceptions — keep 1px borders and media queries in pixels if you choose.
- Reference table — 26 common sizes from 1px to 128px.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: PX to REM Converter
- Set the root font size
Leave it at 16 unless your CSS changes the html font size. - Convert a value
Type pixels or rem; the other field and the copy line update. - Or paste a stylesheet
Every pixel value is converted in the output box. - Copy the result
Paste the converted CSS back into your project.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What is the difference between rem and em?
rem is relative to the root element’s font size, so it means the same everywhere on the page. em is relative to the current element’s font size, so it compounds when elements are nested. rem is easier to reason about for layout and type scales.
Why not convert media queries?
In a media query, rem and em always refer to the browser’s default font size, never to a root size set in your CSS. Converting breakpoints with a custom root size would move them, so they are left in pixels by default.
Should borders be in rem?
Usually not. A 1px hairline is meant to be the thinnest line the screen can draw, and scaling it with the font size makes it look heavy. That is why 1px values are kept by default.
What does 62.5% font-size do?
Setting html { font-size: 62.5% } makes 1rem equal 10px in a default browser, which makes mental arithmetic easier. If your project does that, set the root size here to 10.
Is rem supported everywhere?
Yes, in every browser in use today, and it has been for over a decade.