PX to REM Converter
Instantly convert pixels to rem units for responsive CSS.
Default browser font size is 16px
⇄
Quick Reference (Base: 16px)
8px = 0.500rem
10px = 0.625rem
12px = 0.750rem
14px = 0.875rem
16px = 1.000rem
18px = 1.125rem
20px = 1.250rem
24px = 1.500rem
32px = 2.000rem
48px = 3.000rem
64px = 4.000rem
Why Use REM Units?
REM (Root EM) units are relative to the root element's font size, making them ideal for creating scalable, accessible designs. Unlike pixels, rem units respect user preferences for larger or smaller text.
How to Calculate PX to REM
The formula is simple: rem = px / base-font-size. If your base font size is 16px (browser default), then 24px equals 1.5rem (24 / 16 = 1.5).
Best Practices
- Use REM for typography: Font sizes, line heights, and spacing should use rem for accessibility.
- Use PX for borders: Thin borders (1px) are often better in pixels to remain crisp.
- Set a base font: Define
html { font-size: 16px; }or use 62.5% (10px) for easier math. - Media queries: Consider using em units in media queries for better zoom behavior.
62.5% Trick
Many developers set html { font-size: 62.5%; } which makes 1rem = 10px, simplifying mental math (e.g., 1.6rem = 16px). This tool supports any base size.