sajad torkamani

What’s the difference between rem, em, and pixel?

12 March 2023 (Updated 12 March 2023)
On this page
px (pixel)
rem (root em)
em (relative em)
When to use each one?
rem and em can be useful if accessibility is important

rem, em, and px are three different units of measurement in CSS that can be used to define font sizes, element sizes, and distances between elements.

px (pixel)

px is an absolute unit of measurement. One pixel is equal to one dot on the screen. This unit doesn’t change depending on device settings or screen sizes.

rem (root em)

rem is a relative unit that’s based on the font-size of the root element (usually <html>). So if the font-size of the root element is 16px, then:

  • 1rem = 16px
  • 1.5rem = 24px
  • 2rem = 32px

em (relative em)

em is a relative unit that’s similar to rem, except it’s based on the computed font-size of the parent element, rather than the root element. So if the root element has a font-size of 16px, but an element’s parent element has a font-size of 20px, then:

  • 1em = 20px
  • 1.5em = 30px
  • 2rem = 40px

When to use each one?

rem and em can be useful if accessibility is important

Users with visual impairments may change their browser’s settings to increase the default font-size. If your website uses rem or em, the text will scale accordingly with the user’s default font-size setting.

If your website uses pixels for font-sizes, then the user’s font-size setting won’t have any effect. They would have to zoom the page instead (need to verify this). My guess is that most users with visual impairments probably zoom the page instead of changing their browser’s font size settings.

That said, rem and em can require more thought when defining font sizes. So if accessibility isn’t a priority, then pixels might make sense.

Tagged: CSS