A unit in typography, the em is equal to the currently specified point size. It corresponds to the body height of the typeface. For example, one em in a 16-point typeface is 16 points. This unit is consistent across all typefaces at a given point size. The em space is one em wide. Typographic measurements using this unit are often expressed in decimal notation (e.g., 0.7 em) or as fractions (e.g., 70⁄100 em or 700⁄1000 em). The number of pixels per em varies depending on the system.
Historical Context
The em unit in CSS is rooted in traditional typography, where it originally referred to the width of the capital letter M in a given typeface. In metal typesetting, the M-square (or em-square) was a fundamental unit of measurement, roughly equal to the font’s point size. For instance, in a 12-point font, 1 em would be 12 points wide. The name em itself likely emerged as a spoken and written adaptation of the letter M, much like how letters are sometimes pronounced as words (e.g., el for L).
Modern CSS
In digital typography and CSS, the em unit has evolved beyond its historical association with the letter M and now represents a value relative to an element’s font size. 1em is equal to the current font size of the element it applies to. If no font size is explicitly set, the default value is inherited from the parent element or the browser’s default (typically 16px). For example, if an element’s font size is 16px, then:
- 1em = 16px
- 2em = 32px
This makes em a flexible unit that adjusts dynamically based on context, making it helpful in creating responsive designs.
Use Cases
- Typography: The em unit allows text to scale proportionally relative to its parent.
- Example: `p { font-size: 1.2em; /* 1.2 times the parent element's font size */ }`
- Spacing and Layout: It can be used for margins, padding, and other spacing properties.
- Example: `div { padding: 2em; /* Twice the font size of the element */ }`
- Nested Scaling Issues: Since em is relative to the parent element’s font size, deeply nested elements can sometimes compound unexpectedly, leading to larger-than-intended values.
Difference Between em and rem
While em is relative to the parent element’s font size, rem (root em) is always relative to the root `<html>` font size. This makes rem more predictable for maintaining consistent scaling across an entire website, whereas em is helpful for elements that need to scale dynamically within different contexts.
