Loading…
Loading…
Convert between px and rem with configurable base font size
Live Preview
The quick brown fox
| px | rem | Live Preview |
|---|---|---|
| 12px | 0.75rem | Aa |
| 14px | 0.875rem | Aa |
| 16px | 1rem | Aa |
| 18px | 1.125rem | Aa |
| 20px | 1.25rem | Aa |
| 24px | 1.5rem | Aa |
| 32px | 2rem | Aa |
| 48px | 3rem | Aa |
| 64px | 4rem | Aa |
:root {
--size-12: 0.75rem;
--size-14: 0.875rem;
--size-16: 1rem;
--size-18: 1.125rem;
--size-20: 1.25rem;
--size-24: 1.5rem;
--size-32: 2rem;
--size-48: 3rem;
--size-64: 4rem;
}Common questions about the PX to REM Converter.
Divide the pixel value by the root font size (default 16px). So 24px = 24/16 = 1.5rem. This tool does the conversion instantly for any base font size. Using rem ensures your layout respects user font size preferences for accessibility.
px is an absolute unit (1px = 1 device pixel at 96dpi). rem is relative to the root element's font size (html, default 16px). em is relative to the parent element's font size. Use rem for consistent sizing across components, em for component-relative sizing, and px for borders or shadows.
rem respects the user's browser font size setting, which is crucial for accessibility. If a user sets their default to 20px, rem-based layouts scale proportionally while px-based layouts don't. Most modern CSS frameworks (Tailwind, Bootstrap) use rem as their base unit.
The default root font size in all major browsers is 16px. This means 1rem = 16px unless overridden. Some developers set html { font-size: 62.5% } to make 1rem = 10px for easier math, but this can cause accessibility issues if not handled carefully.