What is REM to PX Converter?
REM to PX converter is a tool that transforms relative em (REM) units into pixels (PX). In web development, REM is a relative unit that refers to the font size of the root element (typically the <html> element), while PX is an absolute unit. This converter helps developers maintain scalable and accessible designs while understanding the actual pixel values their REM units equate to.
When to Use REM to PX Converter
This converter is particularly useful in the following scenarios:
- When designing responsive websites and you need to convert between relative and absolute units
- When working with design systems that use REM units but you need pixel values for reference
- When implementing designs from mockups that provide measurements in pixels, but you prefer coding with REM units
How to Calculate REM to PX
The conversion from REM to PX follows a simple formula:
PX = REM × Root Font Size
Where:
- PX is the resulting pixel value
- REM is the relative em value to convert
- Root Font Size is the base font size of the html element (typically 16px by default in most browsers)
So given that the value of rem is relative on the root font-size. This means that if you assign 16px font-size on <html> on your css, like this one:
This means that 1rem = 16px.
Examples
Basic REM to PX Conversion
Convert 1.5rem to pixels with the default root font size of 16px.
| REM Value | Root Font Size | Calculation | Result |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
Converting Multiple REM Values
Convert 0.75rem, 2rem, and 3.5rem to pixels with a root font size of 16px.
| REM Value | Root Font Size | Calculation | Result |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
Custom Root Font Size
Convert 2.5rem to pixels with a custom root font size of 20px.
| REM Value | Root Font Size | Calculation | Result |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
Common REM to PX Conversion Table
Here's a reference table for common REM values converted to pixels (based on the default 16px root font size):
| REM Value | Pixel Value |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
Related Calculators
To explore more web development and design tools, check out these related calculators: