Posted on • Updated on
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.
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.