What is rem in CSS?

What is rem in CSS?

In CSS, rem stands for "root em." It is a unit of measurement that represents the font size of the root element (html), which is typically specified in the CSS stylesheet. The rem unit is relative to this root font size.

For example, if the root font size is set to 16 pixels (16px), then 1rem is equal to 16 pixels. If an element's font size is set to 2rem, it will be twice the size of the root font size (32 pixels in this case).

Using rem can be advantageous in responsive web design because it allows you to define sizes relative to the root font size. If the user adjusts their browser's font size preferences, all elements specified in rem will adjust accordingly, maintaining the proportional relationship.

Here's an example of how rem is typically used in CSS:

html {
  font-size: 16px; /* Set the root font size to 16 pixels */
}

body {
  font-size: 1rem; /* 1rem is equal to 16 pixels in this example */
}

h1 {
  font-size: 2rem; /* 2rem is equal to 32 pixels in this example */
}

p {
  font-size: 1.2rem; /* 1.2rem is equal to 19.2 pixels in this example */
}

Conclusion:

By using itrem, you create a more flexible and scalable design system that adapts to changes in the root font size.