Pixel to REM Converter
Convert between px, rem, em, %, and pt with a customizable root font size. 100% client-side — works offline.
px
Default browser value: 16px
pixels
root em
parent em
percent
points
16px=1rem=1%(root = 16px)
Generated CSS
/* 16px = 1rem (root: 16px) */
.element {
font-size: 1rem;
}📊 Reference Table (root = 16px)
| Pixels (px) | REM | EM | Percent (%) |
|---|---|---|---|
| 4px | 0.25rem | 0.25em | 25% |
| 8px | 0.5rem | 0.5em | 5% |
| 10px | 0.625rem | 0.625em | 62.5% |
| 12px | 0.75rem | 0.75em | 75% |
| 14px | 0.875rem | 0.875em | 87.5% |
| 16px | 1rem | 1em | 1% |
| 18px | 1.125rem | 1.125em | 112.5% |
| 20px | 1.25rem | 1.25em | 125% |
| 24px | 1.5rem | 1.5em | 15% |
| 28px | 1.75rem | 1.75em | 175% |
| 32px | 2rem | 2em | 2% |
| 36px | 2.25rem | 2.25em | 225% |
| 40px | 2.5rem | 2.5em | 25% |
| 48px | 3rem | 3em | 3% |
| 56px | 3.5rem | 3.5em | 35% |
| 64px | 4rem | 4em | 4% |
| 72px | 4.5rem | 4.5em | 45% |
| 80px | 5rem | 5em | 5% |
| 96px | 6rem | 6em | 6% |
| 128px | 8rem | 8em | 8% |
🔒 100% private: All conversions happen in your browser. Works offline after first load.
About Pixel to REM Converter
REM ("root em") and EM are relative CSS units that scale with the user's font size — making them essential for accessible, responsive design. PX is an absolute unit and does not scale. As a rule, use rem for font sizes, spacing, and layout (accessibility + responsiveness) and px only for things that must not scale (like borders or shadows). This tool converts between px, rem, em, %, and pt using a customizable root font size (usually 16px, the browser default). It also provides a quick-reference table of common pixel values. All conversion happens in your browser.
How It Works
- Enter a value in any unit field (px, rem, em, %, pt).
- Set your root font size (default is 16px — the browser default).
- All other unit fields update automatically.
- Use the conversion table below for common values.
✨ Key Features
- ✓Convert between px, rem, em, %, pt, and cm/mm/in
- ✓Customizable root font size
- ✓Live conversion as you type
- ✓Quick-reference table for common pixel values
- ✓Copy any value with one click
- ✓Handles decimals and precision
- ✓100% client-side — no data sent to any server
- ✓Works offline after first load
- ✓Modern accessible design (WCAG contrast)
- ✓No signup, no ads, no limits
🎯 Common Use Cases
- →Converting design specs (in px) to rem for CSS
- →Building accessible font-size scales
- →Migrating legacy CSS from px to rem
- →Calculating responsive spacing values
- →Converting Figma/Sketch designs to code
- →Debugging font-size inheritance issues
- →Setting up a design system with rem tokens
- →Teaching CSS units to students
💡 Advanced Tips & Pro Insights
- ▸The default root font size is 16px in every modern browser. This matches the "medium" font size in browser settings.
- ▸REM is relative to the ROOT element (html) font size. EM is relative to the PARENT element font size. For global scales, use rem. For component-relative sizing, use em.
- ▸Never set html { font-size: 10px } just to make math easier — it breaks user accessibility settings (users who set 20px would still see 10px). Use rem with a 16px base, or use the CSS calc() function.
- ▸To convert px to rem manually: rem = px / root-font-size. Example: 24px / 16px = 1.5rem.
- ▸For 62.5% trick: html { font-size: 62.5% } makes 1rem = 10px (since 62.5% of 16px = 10px). This makes math easy but is debated for accessibility — prefer calc() or just dividing by 16.
Frequently Asked Questions
Is this px to rem converter free?▾
Yes, this pixel to REM converter is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All conversion happens in your browser. No values are sent to any server.
What is the difference between px, rem, and em?▾
px (pixel) is an absolute unit that does not scale. rem (root em) is relative to the root element (html) font size. em is relative to the parent element font size. rem and em scale with user font preferences, px does not.
Why use rem instead of px?▾
rem respects user font-size preferences — a user who needs larger text will see your design scale accordingly. px overrides user preferences, which is an accessibility problem. For content that should scale (fonts, spacing, layout), use rem.
What is the default root font size?▾
16px is the browser default for root font size (unless the user has changed it in browser settings). This tool uses 16px by default but lets you customize it.
How do I convert 24px to rem?▾
Divide by the root font size: 24px / 16px = 1.5rem. The formula is: rem = px ÷ root-font-size.
Should I use rem or em?▾
Use rem for global scales (typography, spacing, layout) because it is predictable — always relative to root. Use em when you want sizing relative to the parent element, like in components where font-size is inherited.
What about the 62.5% trick?▾
Setting html { font-size: 62.5% } makes 1rem equal to 10px, which simplifies mental math (24px = 2.4rem). But it can confuse users who set a larger browser font. Modern best practice is to keep 16px base and use calc() or rem with decimal values.