The difference between EM and REM

You may already be adept at using these two flexible units, but you may not fully understand when to use REM and when to use EM. This tutorial will help you figure it out!

Both EM and REM are relative units that are converted by the browser to pixel values, depending on the font size setting in your design. If you use a value of 1em or 1rem, it can be parsed by the browser from 16px to 160px or any other value.

Padding set the 1em

The parsed value is 16px.

Padding set the 1em

The parsed value is 160px.

On the other hand, the browser uses the PX value, so 1px will always show as full 1px.

Slide the slider to try this codepen example, you can see that the values of REM and EM units can be converted to different pixel values, while PX units remain fixed size:

Biggest problem

Using EM and REM units allows us to design more flexibly and to control the overall enlargement of the elements rather than the fixed size. We can use this flexibility to allow us to adjust more quickly and flexibly during development, allowing browser users to resize their browsers to achieve the best possible experience.

Both EM and REM units provide this flexibility and work in a similar way, so the biggest question is when should we use EM values and when should we use REM values?

Main differences

The difference between EM and REM units is that the browser depends on who is converting the PX value to understand the difference is the key to deciding when to use which cell.

We want to make sure you know every detail by reviewing how REM and EM units work. Then I'll talk about why you should use EM or REM units.

Finally, we'll look at what the typical elements are designed, and what type of units you should use in your actual application.

How REM units are converted to pixel values

When using REM units, they convert to pixel size depending on the font size of the page root element, which is the font size of the HTML element. The root element font size is multiplied by your REM value.

For example, the font size of the root element 16px,10rem will be equal to 160px, which is 16 x = 160.

CSS settings padding to 10rem

The browser resolves a value of 160px

How EM units are converted to pixel values

When using EM units, the pixel value will be the EM value multiplied by the font size of the element using EM units.

For example, if a DIV has a 18px font size, 10em will be equivalent to 180px, which is 10x18 = 180.

CSS settings padding to 10em

The browser resolves a value of 180px (or close to it)

Focus on understanding:

There is a more general misconception that the EM units are relative to the parent element's font size. In fact, according to the W3 standard, they are relative to the font size of elements using EM units.

The font size of the parent element can affect the EM value, but this happens purely because of inheritance. Let's see why and how it works.

The inheritance effect of Em units

When using EM units for inheritance, the situation becomes tricky because each element automatically inherits the font size of its parent element. The inheritance effect can only be overridden by explicit font units, such as PX,VW.

The font size of the elements using EM units is determined according to them. However, the element may inherit the font size of its parent element, and the parent element inherits the font size of its parent element, and so on. Therefore, the font size of an element in the EM unit may be affected by the font size of any of its parent elements.

Let's take a look at an example. Try one step at the codepen below. As you move forward, use the Chrome Developer tool or Firebug for Firefox to check the pixel values that our EM units calculate to.

Examples of Em inheritance

If our root element font size is 16px (usually the default) a child element div inside a padding value of 1.5em, the Div will inherit the font size from the root element 16px. So padding will parse to 24px, i.e. 1.5 x 16 = 24.

What if we add a div to wrap the original Div and then set its font size to 1.25em?

We wrap the div to inherit the root element font size 16px and multiply it by its own 1.25em font size. This will set the parcel div font size to 20px, i.e. 1.25 x 16 = 20.

Now our original Div no longer inherits directly from the root element, but inherits from its new parent element the font size is 20px 1.5em its padding value is now equal to 30px, i.e. 1.5 x 20 = 30.

This inheritance effect can be more complicated if we add EM font units to our original Div, say 1.2em.

The div inherits the 20px font size from its parent, then multiplies its own 1.2em setting, giving it 24px, which is 1.2x20 = 24 new font size.

The 1.5em padding on the div will now change size again, with the new font size, 36px, i.e. 1.5x24 = 36.

Finally, to further illustrate that the EM units are relative to the font size they eventually get (not the parent element), let's take a look at setting padding:1.5em if we explicitly set the div to use a 14px value, not inheriting the font size will happen.

