When to use Em with Rem

You may already be proficient in using these two flexible units, but you may not fully understand when rem to use and when to use them em . This tutorial will help you figure it out!

emAnd 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 1em a value or 1rem , it can be parsed from 16px the browser to 160px any other value.

paddingSet the1em

The parsed value is16px

paddingSet the1em

The parsed value is160px

On the other hand, the browser uses px values, so it 1px will always appear as full 1px .

Slide Slider Try this codepen example, and you can see that rem em the value of the unit can be converted to a different pixel value, while the px units remain fixed size:

Biggest problem

emthe use and rem units allow our designs to be more flexible 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.

emThe rem flexibility and the way in which the units are provided are similar, so the biggest question is when should we use values em and when should we use rem them?

Main differences

emremthe difference between a unit and an organization is the key to px determining when to use which unit, depending on who the browser translates into values.

We want to rem em make sure you know every detail by reviewing and how the unit works. Then I'll talk about why you should use em or rem the unit.

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 working with rem units, they convert to pixel size depending on the font size of the page root element, which is html the font size of the 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 , that is 10 x 16 = 160 .

CSS padding is set to10rem

The browser resolves a value of160px

How EM units are converted to pixel values

When units are used em , the pixel value will be the em value multiplied by the font size of the element used in the em unit.

For example, if one div has a 18px font size, it 10em will be equal to 180px , that is 10 × 18 = 180 .

CSS padding is set to10em

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

Focus on understanding:

There is a common misconception that em units are relative to the font size of the parent element. In fact, according to the W3 standard, they are relative to the font size of the element used in the em unit.

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

The inheritance effect of Em units

It em becomes tricky to use a unit with inheritance, because each element automatically inherits the font size of its parent element. The inheritance effect can only be overridden by explicit font units, for example px vw .

emthe font size of the elements used in units is determined by 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 em element font size in units 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 em pixel values that our unit calculates.

Examples of Em inheritance

If our root element font size is 16px (usually the default) a child element div with a value of padding 1.5em , it inherits the div font size from the root element 16px . So it padding will parse 24px , that is 1.5 x 16 = 24 .

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

We wrap the div inherited root element font size 16px and multiply it by its own 1.25em font size. This will set the package div font size to, that is 20px 1.25 x 16 = 20 .

Now our original is div no longer directly inherited from the root element, but inherits the font size from its new parent element to 20px 1.5em its padding value now equals 30px , that is 1.5 x 20 = 30 .

This inheritance effect can be more complicated if we div add font units to our original em , for example 1.2em .

divInherit the font size from its parent, and 20px then multiply it by its own 1.2em settings, giving it 24px the 1.2 × 20 = 24 new font size.

divOn 1.5em The padding now will change the size again, with the new font size, that 36px is 1.5 × 24 = 36 .

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

Now, our padding for 21px , that 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 have to know how to properly manage your units of use em .

Effect of browser setting HTML element font size

By default, browsers usually have font size 16px , but this can be changed 9px to 72px any value from the user to.

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.

So html the font size of an element is determined directly 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 unit of use rem and em the value inherited by each unit.

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 put the elements of the site html without setting a font-size value.

If the user makes their browser default font size 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 , that is 10 x 16 = 160 .

If the user changes the default font size in their browser 18px , the root font size becomes 18px . Now 10rem convert to 180px , that is 10 × 18 = 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 a em value multiplied by the browser font size setting.

For example, if the html font size property of the elements of a Web site is set to 1.25em , the root element font size will be 1.25 multiplied by the browser's font size setting.

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

In this case 10rem will be equal 200px to, that is 10 × 20 = 200 .

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

10remwill now equal 250px , that is 10 × 25 = 250 .

Summarize REM and EM differences

All of the above are summed up as follows:

• remThe unit translates to a pixel value that is determined by the html font size of the element. This font size is affected by the font size setting in the browser, unless you explicitly override a specific unit.
• emUnits 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:

remUnits provide the greatest strength not only by providing consistent dimensions but not inheriting them. Instead, it gives us a way to get the user's preferences to affect the size of each element used in rem the site, no longer using fixed px units.

For this reason, the rem primary purpose of the Unit should be to ensure that regardless of how the user sets up their own browser, our layout can be resized to the right size.

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

Use browser default font size16px

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 rem html a fixed unit of elements using a combination of units px . This is a very common practice, so change the html font size of the element, you can make the entire 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 the HTML element, then use em the unit so that rem the value of the root element will also be the product of the user's browser font size.

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

Why Use EM units

emThe units depend on a font-size value rather than html the font size of the element.

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

For example, you might use em values to set the, padding or margin equivalent, of a navigation menu item line-height .

0.9rema menu with 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.

1.2rema menu with font size

In the previous section, you saw em how the unit became unmanageable. For this reason, I recommend that you use units only if you have identified them clearly em .

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 work with 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 equivalent 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 the rem unit to preserve the extensibility, but avoid the confusion of inheritance.

Usually not used emUnit Control Font Size

We often see the use em as a font size unit, especially the headline, when I think if rem the use will be more extensible.

Titles are often used em in units because they compare px to units and are better at relative regular text sizes. However, rem the unit can also achieve this goal. If html any font size is resized on the element, the caption size is still scaled.

Try changing the following codepen to see html how the font size on the element em works:

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- em down menu that uses 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 often do not have this type of requirement, so the font size of the unit is generally used rem , and the em units are used only in special cases.

Use REM units:

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

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

To put it simply, 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, 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. But based on rem the breakpoint they 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:

.container {    width: 100%; max-width: 75rem;}

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 come up with 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:

• remand em units are calculated by the browser based on the font size in your design.
• emUnits are based on the font size that uses their elements.
• remThe unit html is based on the font size of the element.
• emThe unit may be affected by any inherited parent element font size
• remUnits can inherit the font size from the browser font settings.
• emThe units used should be based on the font size of the component instead of the root element's font size.
• Use if you don't need to use em units, and you need to scale based on the font size of your browser rem .
• Use rem units unless you are sure you need the em unit, including the font size.
• Units used in media queries rem
• Do not use in multi-column layouts em or rem , instead % .
• Do not use em or rem if zooming will inevitably result in breaking layout elements.

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

I encourage you to try this tutorial guide for yourself, which will create a fully fledged scalability and responsive layout for you.

This article is based on @kezz Bracey's "comprehensive Guide:when to use Em vs. Rem", the whole translation with our own understanding and thinking, if the translation is not good or wrong, please peer friends pointing. If you want to reprint this translation, please specify the English source: http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984.

When to use Em with Rem