What are Rem units? (and how to use them in CSS) (2023)

Of the many HTML styling options that CSS allows, font size is a crucial property—especially when it comes to display responsiveness. Also, there are several ways to dictate the font sizeCSS🇧🇷 Of these, Rem units prove to be exceptionally flexible and relatively intuitive.

Rem units (short for "root-em") determine the font size of an element relative to the size of the root element. By default, most browsers use a font size of 16 pixels. So if the root element is 16px, an element with value1 Dingwill also be equal to 16px. Therefore, REM units are useful for resizing CSS elements relative to the root element size - even if you don't know what the default font size will be.

In this article, we'll look at what Rem units are and how to use them effectively for your styling needs.

What is CSS?

With responsive websites, the size of the web elements changes with the size of the viewport. With CSS, you can declare font size using absolute units like pixels (px) or relative units like percentages, em or rem units.

Because pixels are absolute units, they are not scaled with the viewport. So 1px represents a unit on a physical device, regardless of the device size. Therefore, it is often easier to create responsive websites if you use a relative unit such as percent, em, or rem.

Percentages are relative to a parent element or a property of that element. They are commonly used to set the width and height of an element.

Em units are specifically relative to the parent, allowing an element to be scaled in the context of its parent. consider aptag nested in aArticleElement with a font size of 18px:

 
.article {
Font size: 18px;
}
p {
font size: 2em;
/* sets the font size = 36px */
}

assignment ofpelement has a font size of2emthere is a real size of 36px - double thatArticleElement Which.

What is Rem CSS?

Similar to em units, rems are relative units. However, they refer to the root element - usually theHTMLElement itself. Most browsers set the default font size to 16 pixels. However, you can change that. For example, to change the font size to 14 pixels, add the following to your style sheet:

 
html {
Font size: 14px
}

After adjusting the size ofHTMLelement you can specify the sizes of all other elements with rem units as a percentage of that size (expressed as a decimal).

For example, assuming the root object's default font size is 16 pixels, you would format a paragraph with a font size of 12 pixels0,75 Restweil 12 ÷ 16 = 0,75:

 
p {
Font size: 0.75 rem;
}

Doing these calculations every time you want to convert a rem unit to pixels can quickly become frustrating. Consider the following values, obtained by converting 14px, 18px, and 20px to rem units:

• 14px = 0.875rem
• 18px = 1.125rem
• 20px = 1.25rem

These values ​​aren't easy to remember, and you may have to fish out your calculator more times than you'd like to confirm them.

Fortunately, the 62.5% trick aims to solve these problems. In general, when the root font size is set to 62.5% of the default, the reference value becomes 10 pixels, making the above values ​​1.4 rem, 1.8 rem, and 2.0 rem, respectively.

But why set the root font size to 62.5% instead of 10 pixels?

One of the main advantages of relative units is their scalability, regardless of the physical screen size. Changing the root value with an absolute unit means the content is difficult to read or navigate. The 62.5% trick ensures that developers can easily scale the values ​​without having to worry about the type of device the content is being viewed on.

Implementing the 62.5% trick in your CSS would look like this:

 
html {
Font size: 62.5%;
/* change a default font size from 16px to 10px */
}
h1 {
Font size: 2.4 rem;
/* font size = 24px */
}
h2 {
Font size: 1.6 rem;
/* font size = 16px */
}
p {
Font size: 1.2 rem;
/* font size = 12px */
}

As you can see, calculating rem units with a 10 pixel basis makes things easier. However, there is a chance that the 62.5% cheat will increase your workload. If your body needs to be 12px in size, you will end up having to set most of your module or element font sizes to 12px. In this scenario, you could set the body size to 12 pixels. So keep that in mind when using this trick.

Using Rem in media queries

Ömedia query specificationstates that media queries are (almost) always independent of an internal style in the document.

Therefore, the rem units used in media queries depend on the browser's default size or the custom size in the browser settings - not the size specified in the style sheet.

This means that the 62.5% trick doesn't work on the media query block and 1 rem in it is equal to 16 pixels or the value provided by a user.

See this example with a media breakpoint of32St:

 
html {
Font size: 62.5%;
/* Font size: 10px */
}
h1 {
Font size: 2.4 rem;
/* Font size: 24px */
}
@media(width <= 32rem) {
h1 {
font size: 2rem;
}
}

The breakpoint here is not 32×10px = 320px, but 32×16px = 512px.

Why should you use Rem units?

As already mentioned, rem units refer to the size of the root element. Because a user can set the default size for this element in the browser settings, the size of the web page can be adjusted to the user's preference.

However, using absolute units like pixels creates accessibility barriers. The pixels override the document's root font size, which means user preferences are ignored. Therefore, use Rem units for all scalable items whenever possible.

Rem units vs percents

Typically, percentages are best used to define element widths because they provide a more flexible solution than Rem units. This is especially true in a multi-column layout. Setting column widths to percentages ensures that they are always scaled according to the viewport size.

For example, in a two-column layout, you can use percentages to subdivide the container:

 
.coluna1 {
Width: 75%;
}
.coluna2 {
Width: 25%;
}

This allows columns to be resized proportionally to the size of the viewport.

Rem vs. I united

While rem units are relative to the root element, em is relative to the parent element.

To illustrate how it works, consider the parent and child font sizes shown below. The size of the parent is in pixels and the size of the child is in units.

 
.pai {
Font size: 18px;
}
.Sohn {
font size: 2em;
/* Font size: 36px */
}

The child's actual font size is 2 × 18px = 32px.

If the parent element has no defined font size, em checks the next parent element in the DOM tree - all the way down to the root element - until it finds an entity to reference.

When em is used in metrics other than font size, its value is derived from the font size of that element. Here is an example ofh1Using nested em units in adivElement:

 
div {
Font size: 12px;
}
h1 {
font size: 2em;
Padding: 1.5 inches;
}

here theh1The font size is 24px (2×12px). From this value, the padding value is calculated as 1.5 × 24px = 36px.

The problem with em is that the font size increases when you nest elements.

Check out this example of a CSS style nested list:

 
<Style>
div {
Font size: 15px
}
I {
Font size: 2em
}
</style>
(Video) CSS em and rem explained #CSS #responsive
<body>
<div>
<ul>
<li>Drink (30px)
<ul>
<li>Tee (60px)
<ul>
<li>Chá preto (120px)</li>
<li>Grüner Tee (120px</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>

When using em units in this way, the font sizes of the list items are compounded and increased with each nested level:

With rem units you can avoid this effect because the font size of all elements in the document is derived from the font size of the HTML element.

Em units are useful when the size of a child element needs to be proportional to the parent element. In general, if you use em units, they are better suited for elements with a non-standard font size.

For example, when formatting a navigation component, you want its padding, margin, width, and height elements to scale with it. You can use em units in these properties and rem units for font size.

Using Rem, Em and Percentages in CSS

Rem units allow you to define sizes relative to the root element. As such, they differ from other size alternatives in units—which depend on a parent—or percentages, whose actual values ​​depend on the property they're used on.

When designing accessible websites, you should avoid pixel scaling of text elements. Due to their absolute character, they are not scalable. Instead, opt for rems, ems, and percentages. Use rem units to create elements to be scaled depending on user preferences and em units for elements to be scaled depending on their parents. To create fluid layouts, use percentages.

Of course there are exceptions to every rule. Use trial and error and your best judgment and prioritize scalability and accessibility in your web design.