Developer tools
px to rem & em converter
Type a px, rem, or em value and the other two update instantly. rem follows the root font size; em follows the parent font size. Everything runs in your browser - nothing is uploaded.
Drives rem (the html element, 16px by default)
Drives em (the element's own context)
px to rem reference (root 16px)
| px | rem |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 28 | 1.75 |
| 32 | 2 |
| 40 | 2.5 |
| 48 | 3 |
| 64 | 4 |
How it works
Type a value into any of the three boxes - px, rem, or em - and the other two update instantly. Pixels are absolute, while rem and em are relative units that scale with a font size. rem is always measured against the root font size (the size set on the html element, 16px by default in every browser), so 1rem equals that root value everywhere on the page.
em is the same idea but measured against the parent element font size instead of the root, so the same em value can resolve to different pixels depending on where it sits. That is why this converter keeps two separate controls: a root font size that drives px and rem, and a parent font size that drives px and em. Change either and the matching column recalculates. Everything runs in your browser, so nothing is sent to a server, and the quick-reference table below maps the common px sizes to rem at your chosen root.
Example. With the root font size at the default 16, typing 24 into the px box gives 1.5rem and 1.5em. Set a parent font size of 20 and the same 24px now reads 1.2em, while rem stays at 1.5. Drop the root to 10 and 24px becomes 2.4rem.
FAQ
What is the difference between rem and em?
Both are relative to a font size, but to a different one. rem is relative to the root font size set on the html element, so it is the same everywhere. em is relative to the font size of the element it is used on (which it inherits from its parent), so it compounds and can resolve to different pixel values in different places. Use rem for predictable, page-wide sizing and em when you want a value to scale with its local context.
What base font size should I use?
The default is 16px, which is the font size every major browser applies to the root element unless you override it. Keeping the root at 16 means 1rem is 16px, 0.5rem is 8px, and so on. Only change the root font size here if your project sets a different size on the html element; change the parent font size to match the element whose em values you are working out.
How do I convert px to rem?
Divide the pixel value by the root font size. At the default 16px root, px to rem is px / 16: 16px is 1rem, 24px is 1.5rem, 8px is 0.5rem. This tool does the division for you and rounds the result to a few decimals, and the reference table lists the most common conversions at a glance.
Is anything sent to a server?
No. The conversion is a small piece of arithmetic that runs entirely in your browser. Nothing you type is uploaded, logged, or stored, so you can use it offline once the page has loaded.