px vs rem vs em: Which CSS Unit Should You Use?

CSS gives you many units for sizes. In everyday work three of them matter most: px, rem and em. Picking the right one makes your design adapt to different screens and to people's own settings.

px: a fixed size

A CSS pixel is a fixed unit. 16px is 16px no matter what the user prefers. That makes it predictable, but it ignores the font size people choose in their browser.

rem: relative to the page

rem stands for "root em". It is relative to the font size of the <html> element, which is 16px by default in browsers. So 1rem is 16px, 1.5rem is 24px and 0.75rem is 12px. If a visitor raises their default font size, everything sized in rem grows with it.

em: relative to the parent

em is relative to the font size of the element it is used on (or of its parent, for font-size itself). That is useful for components that should scale together, such as a button whose padding follows its text size. The catch is that nested elements multiply:

ul { font-size: 1.2em; }   /* 1.2 * parent */
ul ul { font-size: 1.2em; } /* 1.2 * 1.2 = 1.44 * the original */

Converting

• px to rem: divide by the base size. With 16px, 24px / 16 = 1.5rem.
• rem to px: multiply. 0.875rem x 16 = 14px.
• Don't change the base to 62.5% to make the maths easier. It overrides what the user chose in their browser.

Which should you use?

• Font sizes and spacing: rem, so they respect the user's settings.
• Component-level spacing that follows the text: em.
• Borders, shadows and hairlines: px, because they should stay thin.
• Media queries: em or rem, so breakpoints move when the user zooms or changes their font size.

Use the PX to REM Converter to convert any value and see a table of common sizes.