PX to REM Converter

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

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 you're using different root font-size, you can change it above.

Live Preview

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

[Sample Text]

Loved the tool? Add to your bookmarks (press Ctrl/Cmd + D)

OR

Add as extension in your browser

available in chrome web store button

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

Simply enter the px value in the pixels box and the tool will convert it into rem automatically and instantly as you type. No extra clicks required!

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

And, for your reference this tool also shows you the live text preview of the rem font-size as per the root font size set by you, so you can view the font-size right on this page using this tool to save your time.

Common PX to REM Conversions

As per base (root font size of HTML) - 16px.

PixelsRem
1px0.0625rem
8px0.5rem
10px0.625rem
12px0.75rem
13px0.8125rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
22px1.375rem
24px1.5rem
26px1.625rem
28px1.75rem
30px1.875rem
32px2rem
36px2.25rem
38px2.375rem
40px2.5rem
42px2.625rem
44px2.75rem
45px2.8125rem
46px2.875rem
48px3rem
54px3.375rem
56px3.5rem
58px3.625rem
64px4rem
68px4.25rem
72px4.5rem
PixelsRem
76px4.75rem
80px5rem
84px5.25rem
88px5.5rem
92px5.75rem
96px6rem
100px6.25rem
104px6.5rem
108px6.75rem
112px7rem
116px7.25rem
120px7.5rem
124px7.75rem
128px8rem
132px8.25rem
136px8.5rem
140px8.75rem
144px9rem
148px9.25rem
152px9.5rem
154px9.625rem
155px9.6875rem
156px9.75rem
160px10rem
164px10.25rem
168px10.5rem
300px18.75rem
1000px62.5rem
1080px67.5rem

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

What is REM & How it is different from PX?

rem stands for "root em" and it's a CSS unit of measurement primarily used for defining font-size, margin, padding, and other length-based properties. Unlike pixel (px) that always has a fixed size, rem is relative to the root ('<html>' tag's) font size.

For instance, most browsers have a default root font size of 16px. So, if you set font-size: 1rem on an element (e.g., <p>), it will have a font size of 16px. However, if you change the root font size to, say, 20px by setting html { font-size: 20px; }, then font-size: 1rem on that same element will now compute to 20px, scaling accordingly with the new root font size.

Why use REM?

The use of rem provides a way to scale the font size of an entire page based on a single value, which can be especially useful in responsive web design where you want to adjust the font size and size of other elements based on the size of the viewport.

For example, if you set the root font size to 10 px on small screens, and 16 px on large screens, you can use rem throughout your stylesheet to ensure that the sizes of all other elements adjust accordingly and look consistent in relative to each other on all screen sizes.

How do you calculate PX to REM?

The formula for REM is:

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

Example Calculation:

Let's say you want to calculate rem value of 16px, then as per the formula above, you've to divide 16 with the base font-size.

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

Hence, 16px is equals to 1rem.

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

RELATED TOOLS: