Relative Units

Relative units specify a length relative to another length property (like parent element, root element, or viewport).

Relative length units scale better between different screen sizes.

Tip: The em and rem units are perfect for creating scalable and responsive websites!

* Viewport = the browser window size. 1vw = 1% of the current width of the browser's viewport. So, if the viewport is 500px wide, 1vw is 5px.

Set Font Size With Em

The em unit is relative to the font size of the parent element. So, if the parent element has a font size of 16px, then 2.5em would result in 40px.

In the following example, the text size in em is the same as the previous example in pixels. However, the em unit allows the user to adjust the text size in the browser settings.

Example

body {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2.5em; /* 2.5 * 16 = 40px */
}

h2 {
  font-size: 1.875em; /* 1.875 * 16 = 30px */

}

p {
  font-size: 1em; /* 1 * 16 = 16px */
}

Set Font Size With Rem

The rem unit is relative to the font size of the root HTML element (<html>).

Unlike em, which is relative to the font-size of its parent element, rem always refers to the font-size of the <html> element, regardless of its position in the document tree. This makes rem very useful for creating scalable and responsive designs. By changing the font-size of the <html> element, all elements sized with rem units will scale proportionally throughout the entire page.

The default font-size of the <html> element in most browsers, is 16px. So, by default, 1rem equals 16px unless explicitly overridden in the CSS.

Example

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

h1 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
}

h2 {
  font-size: 1.875rem; /* 1.875 * 16 = 30px */

}

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