Base value for rem and em calculations
Conversion Results
Calculation based on root font-size of 16px
A PX to REM converter allows you to convert pixel values into scalable REM units quickly and accurately. In modern CSS development, designers prefer REM units because they scale relative to the root font size, improving accessibility and responsive behavior. Whether you want to convert PX to REM, calculate values using a 16px base, or understand the PX to REM formula, this tool makes the process simple. If you’re working on responsive typography or layout spacing, using a reliable PX to REM calculator ensures consistent design across different devices and screen sizes.
If you need additional CSS conversions, you can explore our complete CSS unit toolkit here:
Conversion Tool
Use the PX to REM calculator above to instantly convert pixel values into REM. Simply enter your pixel value, set your root font size (default is 16px), and the tool will calculate the accurate REM result in real time.
If you need to reverse the calculation, you can also use our REM to PX converter:
For EM-based scaling, check our dedicated PX to EM tool:
Formula Section
Understanding the PX to REM formula helps you manually verify calculations and write more precise CSS.
PX to REM Formula:
By default, most browsers use a 16px base font size. This means:
This means:
So, when you convert PX to REM with a 16px base, you simply divide the pixel value by 16.
For official documentation on CSS length units, you can refer to
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Knowing how to convert PX to REM in CSS is especially helpful when creating scalable design systems.
Practical Example
Let’s look at a real example of px to rem with 16px base.
Example 1:
Convert 32px to REM.
REM = 32 ÷ 16
REM = 2rem
So, 32px equals 2rem.
Example 2:
Convert 24px to REM.
24 ÷ 16 = 1.5rem
If your root font size is different, such as 18px, then:
32 ÷ 18 = 1.78rem
This flexibility is why developers use REM units for responsive font size px to rem conversions. It ensures that typography scales proportionally when users change browser settings.
When To Use This Conversion?
You should convert PX to REM in CSS when:
Designing responsive typography
Creating scalable spacing systems
Improving accessibility for users
Building flexible UI frameworks
Working with root-based layout systems
Unlike pixels, REM units adapt when the root font size changes, making them ideal for responsive design.
If you are working with print-related sizing, you may also need our
PT to PX converter:
/pt-to-px/
For viewport-based layouts, you can explore our
VW to PX converter:
/vw-to-px/
Using the correct CSS unit improves maintainability and long-term scalability of your design system.
Quick Conversion Table (16px Root)
Below is a quick reference table for common pixel values converted using a 16px root font size:
| PX | REM |
|---|---|
| 8 | 0.5rem |
| 12 | 0.75rem |
| 16 | 1rem |
| 20 | 1.25rem |
| 24 | 1.5rem |
| 32 | 2rem |
| 40 | 2.5rem |
| 48 | 3rem |
| 64 | 4rem |
This table helps when you need fast manual conversions without using the calculator.
FAQ – PX to REM Converter
What is the default root font size in browsers?
Most modern browsers use 16px as the default root font size.
Is REM better than PX?
REM is generally better for responsive and accessible design because it scales relative to the root element.
How do I convert PX to REM manually?
Divide the pixel value by the root font size.
Example: 24 ÷ 16 = 1.5rem.
Does changing the root font size affect all REM values?
Yes. Since REM is relative to the root element, adjusting the root font size scales all REM-based elements proportionally.