PX to REM and REM to PX Converter
A free px to rem calculator that converts pixel values to rem units and rem values back to pixels, both directions instantly. Supports custom base font size and bulk conversion.
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 × 16 = 12px
2rem × 16 = 32px
0.875rem × 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 |
REM to PX Conversion Table (16px base)
| REM | PX | Common Use |
|---|---|---|
| 0.5rem | 8px | Extra small spacing |
| 0.625rem | 10px | Small text, captions |
| 0.75rem | 12px | Small text, labels |
| 0.875rem | 14px | Secondary text |
| 0.9rem | 14.4px | Secondary text (rounded) |
| 1rem | 16px | Base body text |
| 1.1rem | 17.6px | Slightly larger body |
| 1.125rem | 18px | Slightly larger body |
| 1.2rem | 19.2px | Lead text (rounded) |
| 1.25rem | 20px | Lead text |
| 1.5rem | 24px | H3 / subheadings |
| 1.75rem | 28px | H2 / section headings |
| 2rem | 32px | H1 / page headings |
| 2.5rem | 40px | Display headings |
| 3rem | 48px | Hero headings |
| 4rem | 64px | Large display text |
Converting Real CSS Properties
The formula is the same no matter which property you are converting. If a design spec is written as "20px in rem" or "16px in rem," that means the same thing as "convert 20px to rem." The wording just varies by where the spec came from.
padding: 0.5rem;
/* Design spec: font-size: 14px; → in rem */
font-size: 0.875rem;
/* Design spec: margin: 24px; → in rem */
margin: 1.5rem;
REM is not limited to typography. It works the same way for any length value: padding, margin, gap, width, and max-width all accept rem, and all convert using the identical value ÷ base formula. A 300px container, for example, converts to 18.75rem at a 16px base, and a 700px max-width converts to 43.75rem.
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.
Is this a px to rem calculator?
Yes. This tool works as a px to rem calculator and a rem to px calculator in one, using the tabs above to switch direction. Enter a value, set your base font size, and the result updates instantly with no manual division or multiplication needed.
How do I convert pt to rem?
Points (pt) are a print-oriented unit, commonly seen when a design comes from a PDF, Word document, or a design tool that defaults to pt. First convert pt to px using 1pt = 1.333px, then divide by your root font size to get rem. For example, 12pt is 16px, which is 1rem at a 16px base.
Can I automate px to rem conversion in my build process?
Yes. The postcss-pxtorem plugin converts px values to rem automatically at build time, so you can write pixel values in your source CSS and ship rem in production. This tool is still useful for one-off conversions, checking a design spec, or verifying what a build plugin is doing.
Does rem work for widths and spacing, not just font size?
Yes. Rem converts the same way for any CSS length: padding, margin, gap, width, max-width, and border-radius all accept rem values. The formula is identical regardless of which property you are converting, only font sizes get special accessibility attention because they respond directly to the user's browser font size setting.