The term "em" signifies a concept rooted in typography known as an ephemeral unit. For example, in a font sized at 16 points, 1em equals 16 points, 2em equals 32 points, and so forth.
Em represents a proportional unit in CSS that determines the size of an element in relation to its parent. The element's dimensions start at 1em and increase in multiples like 2em, 3em, and beyond.
The em unit finds its most common application in the font-size CSS property of HTML elements. It is versatile and can be employed in various other properties like padding, margin, line-height, height, width, max-height, and max-width where size adjustments are required.
How the Em Unit Operates
Let's pause to explore the difference between absolute and relative units in CSS to gain a deeper understanding of how the em unit operates.
CSS Fixed Units
Regardless of the screen dimensions or display quality, we can set the font-size attribute using a static unit to ensure consistent rendering of text across different browsers and devices within your HTML content or a user experience component embedded within it.
The standard unit of measurement in CSS for the font-size property of an HTML element is pixels. If an element is assigned a font size of 12px, then all text inside that element and its children will inherit a font size of exactly 12 pixels by default.
CSS Relative Units
Instead, it is recommended to utilize a relative unit for the font-size attribute if you aim for browsers and devices to present the text in your HTML file with a dynamic size.
The CSS property font-size, as the name suggests, determines the text size relative to its parent element.
If the font size of the parent HTML element is not specified, the browser will look up the DOM tree for a defined value. In the absence of any defined values in the DOM tree, the browser will resort to its default value, typically set at 16px.
/* Fixed font size for the body */
body
{
font-size: 17px;
}
/* Relative font size for the headings */
h1
{
font-size: 6em;
}
h2
{
font-size: 4em;
}
h3
{
font-size: 5em;
}
The body tag in the previous example has a fixed font size of 14px. Respectively:
- The font size for the <h1> element is 4em, or 6 x 14px = px.
- The font size for the <h2> element is 4em or 4 x 14px = 56px.
- The font size for the <h3> element is 5em, or 5 x 14px = 70px.
- Em units are practical since they save us the burden of including static values for every UI component in your CSS stylesheet.
- Instead, we may set the <body> tag's font size to a fixed number or the default value for our browser, then let CSS inheritance take care of the rest.
What if we still needed to specify a 14-pixel font size for the body?
The font size on most browsers is typically established at 16 pixels as a default setting, unless a different value has been specifically selected by the user or browser creator.
Comparative Analysis
Finding it challenging to comprehend em in CSS?
There exist additional parties apart from ourselves. The transient nature of these entities can be daunting for many novice web developers. Drawing a parallel to mathematics might aid in simplifying this concept.
"em" becomes easier to understand when you substitute it with x and view your CSS statements as mathematical equations.
If the font size of the parent element in our Document Object Model (DOM) is 14 pixels:
em = 14px
We apply the subsequent formula to calculate 2em, 3em, 4em, and beyond:
em = 14px
2 em = 2 * 14 px = 28 px
3 em = 3 * 14 px = 42 px
Conclusion
The dimension of a CSS attribute is gauged based on the dimension of its parent using a relative unit known as em. If there's one key takeaway to retain from this content, let it be that.
We are no longer required to use fixed font sizes universally as we can now employ em units to define the font-size CSS attribute for our websites, simplifying the process of scaling and personalizing our designs.