REM to PX Converter

An easy to use rem to px converter tool for web designers.

rem
px
px

The tool by default does conversions based on the 16px as the root html font size, which is default of most modern web browsers. But if your webpage uses different root font-size, you can change it above.

Live Preview

Font Size = 1rem & Base Font Size = 16px

[Sample Text]

How to Use Our REM to PX Converter & All Its Features?

Simply enter the rem value and the tool will convert it into px (css unit) instantaneously as you type. No extra clicks required!

Also, this is a two way rem ⇄ px converter tool. So, feel free to enter the px value in the px input box to get its rem conversion. Alternatively, you can use our dedicated PX to REM converter, which also works both the ways.

And, for your reference this tool also shows you the live text preview of the px font-size, so you can also test the font-size right on this page using this tool to save your time.

Common REM to PX Conversions

As per default root font size of HTML - 16px.

  • 0.125 rem = 2 px
  • 0.25 rem = 4 px
  • 0.5 rem = 8 px
  • 0.75 rem = 12 px
  • 0.875 rem = 14 px
  • 1 rem = 16 px
  • 1.125 rem = 18 px
  • 1.25 rem = 20 px
  • 1.3 rem = 20.8 px
  • 1.4 rem = 22.4 px
  • 1.5 rem = 24 px
  • 2 rem = 32 px
  • 2.5 rem = 40 px
  • 3 rem = 48 px
  • 3.5 rem = 56 px
  • 3.7 rem = 59.2 px
  • 4 rem = 64 px
  • 5 rem = 80 px
  • 6 rem = 96 px
  • 7 rem = 112 px
  • 8 rem = 128 px
  • 9 rem = 144 px
  • 10 rem = 160 px
  • 15 rem = 240 px
  • 20 rem = 320 px
  • 30 rem = 480 px
  • 40 rem = 640 px
  • 50 rem = 800 px
  • 60 rem = 960 px
  • 70 rem = 1120 px
  • 80 rem = 1280 px
  • 90 rem = 1440 px
  • 100 rem = 1600 px
  • 1 px = 0.0625 rem
  • 2 px = 0.125 rem
  • 3 px = 0.1875 rem
  • 4 px = 0.25 rem
  • 5 px = 0.3125 rem
  • 6 px = 0.375 rem
  • 7 px = 0.4375 rem
  • 8 px = 0.5 rem
  • 9 px = 0.5625 rem
  • 10 px = 0.625 rem
  • 12 px = 0.75 rem
  • 14 px = 0.875 rem
  • 16 px = 1 rem
  • 18 px = 1.125 rem
  • 20 px = 1.25 rem
  • 22 px = 1.375 rem
  • 24 px = 1.5 rem
  • 26 px = 1.625 rem
  • 28 px = 1.75 rem
  • 30 px = 1.875 rem
  • 32 px = 2 rem
  • 36 px = 2.25 rem
  • 40 px = 2.5 rem
  • 44 px = 2.75 rem
  • 48 px = 3 rem
  • 52 px = 3.25 rem
  • 56 px = 3.5 rem
  • 60 px = 3.75 rem
  • 64 px = 4 rem
  • 72 px = 4.5 rem
  • 80 px = 5 rem
  • 88 px = 5.5 rem
  • 96 px = 6 rem

To do conversions for other rem, px or base values use the tool above.

How do you calculate REM to PX?

The formula to calculate PX from REM is:

px = rem x base font-size of root <html> tag

Example Calculation:

Suppose you want to calculate px value of 1 rem, then as per the formula above, you have to multiply 1 with the base font-size.

If the base font-size is 16px, then 1 multiplied by 16 is 16.

Hence, 1rem is equals to 16px.

This REM to PX converter tool does calculations using the same formula and allows you to convert rem to px in much fast and easy way than doing this calculation manually.

When to use px em rem?

px, em, and rem are all units of measurement used in CSS by UI/UX developers for defining sizes and dimensions of various elements on a webpage.

Pixels (px) is an absolute unit of measurement that is fixed to a specific size on a screen. Using px is much easy and straightforward to define precise sizes, such as for borders, text, and images.

However, it does not scale with different screen sizes and may not be as accessible for users who have vision impairments or who need to enlarge text.

Em-height (em) is a relative unit of measurement that is based on the font size of the parent element. When the font size of the parent element changes, the font-size of the child elements with em units will also change accordingly.

Not limited to fonts, the em unit is also commonly used to define padding and margin of the sections and divs on the webpage. It helps create responsive designs that can adjust to different screen sizes and accessibility needs.

Read more about em on our px to em converter page.

Rem (root-em) is also a relative unit of measurement but is based on the font size of the root element (the <html> tag).

Like em, it is also used to define font sizes, padding, and margins, but the main difference between them is rem is not affected by the font size of the parent element. This makes it easier to use and more predictable than em when designing responsive layouts.

To summarize, px is usually used for fixed size elements, while em and rem are used for elements that you want to adjust automatically with different screen sizes. When choosing between em and rem, consider whether the size you are defining should be affected by the font size of the parent element or not.

RELATED TOOLS: