Type in either box: pixels convert to rem and rem converts back to pixels, using the base font size above.
rem = px / base font size. Browsers set the base to 16px by default, so 16px = 1rem, 24px = 1.5rem and 10px = 0.625rem. To go the other way multiply: px = rem x base, so 2.5rem = 2.5 x 16 = 40px. Change the base above if your site sets html{font-size:62.5%} (10px) or any other value.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 22px | 1.375rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 96px | 6rem |
Divide the pixel value by the root font size. With the default 16px root, 24px is 24 / 16 = 1.5rem.
1rem equals the root (html) font size. Browsers default to 16px, so 1rem is 16px unless the page or the user changes it.
rem is relative to the root element font size, em is relative to the font size of the element itself (or its parent when used for font-size). rem stays predictable when elements are nested; em compounds. For a root-level conversion the number is the same, which is why this tool shows both.
rem sizes scale when a user raises their browser default font size, which helps accessibility. Pixel sizes ignore that setting.
See also: HEX to RGB converter · aspect ratio calculator · PPI calculator · length converter · random color generator · color contrast checker