How to use the px to rem converter
- 1Set the root font size. Leave it at 16 unless your site changes it.
- 2Type a pixel value to see it in rem, or a rem value to see it in pixels.
- 3Open the conversion table for common sizes.
- 4Paste CSS into the stylesheet converter to change every px value to rem at once.
What rem means
A rem is relative to the root font size, set on the html element. Browsers default to 16px, so 1rem = 16px, 1.5rem = 24px and 0.75rem = 12px.
rem = pixels ÷ root font size
Why use rem instead of px
When someone increases the default font size in their browser settings for easier reading, sizes in rem grow with it, while sizes in px stay fixed. Using rem for font sizes, spacing and layout widths makes a site respect those preferences, which is an accessibility best practice.
rem versus em
An em is relative to the font size of the element itself (or its parent), so ems compound when nested. A rem always refers to the root, which makes it easier to predict. This converter calculates rem; for em, set the root size to the parent element's font size.
Converting a stylesheet
The bulk converter finds every px value in your CSS and rewrites it in rem. Hairline 1px borders usually look best kept in px, so they are left alone unless you untick the option.
Frequently asked questions
How many pixels is 1rem?
16px with the browser default root font size. If your site sets html { font-size: 62.5% }, 1rem is 10px.
Should I use rem for everything?
Rem works well for font sizes, spacing and widths. Borders, shadows and other tiny details are often better left in px.
What root font size should I use?
Use 16 unless your CSS changes the font size of the html element. Check your stylesheet for html { font-size: … }.
Last updated