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 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.
| 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" 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.