CSS & Front-End Development Tools

rem to px

Convert rem to pixels and see how the root font size affects the final CSS dimensions.

Inputs

Processed in your browser

Live Preview

Updates automatically as you make changes
Select or copy directly

Convert rem to px with a custom root font size and see the formula and result.

Your input is processed only in your browser and is never uploaded to a server.

About This Tool

rem to px reverses the px to rem conversion. Enter rem and the actual root font size to calculate the pixel value locally, helping you understand relative sizes in existing styles.

How to Use

  1. Enter the rem values you want to convert.
  2. Enter a Root Font Size greater than 0. The default is 16px.
  3. View the px result and calculation explanation.
  4. Copy the result or load an example to check common conversions.

Examples

  • 1.5rem × 16px = 24px.
  • 2rem × 16px = 32px.
  • 1.25rem × 20px = 25px.

How the Calculation Works

px = rem × rootFontSize. The tool shares its conversion function with px to rem and removes insignificant floating-point digits when displaying results. Browsers commonly use a 16px default root font size, but project CSS may change it.

Common Uses

  • Compare rem styles with pixel values in a design.
  • Understand size changes when a theme changes the root font size.
  • Quickly check font sizes, spacing, and container dimensions.

Privacy

All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.

FAQ

Why isn't 1rem always 16px?

rem uses the root element's actual font size, which project CSS or user settings can change.

Can the root font size be 18 or 20?

Yes. Any valid positive value within the tool's accepted range can be used. It does not have to be 16.

Does browser zoom change this formula?

The formula describes the relationship between CSS pixels and rem. The corresponding physical screen pixels also depend on zoom and device pixel ratio.

Why do some results have no decimal places?

When a result is effectively an integer, the tool removes unnecessary trailing zeros so the output is easy to use directly in CSS.

Back to the Developer Tools Directory