How to convert px to rem
- Choose px to rem or rem to px.
- Type the Value. Leave Root font size at 16 unless your site sets a different size on the html element.
- Read the result, click any value to copy it, and use the table for the other common sizes.
Points and percentages
The result also shows points, the unit used for print and in many design apps. In CSS, 1pt is exactly 4/3 of a pixel, so 12pt = 16px and a pixel is 0.75pt. The percentage is the size as a share of the root font size, the way font sizes are sometimes written on the html element: 1.5rem is 150%.
Converting a whole stylesheet
To move a design from px to rem, start with font sizes, then line heights that use units, then spacing such as margins and padding. Keep borders and very small values, like a 1px hairline, in px, because they should stay crisp whatever the text size. Media queries can use em or rem as well; most browsers treat both as relative to the browser’s default size there, not the root element’s CSS size.