PX to REM Converter
Conversion Tool
How It Works
The conversion uses this simple formula:
REM = PX / Base Font SizeWith the default base font size of 16px:
24px = 1.5remThis means 1rem equals 16px in your design.
Best Practices
The 62.5% Trick
For easier calculations, many developers use this approach:
html {
font-size: 62.5%; /* Makes 1rem = 10px (assuming browser default of 16px) */
}Now you can think in 10px increments:
1.2rem = 12px1.6rem = 16px2.4rem = 24px
Common Conversions
| Pixels | REM (16px base) | REM (10px base) |
|---|---|---|
| 8px | 0.5000rem | 0.8rem |
| 12px | 0.7500rem | 1.2rem |
| 16px | 1.0000rem | 1.6rem |
| 20px | 1.2500rem | 2.0rem |
| 24px | 1.5000rem | 2.4rem |
| 32px | 2.0000rem | 3.2rem |
| 40px | 2.5000rem | 4.0rem |
| 48px | 3.0000rem | 4.8rem |
Why Shift from PX to REM Sizing?
Pixel (PX) sizes represent static dot alignments on digital screens. Sizing elements in pixels makes them completely rigid, which can break readability for users with visually impaired browser scaling constraints. By converting absolute pixel values to REM (Root EM) relative units, your web layout gains global, harmonious responsiveness. When a visitor adjusts their baseline browser font configurations, the entire document scales flawlessly.
The Mathematical Formula
To convert pixels to REM, divide the target pixel size by the root element's font size (which defaults to 16px in all modern web browsers):
REM = Target Pixels (PX) ÷ Root Font Size (default 16px)
For example, if you are targeting a layout grid padding of 32px under a 16px base font size:
Common PX to REM Conversion Reference Chart (Base 16px)
Use this reference directory of standard UI layouts and typography elements converted to REM relative values at base 16px:
| Pixels (PX) | Base Root Size | Result in REM |
|---|---|---|
| 8 px | 16 px | 0.5 rem |
| 12 px | 16 px | 0.75 rem |
| 14 px | 16 px | 0.875 rem |
| 16 px | 16 px | 1.0 rem |
| 20 px | 16 px | 1.25 rem |
| 24 px | 16 px | 1.5 rem |
| 32 px | 16 px | 2.0 rem |
| 48 px | 16 px | 3.0 rem |
| 64 px | 16 px | 4.0 rem |
REM Sizing Best Practices
To establish pixel-to-rem calculation harmony, many CSS architects implement the 62.5% root scaling methodology. By setting the HTML font size in CSS to html { font-size: 62.5%; }, the baseline is set to 10px instead of the standard 16px. This simplifies your CSS mathematics since 1rem becomes exactly 10px, 1.6rem is 16px, and 2.4rem translates directly to 24px, while maintaining complete responsiveness.
