CSS 'Rem'

CSS `rem` stands for "root em". It is a unit of measurement utilized in web development to specify sizes to the document's root element, which is commonly the "html>" tag. The 'rem' unit is comparable to the 'em' unit, but 'rem' is always relative to the font size of the root element as opposed to the font size of its parent element. As a result, managing and controlling the overall size of items on a webpage is simpler.

Rem Units vs Em Units

Em units are different from rem units in a way that they are related to the font size of their element rather than the root element. Therefore, they may cascade and lead to unforeseen outcomes. When the root font size is the standard 16px, let's take the following example into consideration, where we wish lists to appear with a font size of 12px:

html {
font-size: 100%;
}
ul {
font-size: 0.75em;
}

The font size of an internal list that is nestled within another list will be 75% of the size of its main list (in this example, 9px). We can still solve this issue by utilizing something like this:

ul ul {
font-size: 1em;
}

This works, but we must pay close attention to circumstances when nesting becomes even deeper.

With rem units, everything is much easier:

html {
font-size: 100%;
}
ul {
font-size: 0.75rem;
}

Covering the nesting scenarios in independent declarations is no longer necessary because all sizes are referred from the root font size.

Basics

The root element's font size is 1 rem to the 'rem' unit. This root font size will determine the font size for any additional elements specified by the 'rem' property. For example, 1rem will also be 16 pixels if the root element's font size has been customized to 16 pixels (the default for most browsers).

Example:

html {
  font-size: 16px; /* 1rem = 16px */
}

p {
  font-size: 1.5rem; /* 1.5rem = 24px (1.5 * 16px) */
}

Advance

Once you use rem for attributes more than font size, its true potential becomes apparent. 'Rem' units are based on the root element's font size. Any modifications to the root font size will impact all 'rem' unit-using elements, resulting in a uniform scaling effect.

1. Global Scaling:

Scaling the whole design up or down proportionately is simple to perform by altering the text size of the root element.

/* Default font size */
html {
  font-size: 16px; /* 1rem = 16px */
}
/* Larger font size - scales everything up */
html.large-font {
  font-size: 20px; /* 1rem = 20px */
}

2. Responsive Design:

It is best to use "rem" when making responsive designs. One can customize the layout to different screen sizes by adjusting the root font size to a percentage or utilizing media queries to change it.

/* Base font size for default screens */
html {
  font-size: 16px; /* 1rem = 16px */
}
/* Adjust font size for smaller screens */
@media screen and (max-width: 768px) {
  html {
    font-size: 14px; /* 1rem = 14px */
  }
}

3. Consistent Spacing:

One can guarantee constant spacing across the whole website, regardless of changes in font size, by utilizing the 'm' property for margin, padding, and other spacing-related attributes.

/* Consistent spacing using rem */
h1 {
  font-size: 2rem; /* 32px (2 * 16px) */
  margin-bottom: 1.5rem; /* 24px (1.5 * 16px) */
}
p {
  font-size: 1rem; /* 16px */
  margin-bottom: 1rem; /* 16px */
}

4. Modular Sizing:

Establishing a modular scale using "rem" lets you size pieces aesthetically pleasing and proportionately.

/* Modular scale using rem */
html {
  font-size: 16px; /* 1rem = 16px */
}
h1 {
  font-size: 2.5rem; /* 40px (2.5 * 16px) */
}
h2 {
  font-size: 2rem; /* 32px (2 * 16px) */
}
h3 {
  font-size: 1.75rem; /* 28px (1.75 * 16px) */
}

To sum up, 'rem' is a strong and adaptable unit for scaling items in web development. It makes it simpler to produce responsive and maintainable designs by assisting in the creation of uniform and scalable layouts.

Next TopicResponsive CSS

← prev next →