CSS 'Rem'

CSS rem represents "root em" and is employed in web development to define sizes relative to the document's root element, typically the "html>" tag. The 'rem' unit functions similarly to 'em' but is based on the root element's font size rather than its parent element's. This makes it easier to maintain consistent sizing across webpage elements.

Rem Units vs Em Units

Em units have a distinct characteristic from rem units as they are based on the font size of their specific element instead of the root element. This distinction can result in a cascading effect that might cause unexpected results. For instance, if the standard root font size is set to 16px, let's explore the scenario below where we intend for lists to display with a font size of 12px:

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

The font size of a nested internal list within another list will be set at 75% of the size of the parent list (which is 9px in this case). This problem can be addressed effectively by employing a solution similar to the following:

ul ul {
font-size: 1em;
}

This functions effectively, however, it is crucial to be vigilant when encountering situations where nesting becomes increasingly complex.

With rem units, everything is much easier:

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

Covering the nesting situations in separate declarations is no longer required as all sizes are now based on the root font size.

Basics

The main element's font size is set to 1 rem, which stands for the 'rem' unit of measurement. This primary font size sets the base for the font size of all other elements that are defined using the 'rem' attribute. For instance, if the main element's font size is adjusted to 16 pixels, then 1 rem will also equal 16 pixels, which is the standard default size in many web browsers.

Example:

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

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

Advance

Once you start employing rem for properties beyond just font size, you'll begin to see its full capabilities. 'Rem' units are calculated in relation to the root element's font size. Adjusting the root font size will have a cascading effect on all elements utilizing 'rem' units, ensuring consistent scaling across the board.

1. Global Scaling:

Adjusting the size of the entire design uniformly can be easily achieved by modifying the font 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 */
}

1. Responsive Design:

It is ideal to utilize "rem" units when developing responsive designs. By modifying the root font size to a percentage or employing media queries for adjustments, one can tailor the layout for various screen sizes.

/* 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 */
  }
}

1. Consistent Spacing:

One can ensure consistent spacing throughout the entire website, irrespective of alterations in font size, by employing 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 */
}

1. Modular Sizing:

Setting up a modular scale with "rem" allows you to size elements in a visually appealing and proportional manner.

/* 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 recap, 'rem' serves as a robust and flexible unit for scaling elements in web development. This unit facilitates the generation of responsive and sustainable designs by aiding in the development of consistent and scalable layouts.