REM Use

REM units in CSS are a way to measure distances and sizes in a webpage.

REM units are relative to the font-size of the root element (html). This means that if we set the font-size of the html element to 16px, 1rem will be equal to 16px. If we change the font-size of the html element to 20px, 1rem will be equal to 20px.

Using REM units in typography is a great way to ensure responsive design. By setting font-size in REM units, the font will scale proportionally with the viewport size. For example, if we set the font-size of the body to 1rem (which equals 16px), then all other font sizes can be set as a multiple of 1rem, like 1.5rem or 2rem.

Using REM units for padding and margin can create flexibility in the layout design. By using REM units, the spacing will also scale proportionally with the font-size of the root element.

REM units can also be used for dynamic layouts. For example, if we have a container with a width of 50rem, it will always be half the width of the viewport, no matter what the font-size of the root element is.

Using REM units instead of px can make a website more accessible for users who need to increase the font size. If a user increases the font-size of the webpage, all elements with REM units will also increase proportionally.

Using REM units can make maintenance of a webpage easier. When the font-size of the root element is changed, all other elements with REM units will also change proportionally. This means that we don't have to manually change every element on the webpage.

EM units and REM units are both relative units in CSS, but they are relative to different things. EM units are relative to the font-size of the parent element, while REM units are relative to the font-size of the root (html) element.

Using EM units can be useful for nested elements that need to scale proportionally with their parent elements. For example, if the font-size of the parent element is set to 16px and we want the font-size of the child element to be twice as big, we can set the font-size of the child element to 2em (which equals 32px). EM units can also be useful for creating scalable padding and margin.

Using REM units can be useful for creating a consistent and scalable design across the entire webpage. As mentioned earlier, REM units are relative to the font-size of the root element, which means that changing the font-size of the root element will affect all elements with REM units. REM units can be useful for responsive typography, flexible spacing, dynamic layouts, accessibility, and easier maintenance (as listed in the previous section).

Sources: