Pixels to REM Converter
Convert between px and rem units for CSS development
px (html root)
Bulk Convert
Reference Table
| Pixels | REM |
|---|
Frequently Asked Questions
What is the difference between px and rem in CSS? +
Pixels (px) are absolute units that correspond to a fixed size on screen. REM (root em) is a relative unit based on the root element's font size (usually 16px by default). REM scales with the user's browser settings, making it better for accessible and responsive design.
Why should I use rem instead of px? +
Using rem makes your design more accessible because it respects the user's browser font size preferences. If a user increases their default font size for readability, rem-based layouts scale accordingly while px-based layouts stay fixed. It also makes responsive design easier.
What is the default base font size in browsers? +
The default base font size in all major browsers is 16px. This means 1rem = 16px unless you have changed the font-size on the html element. You can change it with CSS, for example: html { font-size: 62.5%; } would make 1rem = 10px.
How do I convert px to rem? +
Divide the pixel value by the base font size. For example, with a 16px base: 24px / 16 = 1.5rem. With a 10px base: 24px / 10 = 2.4rem. The formula is: rem = px / base font size.
Can I use rem for everything in CSS? +
You can use rem for most things including font sizes, margins, padding, and widths. However, borders and box shadows are often better in px since they are decorative and should not scale with font size. Media query breakpoints also commonly use px or em.