REM to PX & CSS Formatter Tool
Run this transformation 100% in-browser without server requests.
Online PX to REM Converter
Bi-directional unit calculator with custom root font base (16px or 10px).
Every time you inspect a Figma component and see a hardcoded padding: 24px, you face a classic choice: do you paste 24px straight into your stylesheet, or do you convert it to rem? It seems like a minor detail, but using rem units is what separates modern accessible web apps from brittle pixel-locked layouts.
1. PX vs. REM units: The web accessibility imperative
Pixels are static, absolute values. If a user with low vision increases their browser's default font size from 16px to 24px for readability, pages built with hardcoded px values ignore their preference completely. The text stays tiny, forcing them to zoom the whole viewport.
rem units calculate sizes relative to the root <html> element's font size (which defaults to 16px). When a user changes their browser preferences, every rem-based font size, margin, and line height scales smoothly and proportionally.
2. The PX to REM conversion formula
Calculating rem from pixel values follows a simple mathematical ratio:
Example: For a 24px heading on a standard 16px base: 24 ÷ 16 = 1.5rem.
3. The 62.5% CSS Technique (html { font-size: 62.5%; })
To simplify mental arithmetic, frontend developers frequently set:
html {
font-size: 62.5%; /* 62.5% of 16px = 10px base */
}
body {
font-size: 1.6rem; /* 1.6 * 10px = 16px base body font */
}Pros: Makes 1rem equal to 10px. 14px becomes 1.4rem, 20px becomes 2.0rem.
Cons: Can introduce unexpected sizing bugs when incorporating third-party CSS component libraries that assume a 16px root base.
4. Reference PX to REM lookup chart
Quick lookup chart for standard pixel sizes across both 16px and 10px (62.5%) root bases:
| Pixel (PX) | Default Base (16px) | 62.5% Base (10px) | Tailwind CSS Equivalent |
|---|---|---|---|
| 8px | 0.5rem | 0.8rem | text-xs (12px) / p-2 |
| 12px | 0.75rem | 1.2rem | text-xs |
| 14px | 0.875rem | 1.4rem | text-sm |
| 16px | 1.0rem | 1.6rem | text-base |
| 18px | 1.125rem | 1.8rem | text-lg |
| 20px | 1.25rem | 2.0rem | text-xl |
| 24px | 1.5rem | 2.4rem | text-2xl |
| 32px | 2.0rem | 3.2rem | text-3xl |
| 48px | 3.0rem | 4.8rem | text-5xl |
| 64px | 4.0rem | 6.4rem | text-6xl |
5. Frequently asked questions
Should I use rem for padding and margins?
Yes. Using rem for component padding and spacing ensures that spacing scales naturally alongside body text size when browser zoom or font settings are modified.
Is there an instant PX to REM calculator?
Yes! Use OnlineViewer Dev's interactive PX to REM Converter Tool to convert CSS files or individual values dynamically.
Convert CSS Units Instantly
Calculate rem values or convert whole stylesheets from px to rem in 1 click.
Launch PX to REM Converter