CSS rem and em Units – Relative Length Units for Font Size

`rem` and `em` Units

The rem and em units are both relative length units that specify size or length based on the font-size (the text size) of a particular element.

The rem unit is based on the font-size of the root element, the <html> element.
The em unit is based on the font-size of the element itself.
- For the font-size property being set, the parent element's font-size is used as the reference.
- For properties other than font-size, the current element's font size is used as the reference.

Let's explore the concepts of the rem and em units.

The `rem` Unit

rem stands for "root element," and this unit is a relative length unit based on the font-size of the root <html> element, with 1rem equal to the root element's font size.

For example, 1rem is equal to 1 times the <html> element's font size, and 1.5rem is equal to 1.5 times the font size. Let's look at an example.

In this example, the h1 element's font-size is set to twice the font size of the root <html> element. Since the <html> element's font size is 20px, the h1 element's actual font-size becomes 2 * 20px = 40px.

When the `<html>` Element's `font-size` Is Not Specified

What happens to 1rem if the root <html> element's font-size is not specified?

In this case, the font-size of the root <html> element is determined by the browser's default font size set by the user. Most users do not change the default browser font size. The default font size set by the browser is typically 16px, so in this case, 1rem equals 16px.

When to Use the `rem` Unit

The rem unit is a relative length unit based on the font-size of the <html> element. By specifying sizes using rem, you can manage styles globally according to proportional scaling, making it easier to maintain and update your styles.

Setting Global Styles

Use rem for the overall styling of a web page, especially for setting base font sizes, spacing, and other layout-related properties.

CSS

html {
    font-size: 16px;
}
body {
    font-size: 1rem; /* 1rem = 16px */
    margin: 1rem;    /* 1rem = 16px */
}
h1 {
    font-size: 2rem; /* 2rem = 2 * 16px = 32px */
}

Using `rem` with Media Queries

In responsive web design, you can use rem together with media queries to adjust styles according to screen size.

CSS

html {
    font-size: 16px;
}

....

@media (min-width: 768px) {
    body {
        font-size: 1.25rem; /* 20px */
        /* 1.25rem = 1.25 * 16px = 20px
           1rem = font size of the current html element (16px) */
    }
}

Since rem is not affected by nested element inheritance, it is convenient for managing and maintaining global styles consistently.

The `em` Unit

em stands for "element," and this unit is based on the font size of the referenced element.

When applied to the font-size property, the parent element's font-size is used as the reference for 1em.
For properties other than font-size, the current element's font size is used as the reference for 1em.

Applying `em` to the `font-size` Property

When you use em as the value of the font-size property, 1em equals the parent element's font size.

For example, font-size: 1em is equal to 1 times the parent element's font size, and font-size: 1.5em is equal to 1.5 times the parent element's font size. Let's look at an example.

CSS

h1 {
    font-size: 30px;
}
h1 > span {
    font-size: 0.7em; /* 21px */
    /* 0.7em = 0.7 * 30px = 21px;
       1em = font size of the parent element (h1, 30px) */
}

Applying `em` to Properties Other Than `font-size`

When you use em for properties other than font-size, 1em equals the current element's font size.

For example, line-height: 1em is equal to 1 times the current element's font size, and line-height: 1.5em is equal to 1.5 times the current element's font size. Let's look at an example.

When to Use the `em` Unit

he em unit is mainly used when you want to specify relative lengths.

Typography-related Styles

em is useful for setting sizes or lengths based on the current element's font size. This allows you to scale values proportionally, even if you do not know the exact font size of the element.

For example, properties such as line-height and letter-spacing often use em to scale according to the current element's font size.

CSS

h1 {
    font-size: 30px;
    line-height: 1.5em; /* 45px */
    /* 1.5em = 1.5 * 30px = 45px
       1em = font size of this element (30px) */
    letter-spacing: -0.1em; /* -3px */
    /* -0.1em = -0.1 * 30px = -3px
       1em = font size of this element (30px) */
}

Layout and Spacing Relative to Current Font Size

Using em for layout and spacing allows you to scale dimensions proportionally to the current font size. This is especially useful when the font size changes due to responsive design, as margins, padding, and other layout values will adjust automatically according to the font size.

Browser compatibility

Browser Support for `rem` and `em` Units
Unit	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`rem`	Yes	Yes	Yes	Yes
`em`	Yes	Yes	Yes	Yes

Specifications

Specification for `rem` and `em` Units
Specification
`rem`	CSS Values and Units Module Level 4 #rem
`em`	CSS Values and Units Module Level 4 #em

rem and em Units

The rem Unit

When the <html> Element's font-size Is Not Specified

When to Use the rem Unit