REM to PX Converter

This REM to PX converter translates REM units back into pixel values based on your root font size. Enter any REM value and base font size to see the computed pixel equivalent, useful for debugging responsive CSS layouts and verifying measurements.

REM to PX Converter

Convert between rem and pixel (px) values based on the root element font size

px
rem
px

Frequently Asked Questions

How do you convert REM to PX?

To convert REM to pixels, multiply the REM value by the root font size. The formula is: PX = REM x root font size. With the default root font size of 16px, 1.5rem x 16px = 24px. If your root font size is different (for example 10px with the 62.5% technique), use that value instead. Common conversions at 16px base: 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.5rem = 24px, 2rem = 32px, 3rem = 48px.

What is 1 REM in pixels?

By default, 1 REM equals 16 pixels in most browsers. REM stands for 'root em' and is relative to the root element's font-size. If you set html { font-size: 16px; }, then 1rem = 16px, 1.5rem = 24px, 2rem = 32px. The formula is: pixels = rem × root-font-size.

What is the formula to convert REM to PX?

The formula is: PX = REM × Root Font Size. With the default root font size of 16px: PX = REM × 16. For example, 2.5rem = 2.5 × 16 = 40px. If you use the 62.5% technique (html { font-size: 62.5%; }), the root font size becomes 10px, so 2.5rem = 25px.

What is 2rem in pixels?

2rem equals 32 pixels at the default 16px root font size (2 x 16 = 32). If the root font size has been set to 10px using the 62.5% technique, then 2rem equals 20px (2 x 10 = 20). The conversion always depends on the root font size. Common uses for 2rem include heading sizes (h2 elements), section padding, and component margins in design systems.

How does changing root font size affect REM values?

Changing the root font size proportionally affects every REM value on the page. If you change the root from 16px to 20px, all REM-based measurements increase by 25%. An element set to 1.5rem grows from 24px to 30px. This cascading effect is both the power and the risk of REM units. It allows global scaling for responsive design but means a root font size change impacts the entire layout. This is why some teams use a 62.5% root (10px) for easier math while keeping body text at 1.6rem.

What is the difference between REM and EM?

REM (root em) is always relative to the root element's font size, providing consistent sizing across the entire page. EM is relative to the font size of the element's parent, which can cause compounding issues. For example, if a parent has font-size: 1.2em and a child also has font-size: 1.2em, the child's computed size compounds to 1.44em of the grandparent. REM avoids this compounding because it always references the root. Use REM for consistent spacing and font sizes; use EM when you want an element to scale relative to its parent's font size.

How do I find the root font size of a page?

To find the root font size, open your browser's developer tools (F12 or Ctrl+Shift+I), select the <html> element in the Elements panel, and check the Computed tab for font-size. Alternatively, run this JavaScript in the console: getComputedStyle(document.documentElement).fontSize. This returns the computed pixel value regardless of whether the CSS uses percentages, ems, or pixels. The default is '16px' unless overridden by a stylesheet.

Why do REM values render differently on some browsers?

REM values should render consistently across modern browsers since all major browsers default to a 16px root font size. Differences typically occur when: the user has changed their browser's default font size in settings (an accessibility feature), a CSS reset or framework overrides the root font size, or the page uses a different base size via html { font-size: ... }. Sub-pixel rendering can also cause slight visual differences, as browsers handle rounding of fractional pixel values differently (e.g., 0.875rem = 14px may render as 13px or 14px).

What is the 62.5% technique for REM?

The 62.5% technique sets the root font size to 62.5% of the browser default (62.5% of 16px = 10px), making mental math easier: 1rem = 10px, 1.6rem = 16px, 2.4rem = 24px. You apply it with html { font-size: 62.5%; } and then set body { font-size: 1.6rem; } to restore normal body text. This technique respects user font size preferences because it uses a percentage rather than a fixed pixel value.

How to Convert REM to PX

Converting REM to pixels is straightforward. The formula is:

pixels = rem × root font size

The root font size is the font-size value set on the <html> element. In all major browsers (Chrome, Firefox, Safari, Edge), the default root font size is 16px. This means 1rem = 16px unless your stylesheet overrides it.

Example: Convert 2.5rem to pixels with the default 16px base:

2.5rem × 16px = 40px

If your project uses the 62.5% technique (root font size = 10px):

2.5rem × 10px = 25px

REM to PX Conversion Table

Reference table for common REM values and their pixel equivalents using the default 16px base font size:

REMPX (16px base)REMPX (16px base)
0.25rem4px4rem64px
0.5rem8px5rem80px
0.75rem12px6rem96px
1rem16px8rem128px
1.25rem20px10rem160px
1.5rem24px12rem192px
2rem32px16rem256px
2.5rem40px20rem320px
3rem48px

What Is REM in CSS?

REM stands for Root EM. It is a relative CSS unit that always references the font size of the root element (<html>). Unlike the emunit, which is relative to the parent element's font size, REM provides a single, consistent reference point across your entire document.

When a browser loads a page, it applies a default font size of 16px to the <html> element. All REM values on the page are calculated relative to this root size. For example, 1.5rem resolves to 24px (1.5 × 16), 2rem resolves to 32px, and 0.75rem resolves to 12px.

The primary advantage of REM is scalability. If a user changes their browser's default font size for accessibility, all REM-based measurements scale proportionally. A heading set to 2rem will grow from 32px to 40px if the user sets their browser default to 20px. This behavior is critical for meeting WCAG accessibility guidelines.

REM is used for font sizes, spacing (margins, padding), widths, heights, and nearly any CSS property that accepts a length value. It provides the perfect balance between the predictability of absolute units and the flexibility of relative units.

REM vs EM: Key Differences

Both REM and EM are relative CSS units, but they reference different elements. Understanding the distinction is essential for choosing the right unit.

FeatureREMEM
ReferenceRoot element (<html>)Parent element
CompoundingNo compoundingCompounds with nesting
PredictabilityConsistent across the pageVaries by context
Best forGlobal sizing, spacing, layoutComponent-scoped scaling
Example1.5rem = always 24px (16px base)1.5em = depends on parent

In general, prefer REM for typography, margins, padding, and layout dimensions. Use EM only when you intentionally want an element's sizing to scale relative to its parent, such as padding inside a button that should grow with its font size.

The 62.5% Technique

The 62.5% technique is a popular approach that simplifies REM calculations by setting the root font size to 10px:

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */
}

body {
  font-size: 1.6rem; /* Restores body text to 16px */
}

With a 10px base, the mental math becomes trivial: 1.6rem = 16px, 2.4rem = 24px, 1.2rem = 12px. Every REM value is simply the pixel value divided by 10.

Why use a percentage? Setting the root font size as a percentage (62.5%) rather than a fixed pixel value (10px) preserves accessibility. If a user has set their browser default to 20px, the 62.5% technique calculates to 12.5px (62.5% of 20px), and all REM values scale proportionally. A fixed html { font-size: 10px; }would override the user's preference entirely.

When using the 62.5% technique with this converter, set the base font size to 10 to see accurate pixel values.

Related Tools