Now, our padding is 21px, i.e. 1.5 x 14 = 21 has become smaller. It is not affected by the font size of the parent element.

Because of these pitfalls, you can see why you must know how to properly manage the use of EM units.

Effect of browser setting HTML element font size

Browsers typically have a font size of 16px by default, but this can be changed to any value from 9px to 72px by the user.

What you need to know:

The root HTML element inherits the font size set in the browser unless you explicitly set a fixed value to overwrite it.

The font size of the HTML element, though, is directly determined by the REM value, but the font size may come first from the browser settings.

Therefore, the font size setting of the browser can affect each value that uses REM cells and each inherited by EM units.

Browser settings work when HTML font size is not set

Unless overridden, it inherits the font size of the browser's default settings. For example, let's take the HTML element of the website without setting the Font-size value.

If users make their browser default font size of 16px, then the root element font size will be 16px. Under the Chrome developer tool, you can see the attributes inherited by an element under the Calculated tab.

In this case 10rem equals 160px, which is ten x 16 = 160.

If the user turns the default font size in their browser to 18px, the root font size becomes 18px. The 10rem is now converted to 180px, which is 10x18 = 180.

The browser will adjust the font size of HTML elements using EM units

When the EM unit is set on an HTML element, it is converted to an EM value multiplied by the browser font size setting.

For example, if the font Size property of the Web site's HTML element is set to 1.25em, the root element font size will be 1.25 times times the browser's font size setting.

If the browser font size is set to 16px, the root font size will come out as 20px, i.e. 1.25 x 16 = 20.

In this case 10rem will be equal to 200px, i.e. 10x20 = 200.

So, if the browser font size is set to 20px, the root element font size will be parsed to 25px, i.e. 1.25x20 = 25.

Now 10rem will be equal to 250px, i.e. 10x25 = 250.

Summarize REM and EM differences

All of the above are summed up as follows:

• The REM unit translates to a pixel value that is determined by the font size of the HTML element. This font size is affected by the font size setting in the browser, unless you explicitly override a specific unit.
• The EM units are converted to pixel values, depending on the font size they use. This font size is affected by the font size inherited from the parent element, unless explicitly overridden with a specific unit.

Why use REM units:

REM units provide the greatest power not only for them to provide uniform dimensions but not inheritance. Instead, it gives us a way to get the user's preferences to affect the size of each element in the site that uses REM, no longer using a fixed PX unit.

For this reason, the main purpose of using REM units should be to ensure that regardless of how users set up their own browsers, our layouts can be sized to fit.

A site was originally designed to focus on the most common default browser font size of 16px.

Use browser default font size 16PX

However, by using REM units, if the user adjusts their font size, we can also guarantee the integrity of the layout and use smaller text to avoid flattening the text space.

The size of the browser resolution is 34px.

If the user shrinks their font size, the entire layout falls off, and the text in the blank area does not feel powerless.

Browser Font size 9PX

The user will change the font size setting for a variety of reasons. Accommodating these settings allows for a better user experience.

It is important to:

Some designers set up a fixed PX unit for HTML elements in a way that combines REM units. This is a common practice, so when changing the font size of HTML elements, you can make the whole page adjust accordingly

I strongly oppose the kind of practice because it overrides the browser font size that inherits the user settings. More exaggerated, this exploits the ability of users to adjust themselves to achieve the best visual effects.

If you do need to change the font size of an HTML element, use EM,REM units so that the value of the root element will also be the product of the user's browser font size.

This will allow you to adjust your design by changing the font size of your HTML elements, but still retain the effect of the user's browser settings.

Why Use EM units

EM units depend on a font-size value rather than the font size of the HTML element.

For this reason, the primary purpose of the EM unit should be to allow scalability to be maintained within a particular design element range.

For example, you might use the EM value to set the padding, margin,line-height equivalents of the navigation menu item.

Menu with 0.9rem font size

In this way, if you change the font size of the menu, the spacing around the menu item is scaled proportionally in the remaining space.

Menu with 1.2rem font size

