Define how and where to use REM units

Use rem units for sizing that doesn't need em units, and that should scale depending on browser font size settings. Use rem units unless you're sure you need em units, including on font sizes. Use rem units on media queries. Don't use em or rem in multi-column layout widths - use % instead.

Found an article for this: https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use...

Thanks @Gauravmahlawat
Article help me to understand the basics about to use REM units

@Gauravmahlawat
Thanks

.

em units for the font-size property will be relative to the font size of the parent element.
em units on other properties than font size will be relative to the font size of the current element.
rem units sizes will always be relative to the font size of the root HTML element.

I searched some articles. Here I am sharing them with you Please have a look at them.

1. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

2. https://www.digitalocean.com/community/tutorials/css-rem-vs-em-units

3. https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

There was nothing to review code wise.
Could this one be closed out?

We should not use the on certain pseudo selectors e.g.

.toolbar .toolbar-icon::before {

see https://www.drupal.org/project/drupal/issues/3332943

I would also suggest avoiding using them on the root/html as the base font sizing can be adjusted there with media queries

e.g.

html {
    font-size: 14px;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media only screen and (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

According to the W3C spec the the key thing to note about rem units is::

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Should this be moved to documentation I wonder.

@alexpott what are your thoughts to #14