PX to REM converter
Convert PX to REM, instant results, clear and easy.
PX 
︎ REM conversion tables
Pixels to Rem
| Pixels | REM |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 3px | 0.1875rem |
| 4px | 0.25rem |
| 5px | 0.3125rem |
| 6px | 0.375rem |
| 7px | 0.4375rem |
| 8px | 0.5rem |
| 9px | 0.5625rem |
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 23px | 1.4375rem |
| 24px | 1.5rem |
| 25px | 1.5625rem |
| 26px | 1.625rem |
| 27px | 1.6875rem |
| 28px | 1.75rem |
| 29px | 1.8125rem |
| 30px | 1.875rem |
| 32px | 2rem |
| 34px | 2.125rem |
| 36px | 2.25rem |
| 38px | 2.375rem |
| 40px | 2.5rem |
| 42px | 2.625rem |
| 44px | 2.75rem |
| 46px | 2.875rem |
| 48px | 3rem |
| 50px | 3.125rem |
| 52px | 3.25rem |
| 54px | 3.375rem |
| 56px | 3.5rem |
| 58px | 3.625rem |
| 60px | 3.75rem |
| 64px | 4rem |
| 68px | 4.25rem |
| 72px | 4.5rem |
| 76px | 4.75rem |
| 80px | 5rem |
| 84px | 5.25rem |
| 88px | 5.5rem |
| 92px | 5.75rem |
| 96px | 6rem |
| 100px | 6.25rem |
| 112px | 7rem |
| 128px | 8rem |
| 144px | 9rem |
| 160px | 10rem |
| 176px | 11rem |
| 192px | 12rem |
| 208px | 13rem |
| 224px | 14rem |
| 240px | 15rem |
| 256px | 16rem |
| 320px | 20rem |
| 384px | 24rem |
| 448px | 28rem |
| 512px | 32rem |
| 640px | 40rem |
| 768px | 48rem |
| 896px | 56rem |
| 1024px | 64rem |
| 1280px | 80rem |
| 1536px | 96rem |
| 1792px | 112rem |
| 2048px | 128rem |
Convert Pixels to REM Effortlessly
This pixel-to-REM converter allows you to seamlessly convert pixels to the CSS unit REM (Learn more about REM on MDN). The conversion is based on the default root font-size of 16 pixels, but you can easily adjust this value to match your specific design requirements.
Using the CSS rem unit, you can define sizes relative to the font-size of the HTML root element (<html>). This makes rem a powerful tool for creating scalable and responsive designs that adapt seamlessly to different screen sizes and user preferences.
Why Use REM Units?
REM units are essential for modern web design because they offer:
- 1.Scalability: REM units scale relative to the root font size, making your design more flexible and responsive.
- 2.Consistency: Unlike
emunits, which are relative to the parent element's font size,remunits are consistent across the entire document. - 3.Accessibility: REM units respect user-defined font sizes, improving accessibility for users who adjust their browser settings.
Example Conversion
Let’s take the default root font size of 16px as an example:
- 1px = 0.0625rem
- 1rem = 16px
This means that if you set an element’s font-size to 1rem, it will render as 16px by default. Similarly, if you want an element to be 8px wide, you can use 0.5rem.
REM vs. EM: Key Differences
Understanding the difference between rem and em is crucial for effective CSS styling:
| Feature | REM | EM |
| Relative To | Root element (<html>) font size | Parent element’s font size |
| Consistency | Consistent across the entire document | Can vary for each element |
| Use Case | Global sizing (e.g., layouts, spacing) | Local sizing (e.g., nested elements) |
| Browser Support | Supported in modern browsers | Supported in all browsers |
Key Takeaway: Use rem for global sizing and em for local, context-dependent sizing. For example, use rem for margins, paddings, and font sizes, and em for properties that need to scale relative to their parent element.
Browser Support for REM
REM units are supported in all modern browsers, including:
- Chrome
- Firefox
- Safari
- Edge
- Opera
However, if you need to support very old browsers (e.g., Internet Explorer 8 and below), you may need to provide a fallback in pixels.
How to Use This Converter
- 1.Enter a Pixel Value: Input the pixel value you want to convert, and the tool will automatically calculate the corresponding
remvalue. - 2.Adjust Root Font Size: Change the root font size (default is 16px) to match your project’s requirements.
- 3.Copy the Result: Use the Copy button to copy the
remvalue, including theremunit, for easy use in your CSS.
Practical Use Cases for REM
- 1.Responsive Typography: Use
remfor font sizes to ensure text scales proportionally across devices. - 2.Consistent Spacing: Define margins and paddings in
remto maintain consistent spacing regardless of the user’s font size settings. - 3.Scalable Layouts: Use
remfor widths, heights, and other dimensions to create layouts that adapt to different screen sizes.
Frequently Asked Questions (FAQs)
Can I use REM and EM together?
Yes! Combining rem and em can give you the best of both worlds. Use rem for global consistency and em for local scaling.
What happens if I change the root font size?
All rem values will scale proportionally. For example, if you change the root font size to 20px, 1rem will equal 20px.
Is REM better than PX?
REM is better for responsive and accessible designs, while PX is better for fixed sizes. Use REM for scalability and PX for precise control.
Final Thoughts
Converting pixels to REM is a fundamental skill for modern web development. By using REM units, you can create designs that are not only responsive but also accessible and maintainable. Whether you’re a beginner or an experienced developer, this tool and guide will help you master the art of pixel-to-REM conversion.
Call to Action
Try the Pixel to REM Converter above and streamline your workflow today! Bookmark this page for quick access to the converter and reference tables whenever you need them.
See Other Tools
