css-units.md

Font Sizes: em vs rem

The em and rem units are specifically dedicated to the font-size, even though they can be used for any property using Length Measurement Units.

The em Unit

The user-friendly definition of em is:

"Font size of the parent, in the case of [text-based] properties like font-size, and font size of the element itself, in the case of other properties like width."
    -from MDN Web Docs¹

CSS Usage & Syntax

.parent-class_01 {
    font-size: 14px;
}
.parent-class_01 .nested-class {
    font-size: 1em; /*
        This translates to:
        'font-size: 14px;'
    */
}


.parent-class_02 {
    font-size: 20px;
}
.parent-class_02 .nested-class {
    font-size: 1em; /*
        This translates to:
        'font-size: 20px;'
*/
}

LESS/SCSS Usage & Syntax

.parent-class_01 {
    font-size: 14px;

    .nested-class {
        font-size: 1em;
        // This translates to '14px'
    }
}

.parent-class_02 {
    font-size: 20px;

    .nested-class {
        font-size: 1em;
        // This translates to '20px'
    }
}

SASS Usage & Syntax

.parent-class_01
    font-size: 14px

    .nested-class
        font-size: 1em
        // This translates to '14px'


.parent-class_02
    font-size: 20px

    .nested-class
        font-size: 1em
        // This translates to '20px'

Length Measurement Units

---

Sources

Footnotes

1. Mozilla Developer Network (MDN) Article: CSS Values and Units ↩