PX to REM
Convert pixel values to REM units with adjustable root font size — live conversion and a full reference table, 100% in your browser.
Input
Result
Reference table (1–100 px)
| PX | REM | PX | REM |
|---|
What is REM?
REM (root em) is a relative CSS length unit introduced in CSS3. Unlike the em unit, which is relative to the font size of the element itself (and therefore compounds when nested), rem is always relative to the font size of the root element — the <html> element. One rem is exactly equal to the computed font size of the root, which browsers set to 16 pixels by default. So by default 1rem = 16px, 0.5rem = 8px, and 2rem = 32px.
Because rem resolves against a single root reference, it avoids the compounding problem of em units and produces predictable, scalable sizing across an entire stylesheet. Designers and developers can change one value — the root font size — and have the whole interface scale proportionally, which is why rem has become the recommended unit for typography, spacing, and component sizing in modern CSS.
PX vs REM
Pixels (px) and rem (root em) are both length units in CSS, but they behave very differently when it comes to accessibility and responsive scaling. Understanding the trade-offs helps you choose the right unit for each situation.
| Feature | PX | REM |
|---|---|---|
| Type | Absolute unit | Relative unit (to root font size) |
| Default value | 1px = 1/96 inch | 1rem = 16px (browser default) |
| Respects user font setting | No | Yes |
| Compounding when nested | No | No (root-relative) |
| Scalability | Fixed — must override each value | One root change scales everything |
| Best for | Borders, thin lines, device pixels | Font size, spacing, layout dimensions |
In short, px gives you pixel-perfect control but ignores the user's browser font-size preference, while rem is accessible, scalable, and the better choice for typography and most layout spacing. Many teams use a hybrid approach: rem for fonts and spacing, px for hairline borders and fixed decorative elements.
Root font size
The root font size is the font size declared on the <html> element, and it is the single reference point that every rem value resolves against. Browsers default to 16px, but you can — and many design systems do — override it in CSS, for example with html { font-size: 62.5%; } to make 1rem equal to 10px, which makes mental math trivial (1.4rem = 14px).
This converter lets you set any root font size from 8px to 32px so you can compute rem values that match your project's root setting. Changing the root size in the slider instantly recalculates the result and the entire reference table, so you always see the correct conversion for your specific configuration.
When to use REM
REM is the recommended unit for most sizing in modern, accessible web design. Use it whenever the value should scale with the user's font-size preference or with a global design-token change. The most common use cases are:
- Typography. Set
font-sizein rem so headings, paragraphs, and body text all respect the user's browser font setting. - Spacing and padding. Use rem for margins, padding, and gaps so the whole layout scales proportionally.
- Component dimensions. Buttons, cards, and modal widths defined in rem scale up and down with the root size.
- Media queries. Breakpoints written in rem respond to the user's font preference, not just viewport width.
- Design systems. Spacing scales (4px / 8px / 16px…) expressed in rem become tokens that can be re-scaled globally.
Use px instead for borders (1px hairlines), device-pixel-precise graphics, and any value that must not change when the root font size changes.
REM and responsive design
REM is a cornerstone of responsive and accessible design. Because rem values derive from the root font size, you can rescale an entire interface by changing a single declaration. A common pattern is to set the root font size with a clamp() function so it grows fluidly with the viewport: html { font-size: clamp(16px, 2vw, 20px); }. Every rem-based measurement then scales smoothly from mobile to desktop without any extra media queries.
Combine rem-based typography and spacing with relative units like vw and % for layout, and your site will adapt gracefully across devices while still honouring the user's accessibility preferences. This is why most modern CSS methodologies — including Tailwind, Bootstrap 5, and Material Design — ship their spacing and type scales in rem by default.
How do you convert PX to REM?
Divide the pixel value by the root font size: rem = px ÷ rootFontSize. With the default 16px root, 24px becomes 24 ÷ 16 = 1.5rem.
What is the default root font size?
All major browsers default to 16px on the <html> element, so by default 1rem equals 16px.
Why do some projects set the root to 62.5%?
Setting html { font-size: 62.5%; } makes 1rem equal to 10px, which makes conversions easy to do in your head (1.6rem = 16px). The body font is then reset to a readable size.
Is REM better than EM?
For most cases yes — rem is root-relative and does not compound when nested, so it is more predictable. Em is still useful when a component should scale with its own font size.
Are my values sent to a server?
No. All calculations run locally in your browser. Nothing is uploaded.