If you’re new to web development and just getting started with CSS, you may be wondering what the em unit stands for.
The term “em” stands for ephemeral unit, a concept taken from the field of typography. For example, 1em in a 16-point typeface is 16 points, 2em is 32 points, etc.
In CSS, em is a relative unit for the size of the current element relative to the size of its parent. 1em corresponds to the exact size of the current element, 2em to double that size, 3em to triple that size, and so on.
The most common use for the em unit is to set the font-size CSS property of HTML elements. However, em can be used for any property where a size is expected (for example, for the padding, margin, line-height, height, width, max-height, max-width, etc.).
For reasons of simplicity, in this post we will talk about em units in the context of the font-size CSS property.
How the Em Unit Works
To help you better understand how the em unit works, let’s take a minute or two to talk about the difference between fixed and relative units in CSS.
Fixed Units in CSS
If you want all browsers and devices to display the text in your HTML document (or a UX element in it) with exactly the number of pixels you’ve specified—no matter the screen size and resolution—you set the font-size property with a fixed unit.
When it comes to the font-size property of an HTML element, the default fixed unit in CSS is pixels. For example, assigning a font size of 12px to an element means that all text in that element and its child elements (unless specified otherwise) will have a font size of exactly 12 pixels.
Relative Units in CSS
If, instead, you want browsers and devices to display the text in your HTML document with a variable size, you use a relative unit for the font-size property.
True to its name, a relative unit for the font-size CSS property sets the size of the text relative to the font size of its parent.
If no font size is specified for the parent HTML element, the browser looks further up the DOM tree for a fixed value. If there’s no fixed value anywhere in the DOM tree, the default value of the browser, typically 16px, is used.
/* Fixed font size for the body */
body {
font-size: 14px;
}
/* Relative font size for the headings */
h1 {
font-size: 4em;
}
h2 {
font-size: 3.5em;
}
h3 {
font-size: 3em;
}In the example above, the <body> tag has a fixed font size of 14px. Respectively:
- The
<h1>element has a font size of 4em, or 4 x 14px = 56px - The
<h2>element has a font size of 3.5em, or 3.5 x 14px = 49px - The
<h3>element has a font size of 3em, or 3 x 14px = 42px
Em units are useful in that they free you from having to set static values for all of the UI elements in your CSS stylesheet. Instead, you can use the browser’s default value or assign a fixed font size to the <body> tag, then let CSS inheritance do its work.
What if we hadn’t given the body a font size of 14 pixels?
As we already touched on, most browsers would have set the font size to the default value of 16 pixels (unless, of course, the browser developer or user has specified another value).
Drawing a Parallel
Having trouble understanding em in CSS?
You aren’t the only one. Many novice web developers are intimidated by the… um, ephemeral nature of em. So let’s draw a parallel with mathematics to (hopefully) simplify things.
If you replace em with x and think of your CSS expressions as mathematical formulas, em all of a sudden becomes much easier to understand.
Say that the font-size of your DOM element’s parent is 14 pixels:
em = 14pxTo calculate 2em, 3em, 4em, and so forth, you use the following formula:
em = 14px
2em = 2 * 14px = 28px
3em = 3 * 14px = 42pxIn Conclusion
If you remember one thing from reading this article, let it be this: em is a relative unit for the size of a CSS property based on that of its parent.
By using em to set the font-size CSS property for your websites, you no longer have to use fixed font sizes everywhere, making it easier to customize and scale your designs.
