Rem to Pixels Converter
Rem (root em) is a modern CSS unit for sizing that is relative to the root element's (html) font size, making it more predictable and easier to manage than em units. While em is relative to the parent element and can compound in nested elements, rem is always relative to the same root value, creating consistent sizing throughout a document. The browser's default root font size is 16px, but developers can change this with CSS, for example setting html { font-size: 14px; } on a 14px base. Understanding the relationship between rem and pixels is essential for responsive web design and creating accessible, flexible layouts. This calculator converts rem to pixels for any root font size. Enter the rem value and specify the root font size (default 16px), and the calculator instantly shows the pixel equivalent. Common rem values are included for reference: 0.5rem (8px), 0.75rem (12px), 1rem (16px), 1.5rem (24px), 2rem (32px), and 3rem (48px) at 16px root. Use this converter to validate your CSS calculations, understand rem-based designs, or convert between rem and pixel measurements while coding.
Conversion formula
Rem to pixels:
pixels = rem * root_font_size
For example, at 16px root font size:
1rem = 1 * 16px = 16px
1.5rem = 1.5 * 16px = 24px
2rem = 2 * 16px = 32px
Common rem to pixel conversions
| Rem value | Pixels (at 16px root) | Common use |
|---|---|---|
| 0.5rem | 8px | Very small spacing |
| 0.75rem | 12px | Small spacing |
| 1rem | 16px | Base font size, standard spacing |
| 1.25rem | 20px | Generous spacing |
| 1.5rem | 24px | Subheading font size, larger spacing |
| 2rem | 32px | Heading font size |
| 2.5rem | 40px | Large heading |
| 3rem | 48px | Display heading |
| 4rem | 64px | Extra large heading |
Rem to pixels converter: frequently asked questions
What is rem in CSS?
Rem (root em) is a relative CSS unit equal to the root element's (html) font size. Unlike em, which is relative to the parent element, rem is always relative to the root. If the root font size is 16px, then 1rem equals 16px anywhere in the document. This makes rem more predictable than em for layout and sizing.
What is the default root font size?
The browser's default root font size is 16px. This can be changed by users in browser settings or by developers with CSS (e.g., html { font-size: 14px; }). When calculating rem to pixels, use the actual root font size, not always 16px.
How do I convert rem to pixels?
The formula is: pixels = rem * root_font_size. If you have 2rem and the root font size is 16px, then 2rem = 2 * 16px = 32px. This converter does this calculation for you.
What is the difference between rem and em?
Em is relative to the parent element's font size, while rem is always relative to the root (html) element's font size. Rem is more predictable and easier to manage in large projects, while em can be useful for creating self-contained components that scale with their parent.
Should I use rem or em?
Most modern CSS uses rem for consistent, predictable sizing. Use rem for fonts, margins, and paddings that should scale together. Use em for component-specific sizing that should adapt to local context, like margins and padding within a component.
Official sources
Reviewed by the CalculatorHub team, edited by James Graham, 14 June 2026. See our methodology.