CSS Unit Converter
Convert pixels to rem, em, percent and points against any root font size, with a ready-made scale.
Convert px into rem, em, percent and points against your root font size.
Result
1.5rem
24px at a 16px root
- rem
- 1.5rem
- em (same parent)
- 1.5em
- percent
- 150.00%
- points
- 18.00pt
1.5remAbout the css unit converter
rem is relative to the root font size, so a layout built in rem scales when a user increases their browser's default text size. A layout in pixels ignores that preference entirely, which is an accessibility problem as much as a design one.
The default root is 16 pixels in every browser, so dividing by 16 is the usual conversion.
How to use it
- 1Enter the pixel value.
- 2Set your root font size if it is not 16.
- 3Read the rem, em, percent and point equivalents.
- 4Copy the common scale for a whole set of values at once.
Questions
What is the difference between rem and em?
rem is always relative to the root font size. em is relative to the parent's font size, so nested elements compound, which is usually not what you want for spacing.
Should I use rem for everything?
For font sizes and spacing, yes, so the layout respects the user's text size. Borders and hairlines are usually better left in pixels.
Why is the root 16 pixels?
It is the default in every browser. Some projects set it to 62.5 percent so 1rem equals 10 pixels, which makes mental arithmetic easier but overrides the user's preference.