Youn

Posted on Oct 2

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

#rem #em #css #ai

😄 This post is based on the content from coding.courses.

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.

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.

html {
    font-size: 20px;
}
h1 {
    font-size: 2rem;
    /* 2rem = 2 * 20px = 40px
       1rem = font size of the html element (20px) */
}

# 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

- 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.

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.

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

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.

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.

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

# When to Use the em Unit

- 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.

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.

div {
    font-size: 30px;
    padding: 1.5em;
    margin-left: 1em;
}

References