What a REM to PX converter does
A rem is a multiple of the root font size, which is the computed font size of the html element. To turn rem into pixels you multiply: px = rem x root font size. With the browser default root of 16px, 1rem is 16px, 1.5rem is 24px, 2rem is 32px and 0.875rem is 14px. The table above lists the rem values most stylesheets use, and the box at the top handles any other number, including awkward ones such as 1.0625rem or 0.8125rem.
Going from px to rem instead? Use the PX to REM converter, or the PX to REM chart for a quick lookup of every size from 1px to 200px.
Why the answer is not always the same number of pixels
Pixels are fixed but rem is a promise to follow the reader. If a visitor changes the default font size in their browser settings, 1rem stops being 16px for that visitor and everything sized in rem moves with it. That is exactly why the converter shows a row of reader text sizes. Chrome's font size presets are roughly 9, 12, 16, 20 and 24px for very small through very large, and your 1.5rem heading becomes 13.5px, 18px, 24px, 30px or 36px across them. Browser zoom is different: it scales pixel and rem values together, so it does not reveal this behaviour.
Designers sometimes worry that rem makes layouts unpredictable. In practice the opposite is true. Your layout is predictable at the default size, which is what almost every visitor uses, and it degrades gracefully for the minority who changed it, instead of ignoring them.
Reading rem values you find in someone else's CSS
When you inspect a site and see padding: 1.25rem 2rem, multiplying by 16 tells you it is 20px by 32px. The usual landmarks to remember are:
- 0.25rem is 4px, 0.5rem is 8px and 0.75rem is 12px, the small steps of most spacing scales.
- 1rem is 16px, the body text size on most sites. 1.125rem (18px) and 1.25rem (20px) are common for lead paragraphs.
- 1.5rem (24px), 2rem (32px) and 2.5rem (40px) are typical heading and section spacing values.
- 3rem (48px) and 4rem (64px) are common hero spacing values and large icon sizes.
When the root is not 16px
Many themes set html { font-size: 62.5% }, which makes the root 10px so that 1.6rem is 16px. Some design systems use a 14px or 18px root. If a site you are reading uses one of these, type its root into the second box. You can find it by selecting the html element in DevTools and reading the computed font size. Using the wrong root is the most common reason a rem value looks "off" compared with a design file.
rem inside media queries and em for comparison
One exception to all of the above: inside a media query, rem and em do not use your html font size. They resolve against the browser's initial font size, usually 16px. So @media (min-width: 48rem) is a 768px breakpoint no matter what root you set. And em is relative to the current element's font size rather than the root, so 1.5em inside a 20px parent is 30px, while 1.5rem stays 24px at a 16px root. For font sizes, rem is easier to reason about because it never compounds.
If you are building a type system, the fluid type scale generator turns a minimum and maximum size into a rem-based clamp() value that scales smoothly between viewports while still respecting the reader's text size.
Frequently asked questions
How many pixels is 1rem?
1rem is 16px when the root font size is the browser default of 16px. If the page sets a different root size, or the reader changed their browser default, 1rem is that size instead.
How do I convert rem to px?
Multiply the rem value by the root font size. At a 16px root, 1.5rem x 16 is 24px, 2rem x 16 is 32px and 0.875rem x 16 is 14px.
Why does my rem value not match the pixels in my design file?
The most common cause is a different root font size. Themes that set html font-size to 62.5% make 1rem equal 10px, so 1.6rem is 16px there. Check the computed font size of the html element and enter it as the root size.
Is rem the same as em?
No. rem is always relative to the root html font size. em is relative to the font size of the current element, so nested em values multiply. For font sizes rem is usually simpler because it does not compound.
Do media queries use my custom root size for rem?
No. In media queries, rem and em resolve against the browser initial font size, normally 16px, not against the font size you set on html. A breakpoint of 48rem is 768px at default settings.