Convert between pixels and REM units for responsive CSS
| Pixels | REM | Use Case |
|---|---|---|
| 8px | 0.5rem | Small spacing |
| 12px | 0.75rem | Small text |
| 14px | 0.875rem | Body text |
| 16px | 1rem | Base text |
| 20px | 1.25rem | Large text |
| 24px | 1.5rem | Headings |
| 32px | 2rem | Large headings |
| 48px | 3rem | Hero text |
REM stands for "Root EM". It's a relative CSS unit that's based on the font size of the root element (html). By default, 1rem equals 16px in most browsers. Using REM units makes your designs responsive and accessible, as they scale proportionally when users change their browser's default font size.
Unlike pixels (px) which are absolute, REM units respect user preferences and are essential for creating accessible, scalable websites.
REM units respect user browser settings. If a user increases their default font size, REM-based designs scale accordingly, improving accessibility for people with visual impairments.
REM is always relative to the root (html) font size. EM is relative to the parent element's font size, which can lead to compounding issues in nested elements.
Yes! Use our custom base size slider above to convert for any base font size. The default is 16px, but many designs use 10px for easier math (1rem = 10px).