PX to REM Converter
An easy to use px to rem converter tool for web designers.
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
How to Use Our PX to REM Converter & All Its Features?
Simply enter the px value and the tool will convert it into rem (css unit) instantaneously 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 px 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 also test 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.
| Pixels | Rem |
| 1px | 0.0625rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 22px | 1.375rem |
| 24px | 1.5rem |
| 26px | 1.625rem |
| 28px | 1.75rem |
| 30px | 1.875rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 38px | 2.375rem |
| 40px | 2.5rem |
| 42px | 2.625rem |
| 44px | 2.75rem |
| 45px | 2.8125rem |
| 46px | 2.875rem |
| 48px | 3rem |
| 54px | 3.375rem |
| 56px | 3.5rem |
| 58px | 3.625rem |
| 64px | 4rem |
| 68px | 4.25rem |
| 72px | 4.5rem |
| Pixels | Rem |
| 76px | 4.75rem |
| 80px | 5rem |
| 84px | 5.25rem |
| 88px | 5.5rem |
| 92px | 5.75rem |
| 96px | 6rem |
| 100px | 6.25rem |
| 104px | 6.5rem |
| 108px | 6.75rem |
| 112px | 7rem |
| 116px | 7.25rem |
| 120px | 7.5rem |
| 124px | 7.75rem |
| 128px | 8rem |
| 132px | 8.25rem |
| 136px | 8.5rem |
| 140px | 8.75rem |
| 144px | 9rem |
| 148px | 9.25rem |
| 152px | 9.5rem |
| 154px | 9.625rem |
| 155px | 9.6875rem |
| 156px | 9.75rem |
| 160px | 10rem |
| 164px | 10.25rem |
| 168px | 10.5rem |
| 300px | 18.75rem |
| 1000px | 62.5rem |
| 1080px | 67.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". It's a CSS unit of measurement used for font sizes, as well as for some other properties such as margin and padding. Unlike the pixels (px), which is a fixed size, the rem is relative to the root font size, which is usually the font size set for '<html>' tag.
<style>
html{
font-size: 16px;
}
</style>
In other words, if you set the font size of the root <html> tag to be 16 px (as shown above), then setting a font size of 1 rem on a <p> tag will result in a font size of 16 pixels. If you then change the root font size to 20 px, the font size of that <p> tag of 1 rem will change accordingly to 20 px.
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 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 font sizes of all other elements adjust accordingly.
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.