Qu'est-ce qu'un/une Em (em) ?
Formal Definition
The em is a relative unit of measurement in typography equal to the current font size. If the font size is 16 pixels, then 1 em = 16 pixels. If the font size is 12 points, then 1 em = 12 points. The em is unique among typographic units because it is not a fixed size — it scales proportionally with the text it describes. This makes it invaluable for creating harmonious, scalable typographic systems.
In CSS, the em unit inherits from the computed font-size of the element (or its parent, for the font-size property itself). This means em values compound: if a parent element has font-size: 1.2em and a child element also has font-size: 1.2em, the child's font size is 1.2 × 1.2 = 1.44 times the grandparent's size. This cascading behavior is both the em's greatest strength (for proportional scaling) and its greatest source of complexity.
Historical vs. CSS Definition
Historically in metal type, the em was defined as the width of the capital letter M in a given typeface — hence the name. However, in modern digital typography and CSS, the em is defined purely by the font size, not by the width of any particular character. In most typefaces, the capital M is narrower than one em. A related but distinct concept is the em-dash (—), which is nominally one em wide, and the em-space, which is one em of horizontal whitespace.
Etymology
The Letter M
The term "em" derives from the capital letter M. In early printing, the uppercase M was approximately as wide as the type body was tall, making it a natural reference for the square of the type size. A block of type metal for the letter M in a given size was approximately square (width equal to height), and this square became known as the "em quad" or simply the "em." The em thus became synonymous with the point size of the type.
The term "en" (half an em) similarly derives from the letter N, which in many typefaces is approximately half as wide as the em. The en-dash (--) is half the width of the em-dash (---), and an en-space is half the width of an em-space.
From Metal Type to Digital
In metal typesetting, the em had a very concrete, physical meaning: it was the body size of the type, measured in points. An em of 12-point type was 12 points square. Type foundries cast em-quads (square pieces of type metal used for spacing) and en-quads (half-em spaces) as standard spacing material. When digital typography emerged, the em was abstracted from its physical origins but retained its proportional meaning.
Histoire
Metal Typesetting Era
The em originated in the era of movable metal type (from Gutenberg's press circa 1440 onward). In metal type, each character was cast on a rectangular body of a specific point size. The em was the width of the largest square that could fit on this body — essentially, the point size expressed as a width. Type compositors used em-quads (blank pieces of type metal one em wide) and en-quads (half-em wide) to create spacing between words and paragraphs. The em-dash and en-dash were punches cut to these widths.
Phototypesetting
When phototypesetting replaced metal type in the 1960s and 1970s, the em lost its physical embodiment as a metal block but retained its meaning as a unit equal to the point size. Phototypesetting machines measured character widths in fractions of the em (typically 18 or 54 units to the em), allowing precise control of letterspacing and word spacing.
CSS and the Web
The em entered web design with the CSS 1.0 specification in 1996, which defined the em as a unit relative to the font-size of the element. This made the em a powerful tool for responsive design: by setting base font sizes in pixels and then using ems for all other measurements, designers could create layouts that scaled proportionally when the base size changed. The later introduction of the rem (root em) unit in CSS 3 addressed the compounding problem by always referencing the root element's font size.
Utilisation actuelle
In CSS and Web Design
The em is one of the most important units in CSS. It is used for font sizes, margins, padding, line heights, and media query breakpoints. Using ems for spacing creates proportional relationships that maintain visual harmony when text is resized. Accessibility advocates recommend em-based font sizing because it respects user browser settings for default font size.
In Responsive Design
Em-based media queries create breakpoints that respond to the user's text size preferences. A breakpoint at 48em triggers at different pixel widths depending on the user's default font size, ensuring that layout changes occur when content no longer fits comfortably rather than at arbitrary pixel widths. Major CSS frameworks and design systems (including Bootstrap and Material Design) use ems or rems for many of their measurements.
In Traditional Typography
In print typography, the em continues to define proportional spacing. An em-space (the widest standard space) is one em wide. An em-dash spans one em. First-line paragraph indentation is traditionally one em. Type designers define character metrics (advance widths, kerning values, sidebearings) in units per em — the TrueType standard uses 2,048 units per em, and the CFF/OpenType standard uses 1,000 units per em.
Everyday Use
Text Sizing in Web Browsers
Most web browsers have a default font size of 16px, making 1em = 16px by default. When users adjust their browser's default font size (for accessibility or preference), em-based designs scale accordingly. This makes ems essential for creating accessible websites. A font-size of 1.125em (18px at default settings) provides slightly larger, more readable body text.
Email Design
Em units are used in email design for font sizes and spacing. Since email clients vary widely in their rendering of CSS, ems provide a relatively reliable way to specify proportional sizes. Email designers often use ems for button padding, heading sizes, and spacing to ensure consistency across different email clients.
Typography Software
Font design software (Glyphs, FontForge, RoboFont) works extensively with em units. Glyph metrics — the advance width of each character, the height of ascenders and descenders, and the positions of control points — are defined in units per em. A designer working on a typeface constantly thinks in terms of fractions of the em to achieve consistent proportions across all characters.
In Science & Industry
In Computational Linguistics
Natural language processing and computational linguistics sometimes reference the em as a unit when analyzing text layout and formatting. Studies of reading patterns, text density, and information architecture measure spacing in ems because em-based measurements are independent of absolute type size.
In Human-Computer Interaction
HCI research on interface design uses ems when studying the effects of typographic scaling on usability. Target sizes for touch interfaces, minimum text sizes for readability, and optimal spacing for data-dense displays are sometimes expressed in ems to create resolution-independent guidelines.
In Font Engineering
The em is the fundamental unit in font engineering. The UPM (units per em) value defines the coordinate system within which all glyph outlines are drawn. OpenType and TrueType fonts define every control point, advance width, kerning pair, and vertical metric in em units. This allows the font to be rendered at any size while maintaining precise proportional relationships between characters.
Interesting Facts
Despite its name, the em is not defined by the width of the letter M in modern typography. In most typefaces, the capital M is actually narrower than one em. The name is a historical artifact from the era of metal type.
The rem (root em) unit was introduced in CSS 3 to solve the compounding problem of ems. While 1em refers to the parent element's font size, 1rem always refers to the root element (html) font size, making calculations predictable.
In Unicode, there is a dedicated character for the em-space: U+2003 (EM SPACE). There are also characters for the en-space (U+2002), thin space (U+2009), hair space (U+200A), and many other typographic spaces, all defined as fractions of the em.
The default browser font size of 16px was chosen by early browser developers as a comfortable reading size for screen text. This means that 1em = 16px has become one of the most ubiquitous relationships in web design.
Type designers typically work in a coordinate system of 1,000 or 2,048 units per em. This means a single character's outline is defined with a precision of 1/1000th or 1/2048th of the em, allowing extremely fine control over glyph shapes.
The CSS specification defines that when em is used for the font-size property, it refers to the parent element's font size. For all other properties, it refers to the element's own computed font size. This subtle distinction is a common source of confusion.
In metal typesetting, an 'em quad' was a piece of blank type metal exactly one em wide — a square block used for indentation and spacing. Printers called it a 'mutton' (slang for M), while the en quad was called a 'nut' (slang for N).