PX To REM Converter

The base is the font size set on the <html> element. Most browsers default to 16px. Learn more below.

px

0 REM

What is Pixels to Root Em Converter

REM stands for “root em,” and Px stands for “pixels.” REM is a CSS font-relative measurement unit used widely in modern web design. Thus, the Pixels to Root Em converter is a free online tool for converting pixels into REM values. This tool helps you save your precious time by getting instant results.

px to rem

How to Use PX to REM Converter

Here are some steps that elaborate on the functioning of this converter tool:

Step 1: Enter your base font size in the mentioned column. The default font size value is commonly 16px, which is widely used. 

Sep 2: Now input the pixel value that you want to convert. 

Step 3: Then, enter the convert button, and you will get the results instantly in the REM field with the mentioned units. 

Pixels to Root Em Conversion Table

This table will benefit web designers. It lists some frequently used pixel sizes. In the next column are REM equivalents of that particular PX size. In addition, the base font size is kept the same for all the values that are 16px.

PX REM
4px0.25rem
8px0.5rem
12px0.75rem
16px1rem
20px1.25rem
24px1.5rem
32px2rem
40px2.5rem
48px3rem
64px4rem
96px6rem
128px8rem
160px10rem
176px11rem
192px12rem
208px13rem
224px14rem
256px16rem
320px20rem
480px30rem
576px36rem
768px48rem
800px50rem
960px60rem
992px62rem
1024px64rem
1120px70rem
1200px75rem
1280px80rem
1440px90rem
1600px100rem

Why Use REM for Website Design?

With the use of rem units in your font sizes and layout dimensions, you can create websites that are more:

  • Responsive
  • Maintainable
  • Accessible

What is a Root Element?

Root Elements are <html> elements in your HTML document. It acts as a container that holds other tags. For example, <head> <body> <main> and  <article>.

Checkout rem to px or vw to px for more detailed conversions.

How do you add font size to the root element?

Here are some ways to add font size to your root element(html).

Inline Style: (Generally not recommended for maintainability)

HTML:

<html style="font-size: 18px;" >

Internal Stylesheet(<style> tag)

HTML:

<head>

<style>

HTML { font-size: 18px; }

</style>

</head>

External Stylesheet(Best Practice)

Link your CSS file in <head> section:

HTML:

<head>

<link rel="stylesheet" href="assets/styles.css">

</head>

How to Convert Pixels to Root Em Manually (Using the Formula)

If you want to convert the px to REM values manually, you can use the easy-to-use formula. The formula is:

rem = Pixel value(px) / Base Font Size(px)

For Example:

  • 32px = 1.77rem
  • 24px = 1.33rem
  • 16px = 0.8rem
  • 8px = 0.4rem

(Let’s say the base font size is 18px)

Difference Between PX and REM: Absolute vs. Relative Units

So, to make these CSS units clear, let’s explore some significant differences between px and rem:

  • Pixels(px): Pixels are fixed-size units that are unchangeable. Setting a specific font size, such as 18px, will always be 18px. 
  • REM(root em): Conversely, rem is a scalable relative unit that can vary. In other words, rem is always relative to the font size defined on the html element. Thus, it relates to whatever font size you have set on your HTML tag.