Widely available Supported across all major browsers. Safe to use in production.

rem

The rem CSS length unit is a font-relative length that is equal to the font size of the root HTML element which for most browsers is 16px.

Units and functions

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.rem
4
12
3.6
5
18
4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
html {
  font-size: 16px;
}
h1 {
  font-size: 2rem; /* 32px */
}
.card {
  padding: 1.5rem; /* 24px */
}

Live demo

1rem（16px）

CSS 1rem(16px) demo.

PreviewFullscreen

1.5rem（24px）

CSS 1.5rem(24px) demo.

PreviewFullscreen

marginkeep Consistent with rem

marginkeep consistent demo. with CSS rem

PreviewFullscreen

Use cases

  • Using rem

    The rem CSS length unit is a font-relative length that is equal to the font size of the root HTML element which for most browsers is 16px.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links