Pixel / REM / EM Converter
Convert between px, rem, and em CSS units instantly. Set a custom base font size and get a handy reference table. Free online CSS unit converter.
| px | rem | em |
|---|---|---|
| 4px | 0.25rem | 0.25em |
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 28px | 1.75rem | 1.75em |
| 32px | 2rem | 2em |
| 40px | 2.5rem | 2.5em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
Frequently Asked Questions
What is the difference between px, rem, and em?
px (pixels) are absolute units — 1px always equals one physical pixel at 1x scale. rem (root em) is relative to the font size of the root <html> element, typically 16px by default. em is relative to the font size of the element's parent, which can cascade and multiply unpredictably in nested elements.
Why should I use rem instead of px for font sizes?
Using rem allows users to scale your entire site by changing their browser's default font size. This improves accessibility for users with low vision. px ignores browser font size preferences, while rem and em respect them. Most modern design systems recommend rem for typography and spacing.
What base font size should I use?
The default browser font size is 16px, which is the most common base. Some developers set 62.5% (10px) on the html element to make calculations easier (1rem = 10px). However, this can override user preferences and hurt accessibility. It is best practice to leave the root font size at the browser default and work in rem.