PX to REM Converter
Convert pixel values to rem units instantly. Enter a pixel value and base font size to get the exact rem equivalent — great for accessible, scalable CSS.
Bulk Converter
Quick reference table showing common pixel values converted to rem at the current base font size.
| PX | REM (base 16) |
|---|---|
| 8px | 0.5000rem |
| 10px | 0.6250rem |
| 12px | 0.7500rem |
| 14px | 0.8750rem |
| 16px | 1.0000rem |
| 18px | 1.1250rem |
| 20px | 1.2500rem |
| 24px | 1.5000rem |
| 32px | 2.0000rem |
| 48px | 3.0000rem |
| 64px | 4.0000rem |
What Is REM and Why Use It Instead of PX?
The rem unit (root em) is a relative CSS length unit defined as a multiple of the root element's font size — that's the <html> element. So 1rem always equals whatever font size is set on <html>, which defaults to 16px in all modern browsers. The px unit, by contrast, is an absolute unit that never changes relative to user preferences. This is the key reason why rem is considered better for accessibility: when a user sets their browser's default font size to 20px (common for people with low vision), layouts built in rem scale up proportionally while layouts built in px stay fixed. According to the MDN documentation on rem and the W3C CSS Values Level 4 spec, rem is the recommended unit for font sizes and spacing in accessible designs. Browser support is excellent — caniuse.com confirms rem works in every modern browser. CSS-Tricks has a thorough article on the difference between rem and em, and the MDN CSS Values and Units guide covers every length unit in detail. The formula is simple: rem = px ÷ base font size. At the default 16px base, 24px becomes 1.5rem, 32px becomes 2rem, and so on.
How to Use This Converter
Enter Your Pixel Value
Type the pixel value you want to convert into the PX input field. The result updates instantly as you type.
Set the Base Font Size
The base font size defaults to 16px, which is the browser default. If your project sets a different root font size (e.g. 10px for easy math), change it here.
Copy the Result
The rem value appears immediately. Click Copy to put it on your clipboard and paste it straight into your CSS.
Frequently Asked Questions
What is a rem unit in CSS?
rem stands for "root em." It is a relative unit equal to the font size of the root <html> element. In most browsers this defaults to 16px, so 1rem = 16px unless you or the user changes the root font size.
When should I use rem instead of px?
Use rem for font sizes, spacing, and layout dimensions that should respect the user's browser font-size preference. This makes your UI more accessible. Use px for things that should never scale — like border widths (1px) or box shadows.
What is the base font size?
The base font size is the font size set on the <html> element. Browsers default to 16px. Some developers set it to 10px (html { font-size: 62.5%; }) so that 1rem = 10px, making the math easier. This converter lets you set any base.
How do I change the root font size in CSS?
Add a rule like html { font-size: 18px; } or use a percentage like html { font-size: 112.5%; }. Using a percentage respects the user's browser setting while scaling from it, which is the most accessible approach.
What is the formula to convert px to rem?
The formula is: rem = px ÷ base font size. For example, 24px at base 16px = 24 ÷ 16 = 1.5rem. At base 10px, 24px = 2.4rem.
Related Tools
References: MDN — rem length unit · W3C CSS Values Level 4 — rem · Can I Use — rem · CSS-Tricks — rem vs em · MDN CSS Values and Units