Em
Symbol: emWorldwide
Qu'est-ce qu'un/une Em (em) ?
Définition Formelle
L'em est une unité de mesure relative en typographie égale à la taille de police actuelle. Si la taille de police est de 16 pixels, alors 1 em = 16 pixels. Si la taille de police est de 12 points, alors 1 em = 12 points. L'em est unique parmi les unités typographiques car elle n'a pas de taille fixe — elle s'échelle proportionnellement avec le texte qu'elle décrit. Cela la rend inestimable pour créer des systèmes typographiques harmonieux et évolutifs.
En CSS, l'unité em hérite de la taille de police calculée de l'élément (ou de son parent, pour la propriété de taille de police elle-même). Cela signifie que les valeurs em se composent : si un élément parent a une taille de police : 1.2em et qu'un élément enfant a également une taille de police : 1.2em, la taille de police de l'enfant est 1.2 × 1.2 = 1.44 fois la taille du grand-parent. Ce comportement en cascade est à la fois la plus grande force de l'em (pour l'échelle proportionnelle) et sa plus grande source de complexité.
Définition Historique vs. CSS
Historiquement dans la typographie en métal, l'em était défini comme la largeur de la lettre majuscule M dans une police donnée — d'où le nom. Cependant, dans la typographie numérique moderne et en CSS, l'em est défini uniquement par la taille de police, et non par la largeur d'un caractère particulier. Dans la plupart des polices, la majuscule M est plus étroite qu'un em. Un concept connexe mais distinct est le tiret em (—), qui fait nominalement un em de large, et l'em-espace, qui est un em d'espace horizontal.
Etymology
La Lettre M
Le terme "em" dérive de la lettre majuscule M. Dans l'imprimerie ancienne, la majuscule M était approximativement aussi large que le corps de la police était haut, ce qui en faisait une référence naturelle pour le carré de la taille de la police. Un bloc de métal typographique pour la lettre M dans une taille donnée était approximativement carré (largeur égale à la hauteur), et ce carré est devenu connu sous le nom de "em quad" ou simplement "em." L'em est donc devenu synonyme de la taille en points de la police.
Le terme "en" (la moitié d'un em) dérive également de la lettre N, qui dans de nombreuses polices est approximativement moitié moins large que l'em. Le tiret en (--) est la moitié de la largeur du tiret em (---), et un en-espace est la moitié de la largeur d'un em-espace.
De la Typographie Métallique à Numérique
Dans l'impression en métal, l'em avait une signification très concrète et physique : c'était la taille du corps de la police, mesurée en points. Un em de police de 12 points était un carré de 12 points. Les fonderies de caractères coulaient des em-quads (pièces de métal typographique carrées utilisées pour l'espacement) et des en-quads (espaces de moitié em) comme matériau d'espacement standard. Lorsque la typographie numérique a émergé, l'em a été abstrait de ses origines physiques mais a conservé sa signification proportionnelle.
Histoire
Ère de la Typographie Métallique
L'em est originaire de l'ère de la typographie métallique mobile (depuis l'imprimerie de Gutenberg vers 1440). Dans la typographie métallique, chaque caractère était coulé sur un corps rectangulaire d'une taille de point spécifique. L'em était la largeur du plus grand carré qui pouvait tenir sur ce corps — essentiellement, la taille de point exprimée en largeur. Les compositeurs de caractères utilisaient des em-quads (pièces vides de métal typographique d'un em de large) et des en-quads (largeur de moitié em) pour créer des espaces entre les mots et les paragraphes. Le tiret em et le tiret en étaient des poinçons coupés à ces largeurs.
Phototypesetting
Lorsque le phototypesetting a remplacé la typographie métallique dans les années 1960 et 1970, l'em a perdu son incarnation physique en tant que bloc de métal mais a conservé sa signification en tant qu'unité égale à la taille de point. Les machines de phototypesetting mesuraient les largeurs de caractères en fractions d'em (typiquement 18 ou 54 unités pour l'em), permettant un contrôle précis de l'espacement des lettres et des mots.
CSS et le Web
L'em est entré dans le design web avec la spécification CSS 1.0 en 1996, qui définissait l'em comme une unité relative à la taille de police de l'élément. Cela a fait de l'em un outil puissant pour le design réactif : en définissant des tailles de police de base en pixels et en utilisant ensuite des em pour toutes les autres mesures, les designers pouvaient créer des mises en page qui s'échelonnaient proportionnellement lorsque la taille de base changeait. L'introduction ultérieure de l'unité rem (root em) dans CSS 3 a abordé le problème de la composition en se référant toujours à la taille de police de l'élément racine.
Utilisation actuelle
En CSS et Design Web
L'em est l'une des unités les plus importantes en CSS. Elle est utilisée pour les tailles de police, les marges, le rembourrage, les hauteurs de ligne et les points de rupture des requêtes média. Utiliser des em pour l'espacement crée des relations proportionnelles qui maintiennent l'harmonie visuelle lorsque le texte est redimensionné. Les défenseurs de l'accessibilité recommandent la taille de police basée sur l'em car elle respecte les paramètres de taille de police par défaut du navigateur de l'utilisateur.
Dans le Design Réactif
Les requêtes média basées sur l'em créent des points de rupture qui répondent aux préférences de taille de texte de l'utilisateur. Un point de rupture à 48em se déclenche à différentes largeurs de pixels en fonction de la taille de police par défaut de l'utilisateur, garantissant que les changements de mise en page se produisent lorsque le contenu ne s'adapte plus confortablement plutôt qu'à des largeurs de pixels arbitraires. Les principaux frameworks CSS et systèmes de design (y compris Bootstrap et Material Design) utilisent des em ou des rem pour de nombreuses mesures.
Dans la Typographie Traditionnelle
Dans la typographie imprimée, l'em continue de définir l'espacement proportionnel. Un em-espace (l'espace standard le plus large) mesure un em de large. Un tiret em s'étend sur un em. L'indentation du premier ligne de paragraphe est traditionnellement d'un em. Les concepteurs de caractères définissent les métriques des caractères (largeurs d'avance, valeurs de crénage, portées latérales) en unités par em — la norme TrueType utilise 2 048 unités par em, et la norme CFF/OpenType utilise 1 000 unités par em.
Everyday Use
Taille du Texte dans les Navigateurs Web
La plupart des navigateurs web ont une taille de police par défaut de 16px, ce qui fait que 1em = 16px par défaut. Lorsque les utilisateurs ajustent la taille de police par défaut de leur navigateur (pour l'accessibilité ou la préférence), les designs basés sur l'em s'échelonnent en conséquence. Cela rend les em essentiels pour créer des sites web accessibles. Une taille de police de 1.125em (18px avec les paramètres par défaut) fournit un texte de corps légèrement plus grand et plus lisible.
Design d'Email
Les unités em sont utilisées dans le design d'email pour les tailles de police et l'espacement. Étant donné que les clients de messagerie varient largement dans leur rendu de CSS, les em fournissent un moyen relativement fiable de spécifier des tailles proportionnelles. Les designers d'email utilisent souvent des em pour le rembourrage des boutons, les tailles de titres et l'espacement afin d'assurer la cohérence à travers différents clients de messagerie.
Logiciel de Typographie
Les logiciels de conception de polices (Glyphs, FontForge, RoboFont) travaillent largement avec des unités em. Les métriques des glyphes — la largeur d'avance de chaque caractère, la hauteur des ascendants et descendants, et les positions des points de contrôle — sont définies en unités par em. Un designer travaillant sur une police pense constamment en termes de fractions de l'em pour obtenir des proportions cohérentes entre tous les caractères.
In Science & Industry
En Linguistique Computationnelle
Le traitement du langage naturel et la linguistique computationnelle font parfois référence à l'em comme une unité lors de l'analyse de la mise en page et du formatage du texte. Les études sur les modèles de lecture, la densité du texte et l'architecture de l'information mesurent l'espacement en em car les mesures basées sur l'em sont indépendantes de la taille de police absolue.
En Interaction Humain-Ordinateur
La recherche en IHC sur la conception d'interfaces utilise des em lors de l'étude des effets de l'échelle typographique sur l'utilisabilité. Les tailles cibles pour les interfaces tactiles, les tailles de texte minimales pour la lisibilité, et l'espacement optimal pour les affichages denses en données sont parfois exprimés en em pour créer des directives indépendantes de la résolution.
En Ingénierie de Polices
L'em est l'unité fondamentale en ingénierie de polices. La valeur UPM (unités par em) définit le système de coordonnées dans lequel tous les contours de glyphes sont dessinés. Les polices OpenType et TrueType définissent chaque point de contrôle, largeur d'avance, paire de crénage, et métrique verticale en unités em. Cela permet à la police d'être rendue à n'importe quelle taille tout en maintenant des relations proportionnelles précises entre les caractères.
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).