Convert CSS REM values to pixels quickly and accurately. Enter a REM value and your root font size to instantly calculate the equivalent pixel value.
Enter a REM value and the root font size used by your website.
Converting REM to pixels is straightforward when you know the root font size of your document. The REM unit is relative to the root HTML element's font size.
For example, if your root font size is 16px, then 1rem = 16px. A value of 2rem would therefore equal 32px.
The following values use a 16px root font size, which is a common default in web development.
| REM | Pixels | Common Use |
|---|---|---|
| 0.25rem | 4px | Small spacing |
| 0.5rem | 8px | Small spacing |
| 0.75rem | 12px | Small text / spacing |
| 1rem | 16px | Base size |
| 1.25rem | 20px | Text / spacing |
| 1.5rem | 24px | Headings / spacing |
| 2rem | 32px | Large spacing |
| 2.5rem | 40px | Section spacing |
| 3rem | 48px | Large headings |
| 4rem | 64px | Large section spacing |
| 5rem | 80px | Large layouts |
| 6rem | 96px | Large layout spacing |
REM stands for "root em." Unlike the EM unit, which is relative to the font size of the current element or its parent, REM is calculated from the font size of the root HTML element.
For example, if your stylesheet contains:
html {
font-size: 16px;
}
Then 1rem is equal to 16px, 2rem is equal to 32px, and 0.5rem is equal to 8px.
REM is commonly used when building scalable and responsive websites because its values are tied to the root font size.
Use REM values for headings, paragraphs, labels, and other text sizes that should scale consistently.
REM can be used for margins, padding, gaps, and other spacing values throughout a layout.
Because REM values depend on the root font size, they can help create layouts that scale consistently.
Pixels and REM serve different purposes in CSS. PX represents a fixed CSS length, while REM is relative to the root element's font size.
| Feature | REM | PX |
|---|---|---|
| Type | Relative unit | Fixed unit |
| Based on | Root font size | CSS pixel |
| Scales with root size | Yes | No |
| Common use | Typography & spacing | Precise dimensions |
Multiply the REM value by the root font size. For example, with a 16px root font size, 2rem × 16px equals 32px.
With the commonly used 16px root font size, 1rem equals 16px. The actual pixel value can be different if the root font size has been changed.
With a 16px root font size, 1.5rem equals 24px.
With a 16px root font size, 2rem equals 32px.
No. REM depends on the root HTML element's font size. If the root font size is 18px, for example, 1rem equals 18px instead of 16px.
The formula is: PX = REM × Root Font Size.
Pixel Converters provides simple online tools for converting pixels, REM, EM, viewport units, and other common web design measurements.
Explore All Converters →