REM to PX
Convert REM units to pixels with adjustable root font size — live conversion and a full reference table, 100% in your browser.
Input
Result
Reference table (0.25–8 rem)
| REM | PX | REM | PX |
|---|
What is PX?
The pixel (px) is the most fundamental absolute length unit in CSS. One CSS pixel is defined as 1/96 of an inch, which works out to 96 pixels per inch regardless of the physical screen density. CSS pixels are a logical abstraction: a high-DPI display may pack multiple physical device pixels into a single CSS pixel, but CSS measurements always operate in these logical units so layouts render at consistent visual sizes across devices.
Pixels give designers precise, predictable control over every dimension. They are the universal reference point that other CSS units are converted against — even relative units like rem and em ultimately resolve to pixels in the computed style. Because px is absolute, it is the natural choice for borders, hairline dividers, icon dimensions, and any value that must remain fixed regardless of the user's font-size preference.
REM vs PX
REM and PX are two sides of the same coin: every rem value resolves to a pixel value at render time. The difference is whether the size is expressed relative to the root font size (rem) or as an absolute value (px). The table below summarises the key differences.
| Feature | REM | PX |
|---|---|---|
| Type | Relative (to root font size) | Absolute |
| Default at 16px root | 1rem = 16px | 1px = 1/96 inch |
| Respects user font setting | Yes | No |
| Global rescaling | One root change scales all | Each value must change |
| Predictability | Depends on root | Always exact |
| Best for | Font size, spacing, layout | Borders, hairlines, fixed graphics |
Converting rem to px is essential when you need to know the rendered pixel value — for example when handing off designs to a pixel-precise implementation, debugging computed styles, or working with tools that only accept pixel values. The conversion is simply px = rem × rootFontSize.
Root font size
The root font size is the font size set on the <html> element, and it determines how many pixels one rem equals. All major browsers default to 16px, so by default 1rem = 16px. Many projects override this: a common technique is html { font-size: 62.5%; } which makes 1rem equal to 10px, simplifying mental arithmetic throughout the codebase.
This converter lets you set the root font size from 8px to 32px so the pixel output always matches your project's actual root setting. Move the slider and both the result and the full reference table recalculate instantly, so you can see the exact pixel value for any rem value under your specific configuration.
When to convert REM to PX
Although rem is the recommended unit for most modern CSS, there are many situations where you need the equivalent pixel value. Converting rem to px is useful in these cases:
- Design handoff. Designers often work in pixels in tools like Figma or Sketch; converting rem values to px lets developers and designers speak the same language.
- Debugging computed styles. Browser DevTools show computed rem values as pixels, and converting manually helps you verify the math.
- Pixel-precise implementations. Some third-party libraries, canvas APIs, or native integrations only accept pixel values.
- Documentation. Showing both rem and px in style guides makes the design system easier to understand for newcomers.
- Migration projects. When moving a legacy px-based codebase to rem (or vice versa), bulk conversion helps audit and rewrite the values.
Once you have the pixel equivalent, keep the rem value in your source CSS — it remains the more accessible and scalable choice, with the px value serving as a reference.
Accessibility and PX
A key reason rem exists is accessibility. When users increase the default font size in their browser settings, every rem-based measurement scales accordingly, keeping text and spacing readable. Pixel values do not scale with this setting in most modern browsers (which now zoom the whole page instead), so a font declared in px can lock users out of comfortable reading sizes on some setups.
That said, px is not inherently bad — it is the right unit for values that should not change with the font setting, such as 1px borders, box-shadow offsets, and decorative geometry. The best practice is to use rem for anything typography- and layout-related (where scaling is desirable) and px for fixed structural details. This converter helps you translate between the two so you can apply each unit where it fits best.
How do you convert REM to PX?
Multiply the rem value by the root font size: px = rem × rootFontSize. With the default 16px root, 1.5rem becomes 1.5 × 16 = 24px.
What root font size should I use?
Use 16px (the browser default) unless your project explicitly overrides it. If your stylesheet sets html { font-size: 62.5%; }, use 10px as the root.
Does 1rem always equal 16px?
Only with the browser default root of 16px. If the root font size is changed in CSS or by the user, 1rem equals that new value.
Should I use PX or REM in my CSS?
Use rem for font sizes, spacing, and layout dimensions so they scale with user preferences. Use px for borders, hairlines, and fixed decorative values.
Are my values sent to a server?
No. All calculations run locally in your browser. Nothing is uploaded.