Understanding EM Unit In CSS

In this article we will discuss the purpose, advantages and use cases of EM units in CSS layout.

What is em unit?

em is a relative measurement unit that refers to font-size of the element it is used on (in some cases, the font-size of the parent element).

It is a relative unit, which means all values that use it change when the element's font-size changes.

1em means 1 times the element font-size.

if you declare the element's font-size to be 16px

  .element {
    font-size: 16px;
  }

then 1em will interpret it as 16px, 2em will interpret it as 32px, and so on.

Using em (or another relative length value) for font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed.

The inherent cascading nature of EMs allows them to adjust automatically in response to changes in a parent element's font size. This adaptability lets web developers adjust text sizes across a website by modifying just one (parent) font size.

Web developers and designers use EMs thanks to their scalability, flexibility, and mobile-friendliness. They also enable responsive designs, as elements set in EMs seamlessly adapt to different screen sizes and resolutions.

Where to use em unit?

The key-value em units offer is they allow sizing by a font size other than that of the HTML element. The primary purpose of em units should be to allow for scalability within the context of a specific design element.

For example, you might set the padding, margin and line-height around navigation, menu item to use em values. This way if you change the menu's font size the spacing around the menu items will scale proportionately, independently of the rest of the layout.

Design components like menu items, buttons, and headings may have their own explicitly stated font sizes. If you change these font sizes, you want the entire component to scale proportionately.

Common properties this guideline will apply to are margin, padding, width, height, and line-height settings when used on elements with non-default font sizing.

Relative Units vs Absolute Units in CSS

We have mentioned that em unit is a relative unit, so lets deep dive into CSS unit types, to understand what relative and absolute types mean.

Relative units

Relative units are defined in terms of some other value. These are, for example, EM, REM, VW and VH

REM is defined relative to:

• the font-size of the root(html) element of the webpage
• the font-size of the user's browser appearance settings(by default 16px) if it is not provided in the root element of the webpage

EM is defined relative to:

• the font size of the parent element when the property font-size is concerned.
• the font size of the element itself when we're dealing with other properties like height.

VW stands for 1% viewport width. That is to say that if you define the width property as 10vw, the element will take up 10% of the available viewport's width.

These relative length values have a clear advantage above the absolute ones, because they can help make your website responsive. That is to say, your website automatically adapts to the size of the available screen size, doing so in a predictable way.

Absolute units

Examples of absolute length values are: px (which is 1/96th of an inch), in (an inch) or cm (which is 37.8px or 25.2/64in).

When you use these units you can be sure that they will always be the same size. This is especially useful when you know the exact dimensions of the output, which is mostly with print layouts. But it's not so useful when this is not the case, like with all the different screen sizes out there.

And don't forget that, people user different browser settings, either because of preferences or accessibility needs.

EM key points

• em units are based on the font size of the element they're used on.
• em units can be influenced by font size inheritance from any parent element.
• Use em units for sizing that should scale depending on the font size of an element other than the root.
• Don't use em in multi-column layout widths – use % instead.
• Don't use em if scaling would unavoidably cause a layout element to break.

EM conversion tables

The em size is 16px in the following examples

em converted to different units:

	1em	10em	50em	100em
px	16px	160px	800px	1600px
pt	12pt	120pt	600pt	1200pt
in	0.167in	1.667in	8.333in	16.667in
pc	1pc	10pc	50pc	100pc
cm	0.423cm	4.233cm	21.167cm	42.333cm
mm	4.233mm	42.333mm	211.667mm	423.333mm

Different units converted to em:

	1	10	50	100
px	0.063em	0.625em	3.125em	6.25em
pt	0.083em	0.833em	4.167em	8.333em
in	6em	60em	300em	600em
pc	1em	10em	50em	100em
cm	2.362em	23.622em	118.11em	236.22em
mm	0.236em	2.362em	11.811em	23.622em

Conclusion

em is a relative unit that allows you to define an element's font-size, and every other value with the em unit depends on the element's size.