In the previous section you see how EM units get unmanageable. To do this, I recommend using EM units only if you have a clear identification.

Practical application

There are debates between some Web designers, and I believe different people have different preferred methods, but my advice is as follows.

Using EM units:

Scales based on the font size of an element rather than the font size of the root element.

In general, the only reason you need to use EM units is to scale elements that do not have a default font size.

According to our example above, the design of components such as buttons, menus and headings may have their own explicit font size. When you change the font size, you want the entire component to scale appropriately.

Common Properties This guideline applies to padding, margin, width, height, and line-height equivalents on elements that are not the default font size.

I recommend that when you use EM units, the font size of the elements they use should be set to REM units to preserve the extensibility, but avoid the confusion of inheritance.

Font size is usually not controlled using EM units

We often see the use of EM as a font size unit, especially the headline, when I think if using REM will be more scalable.

The reason the titles often use EM units is that they are better than PX units in relative regular text sizes. However REM units can also achieve this goal. If any font size is resized on the HTML element, the caption size is still scaled.

Try changing the following codepen to see how the EM font size works on the HTML element:

In a few cases, we don't want our font size to be adjusted based on the root element, with only a few exceptions.

The example we can think of is a drop-down menu that uses the EM font size, and we have a second level of menu item text size depending on the first level font size. Another example might be the font icon used in the button, and the size of the font icon is related to the size of the button's text.

However, most elements of a Web design tend not to have this type of requirement, so the font size of REM units is generally used, and EM units are used only in special cases.

Use REM units:

No EM units are required, and any dimensions that are scaled according to the browser's font size are set.

This occupies almost everything in a standard design, including Height,width,padding,margin,border,font-size,shadows, which almost includes every part of your layout.

Simply put, all extensibility should use REM units.

Little Tricks

When you create a layout, you tend to be more convenient in pixels, but you should use REM units when you deploy.

You can use preprocessing such as stylus/sass/less to automatically convert plugins such as units or POSTCSS.

Alternatively, you can use Pxtoem to do your conversion manually.

Always use REM units for media queries

In particular, when using REM units to create a unified and extensible design, media queries should also be REM units. This ensures that regardless of the font size of the user's browser, your media query responds to it and adjusts your layout.

For example, if the user scales text very high, your layout might need to be adjusted from two columns to a single column because it might appear on a smaller mobile device.

If your breakpoint is at a fixed pixel width, only the size of the different viewports can trigger them. However, REM-based breakpoints will respond to different font sizes.

Do not use EM or REM: Multi-column layouts

The column widths in the layout should usually be%, so they can smoothly adapt to the unpredictable size of the viewport.

However, a single column generally should still use REM values to set the maximum width.

For example:

This keeps the columns flexible and extensible. And can prevent it from becoming too wide.

When the element should be strictly non-scalable

In a typical WEB design process, there will not be many parts of the layout that you cannot use for scalable design. But occasionally you will encounter elements that really need to use explicit fixed values to prevent scaling.

The premise of adopting a fixed dimension value should be that if it is scaled, its structure will be broken. This really doesn't happen very often, so before you try to take out those PX units, it's absolutely necessary to ask yourself if you're using them.

Summarize

Let's summarize what we've covered with a quick symbolic point:

• REM and EM units are pixel values that are computed by the browser based on the font size in your design.
• EM units are based on the font size used for their elements.
• The REM unit is based on the font size of the HTML element.
• EM units may be affected by any inherited parent element font size
• REM units can inherit the font size from the browser font settings.
• The use of EM units should be based on the font size of the component rather than the root element's font size.
• Use REM When you do not need to use EM units, and you need to scale based on the font size of your browser.
• Use REM units unless you are sure you need EM units, including the font size.
• Use REM units in media queries
• Do not use EM or REM in multi-column layouts instead of%.
• Do not use EM or rem if scaling inevitably results in breaking layout elements.

I hope you have now built a robust, complete picture of exactly how EM and REM units work and through and know how best to use them in your design.

The difference between EM and REM