Understanding EM Unit In CSS

Posted on • Updated on

Understanding EM Unit In CSS

#css#html#webdev#frontend

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.

FAQs About CSS EM Unit

We'll end by answering some of the most frequently asked questions about CSS em unit.

What is the difference between em and rem units?

The main difference between em and rem units lies in their reference points for base size. The em unit is relative to the font-size of its parent element. rem stands for "root em", it's only relative to the root element (html). It makes rem unit more predictable and easier to manage in large websites.

How to convert pixels to em in CSS?

To convert pixels to em, you need to know total size of 1em, default is 16px
Then, just apply formula: px / em
For example, with 16px size of 1em, 32px will be converted to: 32 / 16 = 2em
Check out our PX to EM converter which allows you to easily convert it.

How to convert em unit to pixels in CSS?

To convert em to pixels, you need to know total size of 1em, default is 16px
Then, just apply formula: em * em size
For example, with 16px size of 1em, 2em will be converted to: 2 * 16 = 32px
Check out our EM to PX converter which allows you to easily convert it.

Why should I use EM units instead of pixels?

em unit offers several advantages over pixels. They adjust based on the user's browser settings. This makes your website more accessible to users who increased the font-size. em unit allows for more flexible and responsive design, as they adjust based on the parent element's font-size.

Can I use em units for styles other than font-size?

Yes, em unit can be used for every CSS style property that accepts a length value, not just font-size. For example: width, height, padding, margin, and line-height. Using em unit for these kind of style properties can help maintain proportional layout for different screens sizes.

Is em unit supported for all browsers?

Yes, em unit is widely supported in modern browsers, including Chrome, Firefox, Safari, and Edge. You can read about support for em unit in caniuse documentation.

What if I nest elements with EM unit?

If you nest elements which are using em unit, the child element's size will be relative to the parent element's size. This can lead to cases where the size of the child element becomes larger or smaller than expected. To avoid this, you can use rem unit, which is always relative to the root element's (html) size.

Are there any disadvantages of using EM unit?

While em unit offers many advantages, it can be difficult to manage than absolute units like px. Because em unit is relative, its actual size can change based on the parent element's size. It can make it harder to predict the size of elements, especially in complex layouts.

Can I use EM unit in media queries?

Yes, you can use em unit in media queries. In fact, using em unit in media queries can improve the responsiveness of your design. Because em units are relative which means, they adjust based on the user's browser settings. It means your media queries will adapt to the user's settings.

How can I calculate the size of nested elements with EM unit?

To calculate the size of nested elements with em unit, you multiply the parent element's size by the child element's size. For example, if the parent element's size is 1.5em and the child element's size is 2em, the actual size of the child element would be 1.5 * 2 = 3em. It's because the child element's size is relative to the parent element's size.