PX to REM Converter
Convert pixel values to rem units and rem values back to pixels. Supports custom base font size.
What is REM in CSS?
REM stands for Root EM. It is a CSS unit relative to the font size of the root element — the <html> tag. Unlike pixels which are fixed, REM scales with the user's browser font size setting. Unlike EM which is relative to the parent element, REM always refers to the same root value, making it consistent and predictable no matter how deeply nested your element is.
The default root font size in all browsers is 16px unless the user has changed it or the stylesheet overrides it. This means 1rem = 16px by default.
How to Convert PX to REM
Divide the pixel value by the root font size:
Examples at 16px root:
12px / 16 = 0.75rem
32px / 16 = 2rem
How to Convert REM to PX
Multiply the rem value by the root font size:
Examples at 16px root:
0.75rem x 16 = 12px
2rem x 16 = 32px
0.875rem x 16 = 14px
PX to REM Conversion Table (16px base)
| PX | REM | Common Use |
|---|---|---|
| 8px | 0.5rem | Extra small spacing |
| 10px | 0.625rem | Small text, captions |
| 12px | 0.75rem | Small text, labels |
| 14px | 0.875rem | Secondary text |
| 16px | 1rem | Base body text |
| 18px | 1.125rem | Slightly larger body |
| 20px | 1.25rem | Lead text |
| 24px | 1.5rem | H3 / subheadings |
| 28px | 1.75rem | H2 / section headings |
| 32px | 2rem | H1 / page headings |
| 40px | 2.5rem | Display headings |
| 48px | 3rem | Hero headings |
| 64px | 4rem | Large display text |
Why Use REM Instead of PX?
Accessibility
Users can increase their default browser font size for readability. If your site uses px for font sizes, those sizes are fixed and ignore the user's preference. REM-based font sizes scale with the user's setting — this is a key accessibility requirement and good practice regardless.
Global Scaling
Change one value — the root font size — and every REM-based measurement on your site scales proportionally:
@media (max-width: 768px) {
html { font-size: 14px; }
/* Everything in rem shrinks proportionally */
}
Consistency Across Components
Unlike EM which inherits from the parent and can compound unpredictably when nested, REM always refers to the same root value. This makes it reliable in design systems and component libraries where nesting depth varies.
REM vs PX vs EM — When to Use Each
- REM — Font sizes, spacing, layout dimensions. Best for almost everything in modern CSS.
- PX — Borders (1px), box shadows, fine details where you need exact fixed control.
- EM — Padding inside components where the spacing should scale with the component's own font size.
- % — Widths and heights in fluid layouts.
- vh/vw — Full-screen sections, viewport-relative sizing.
How to Set Root Font Size
Apply font-size to the html element, not body. Setting it on body does not affect rem calculations:
html { font-size: 16px; }
/* This does NOT affect rem */
body { font-size: 16px; }
How to Use This Converter
- Select PX to REM or REM to PX using the tabs
- Enter your value and set the Base Font Size — default is 16px
- The result updates instantly — click Copy Result to copy
- For multiple values, use the Bulk Convert section — one value per line
Frequently Asked Questions
What is 1rem in pixels?
By default, 1rem equals 16px in all browsers. If your project sets html { font-size: 62.5%; }, then 1rem equals 10px. If your root is set to 18px, then 1rem equals 18px.
Should I use rem or px for font sizes?
Use rem for font sizes in almost all cases. Pixel font sizes are fixed and override the user's browser font size preference, which is an accessibility issue. REM-based font sizes respect that preference.
Does rem work the same as em?
No. EM is relative to the parent element's font size and compounds when nested. REM is always relative to the root element and never compounds. A 0.75rem value is the same size anywhere on the page.
What is the 62.5% trick?
Setting html { font-size: 62.5%; } makes the root font size 10px (62.5% of the browser default 16px). This means 1rem = 10px, which makes mental math easier — 1.6rem = 16px, 2.4rem = 24px. It preserves accessibility because it is still percentage-based. The tradeoff is that you need to reset body { font-size: 1.6rem; } to restore the default text size.
Can I mix rem and px in the same stylesheet?
Yes, and it is common practice. Use rem for font sizes and most spacing. Use px for fine details like 1px borders and box-shadow blur values. Most design systems use this hybrid approach.