What is the Root em to Pixels converter?

REM stands for “root em,” and Px stands for “pixels.” Rem to Px converter is a free online tool that you can use to convert the root em(Rem) values in pixel sizes(px). Moreover, remember that 1rem is equivalent to the root font size. 

How to use Root EM to Pixels calculator?

Here are some steps to convert the REM value into px:

Step 1: Enter the base font size in the mentioned column. The default size is 16px.

Step 2: Input the rem value that you want to convert.

Step 3: Now click the convert button and get your results instantly in rem units.

REM to Pixels Conversion Table

Some frequently used values of Rem are used to convert into px values. So, to save your time, you can directly see that particular value and its equivalent px size in the table below:

REM	PX
0.25rem	4px
0.5rem	8px
0.75rem	12px
1rem	16px
1.25rem	20px
1.5rem	24px
2rem	32px
2.5rem	40px
3rem	48px
4rem	64px
6rem	96px
8rem	128px
10rem	160px
11rem	176px
12rem	192px
13rem	208px
14rem	224px
16rem	256px
20rem	320px
30rem	480px
36rem	576px
48rem	768px
50rem	800px
60rem	960px
62rem	992px
64rem	1024px
70rem	1120px
75rem	1200px
80rem	1280px
90rem	1440px
100rem	1600px

Formula to convert Root em to Pixels

If you want to convert the rem to px size manually, use the formula method to get your results. The formula is:

Px = Rem x root font size

For Examples:

• 12 rem = 216px
• 8 rem = 144px
• 6rem=   108px
• 4 rem=   72px

(let’s say the default font size is 18px)

Do the vice versa and checkout px to rem now.

Few Valuable Examples of REM

Below are some real case scenario examples that you can assume to clarify the REM:

Example 1: Setting Font Sizes for Headings and Paragraphs

Scenario: You want your headings and paragraphs to scale proportionally with the user’s default font size.

CSS:

:root {
  font-size: 16px; /* Base font size – users can change this in their browser settings */
}

h1 {
  font-size: 2rem; /* 32px (2 * 16px) */
}

h2 {
  font-size: 1.5rem; /* 24px (1.5 * 16px) */
}

p {
  font-size: 1rem; /* 16px (1 * 16px) */
}

Explanation: All font sizes are defined using rem units, which are relative to the root font size. If a user sets their browser’s default font size to 20px, the h1 will become 40px (2 * 20px), the h2 will become 30px, and the paragraph will become 20px. This ensures that the text scales appropriately for readability.

You can also try millimeters to pixels for free on pixelsconverters.com website.

Example 2: Sizing Spacing and Margins

Scenario: You want consistent spacing around elements, and you want that spacing to scale along with the user’s font size.

CSS:

.container {
  padding: 1rem; /* 16px padding */
  margin-bottom: 2rem; /* 32px margin */
}

.item {
  margin: 0.5rem; /* 8px margin */
}

Explanation: By using rem for padding and margins, the spacing around elements will remain proportional to the text size. If the user increases their default font size, the spacing will also increase, maintaining a consistent visual balance.