If you build websites, design interfaces, or maintain design systems, converting pixel values into rem units is a daily task. Use the calculator below to quickly turn any px value into rem, based on your chosen root font size.
Pixel to Rem Calculator
Enter a pixel value and your root font size (usually 16px) to get the rem equivalent instantly.
What is rem in CSS?
rem stands for “root em.” It is a relative CSS unit based on the root element’s font size (the <html> font size). By default, most browsers use 16px as the root size.
That means:
1rem = 16px(in default browser settings)0.875rem = 14px1.5rem = 24px
Pixel to rem formula
Use this formula to convert px to rem:
rem = pixel value / root font size
Example with default root size:
- Convert 20px to rem
20 / 16 = 1.25rem
Common px to rem conversions (16px root)
| Pixels (px) | Rem | Typical Use |
|---|---|---|
| 12px | 0.75rem | Small labels, helper text |
| 14px | 0.875rem | Secondary paragraph text |
| 16px | 1rem | Body text base size |
| 18px | 1.125rem | Readable body text on desktop |
| 20px | 1.25rem | Subheadings |
| 24px | 1.5rem | Section headings |
| 32px | 2rem | Hero title size |
| 48px | 3rem | Display headings |
Why use rem instead of px?
Pixel units are absolute, while rem units are scalable. In modern responsive design, rem usually provides a better user experience.
- Accessibility: Users who increase browser text size see larger, readable UI text.
- Consistency: Spacing and typography scale together from one root value.
- Maintainability: Easier to update a whole site by adjusting root font size once.
- Responsive design: rem works naturally with fluid layouts and media queries.
Best practices for using rem in your projects
1) Keep a predictable type scale
Start with a base size of 1rem for body text, then step up for headings (for example 1.25rem, 1.5rem, 2rem). A consistent scale makes pages easier to scan and improves visual rhythm.
2) Convert spacing values, not just fonts
Use rem for margins, padding, gaps, and component heights. This keeps spacing proportional to text size and prevents awkward UI density at different zoom levels.
3) Avoid arbitrary decimals
You can keep values clean. Instead of 1.4375rem for routine spacing, use a nearby practical value like 1.5rem unless precision is required for a design system token.
4) Document your root assumptions
If your project root is not the default 16px, document it clearly. Many calculators and developers assume 16px, so transparent standards prevent bugs.
When px still makes sense
rem is excellent for most typography and spacing, but px can still be useful in specific UI details:
- Hairline borders (1px lines)
- Exact icon strokes in certain visual systems
- Pixel-perfect canvas or sprite workflows
A practical approach is mixed units: rem for scalable layout and text, px for tiny fixed visual details.
FAQ
Is 1rem always 16px?
No. It depends on the root font size set on the html element and user browser settings. 16px is just the default in many browsers.
How do I convert rem back to px?
Multiply rem by root font size. Example: 1.25rem × 16 = 20px.
Should I set html font-size to 62.5%?
Some teams do this to make 1rem equal 10px for easier math, but it can create accessibility and expectation issues. Many teams now keep the root at default and use tools like this calculator instead.
Final thoughts
A reliable pixel to rem workflow makes your CSS cleaner, your UI more consistent, and your site more accessible. Bookmark this calculator and use it whenever you convert typography, spacing, or component dimensions from design files into production-ready CSS.