Hubbry Logo
Em (typography)Em (typography)Main
Open search
Em (typography)
Community hub
Em (typography)
logo
7 pages, 0 posts
0 subscribers
Be the first to start a discussion here.
Be the first to start a discussion here.
Em (typography)
Em (typography)
Em (typography)
View on Wikipedia
from Wikipedia

An em (from em quadrat) is a unit in the field of typography, equal to the currently specified point size. It corresponds to the body height of the typeface.[1] For example, one em in a 16-point typeface is 16 points. Therefore, this unit is the same for all typefaces at a given point size.[2]

The em space   is one em wide.

Typographic measurements using this unit are frequently expressed in decimal notation (e.g., 0.7 em) or as fractions of 100 or 1000 (e.g., 70⁄100 em or 700⁄1000 em). The number of pixels per em varies depending on system.

History

[edit]
A metal sort. The line height, c, is the precursor of the em.

In metal type, the point size (and hence the em, from em quadrat) was equal to the line height of the metal body from which the letter rises. In metal type, the physical size of a letter could not normally exceed the em.

A digital font's design space in digital type is called the em, which is a grid with arbitrary resolution. Scaling the em to a particular point size is how imaging systems—whether for screen or print—work.

In digital type, the relationship of the height of particular letters to the em is arbitrarily set by the typeface designer. However, as a very rough guideline, an "average" font might have a cap height of 70% of the em, and an x-height of 48% of the em.[3]

Obsolete alternative definition

[edit]
The letter M, on the left in Perpetua and on the right in Calisto, inside squares of one em on each side. The M in Perpetua does not match the point size of the em.

In some older texts, but not all, the em is defined, or said to have been defined, as the width of the capital 'M' in the current typeface and point size.[4] Possibly, this is because the 'M' (or 'm') sort in such cases cast the full-width of the quad (also known as em quad, mutton quad, or m quadrat); and thus, the width of the sort would equal its point size.[5]

Note however, that in the oldest attested English text from 1683 mentioning em (as m or m quadrat), this alternative definition is not used, and also not in many other older texts.[6][7]

CSS

[edit]

In Cascading Style Sheets, the em unit is the height of the font in nominal points or inches. The actual, physical height of any given portion of the font depends on the user-defined DPI setting, current element font-size, and the particular font being used.

To make style rules that depend only on the default font size, another unit was developed: the rem. The rem «rem unit», or root-em, is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document.[8]

See also

[edit]

References

[edit]
[edit]
Revisions and contributorsEdit on WikipediaRead on Wikipedia

Em (typography)

View on Grokipedia
from Grokipedia
In typography, an em is a fundamental unit of measurement defined as the height of the font body, equivalent to the current point size of the typeface—for instance, in a 12-point font, one em equals 12 points. This unit originated in traditional metal type printing, where it approximated the width of a capital letter M, providing a square space (known as an em quad or em quadrat) for consistent spacing and alignment. The em remains essential for defining relative dimensions in typesetting, ensuring scalability across different font sizes and media. The term em originated in the 17th century as part of English printing conventions, with references in works like Joseph Moxon's Mechanick Exercises on the Whole Art of Printing (1683) and further descriptions in Philip Luckombe's The History and Art of Printing (1771), which described em quads as standard spaces for sentence endings and line justification. It facilitated precise control over horizontal and vertical spacing, such as the em space (U+2003), a blank character one em wide used for indentation or paragraph separation, and the em dash (—), a punctuation mark spanning one em to denote breaks or parenthetical content. In metal type, the em's flexibility allowed typesetters to divide it into fractions (e.g., en as half an em) for fine adjustments, a practice that persisted into hot-metal composition before digital shifts in the 20th century standardized it further. In contemporary digital typography, particularly in web design via CSS, the em functions as a relative unit tied to the computed font size of the parent element, enabling responsive layouts that scale with user preferences—for example, a 1.5em margin inherits proportionally from a 16px base font size. This adaptability contrasts with absolute units like points (pt), making the em ideal for accessible and fluid designs, though it can lead to compounding effects in nested elements. Today, the em square also serves as the coordinate basis in font design files, such as OpenType, where glyphs are positioned within a 1,000-unit em grid for precise rendering across devices.

Fundamentals

Definition

In typography, the em is a relative unit of measurement defined as the current font size expressed in points. For instance, in a 16-point typeface, 1 em equals 16 points, making it scalable and adaptable to different type sizes without fixed absolute values. This unit originates from the conceptual width and height of the uppercase letter M in the given typeface, though in modern usage, it is more precisely tied to the point size itself. The em represents the height of the typeface body, forming an imaginary em square that serves as the foundational grid for layout measurements, both horizontally and vertically. Within this em square, key proportions guide glyph design: the cap height typically occupies around 70% of the em, while the x-height is approximately 48% of the em, ensuring consistent visual relationships across characters. These proportions allow for precise scaling in composition, where the em acts as a baseline for aligning elements and maintaining readability. The em is commonly applied in spacing conventions, such as the em space—a horizontal space equal to the full em width used for indentation or justification—and the three-em dash (———)—a punctuation mark three ems wide used in certain bibliographic contexts, such as Chicago style, for indicating repeated authors. For fine-tuned adjustments, typographers employ decimal or fractional notations, like 0.7 em or 70/100 em, to achieve subtle variations in kerning, leading, or margins relative to the em baseline. The en unit, by comparison, measures half the width of an em and is often used for narrower spaces.

Relation to Other Units

The em unit is closely related to the en unit, which is defined as half the width of an em and is commonly used for narrower spacing elements, such as en dashes in ranges or punctuation. In contrast to fixed units like points (pt), which are absolute measurements derived from print typography where 1 pt equals 1/72 of an inch, the em is relative and scales with the font size, making it suitable for precise relative physical sizing in print (where the font size is fixed) and ideal for flexible layouts. Pixels (px), another fixed unit, are device-dependent and based on screen resolution (typically 1 px ≈ 1/96 inch), leading to inconsistencies across displays, whereas em maintains proportionality regardless of device. Among other relative units, the ex is based on the x-height—the height of a lowercase "x" in the font—providing a measure tied to lowercase letter proportions rather than the full font height that em represents. The ch unit, meanwhile, approximates the advance width of the "0" (zero) glyph, making it useful for character-based sizing in monospace fonts but less consistent in proportional typefaces compared to em's focus on overall font dimensions. The em's relative nature offers key advantages in responsive design, as it scales proportionally with changes to the parent element's font size, enabling layouts to adapt fluidly to user preferences or screen sizes without breaking proportions, unlike fixed units that remain static. A common conversion in digital contexts assumes 1 em equals approximately 16 px, based on the default browser font size, though this varies by user settings and context.

Historical Evolution

Origins in Metal Type

The em unit originated in the early movable type printing practices of the 15th and 16th centuries, where it was defined as a square space equal to the height of the metal type body. In early European printing, following Johannes Gutenberg's development of movable type around 1450, printers cast individual letters and spaces on rectangular metal bodies of uniform height, in various sizes. The em, or em quadrat, represented the full square of this body height—for instance, in a type body of 12 points, the em measured 12 by 12 points—serving as a foundational unit for spacing and alignment in composition. This physical basis ensured consistency in line justification and page layout, as the em quad could be inserted to fill gaps or space words without disrupting the uniform height of the type line. While the concept of the square type body dates to this period, the specific term "em quadrat" (or "m quadrat") was first documented in Joseph Moxon's Mechanick Exercises on the Whole Art of Printing (1683). In roman typefaces of the period, such as Nicolas Jenson's 1470 designs for works like the Epistolæ ad Brutum, the capital M was often proportioned to fit closely within this em square, linking the unit conceptually to the letter's width while grounding it in the body height. Similarly, Francesco Griffo's 1499 type for the Hypnerotomachia Poliphili exhibited m and n forms where the em square defined the bounding box for counters and stems, facilitating precise casting in foundries. Printers used em quads primarily for justifying lines to a fixed measure, inserting them at line ends or between words to create even spacing, a technique essential for the justified margins characteristic of incunabula and early printed books. This role extended to broader layout tasks, such as indenting paragraphs or separating sections, where multiple ems (e.g., two-em or three-em quads) provided scalable blanks. By the 17th century, the em had achieved greater standardization in English printing, as documented in Joseph Moxon's Mechanick Exercises on the Whole Art of Printing (1683), which defined the "m Quadrat" as "just so thick as the Body is high," equivalent to the full type body square, while the narrower "n Quadrat" was half that dimension. Moxon emphasized its use in composing rooms for spacing out lines and filling short measures, reflecting widespread adoption among London printers influenced by earlier Continental practices. This body-based definition prevailed over rarer, unsupported notions in some foundries that tied the em strictly to the width of the capital M, which varied by design; primary sources consistently prioritize the physical type body as the core reference. Theodore Low De Vinne, in his historical analysis, corroborated this by noting em multiples like the three-em quadrat as adjustable casts from moulds, underscoring the unit's practical evolution in metal type production.

Transition to Digital Typography

In the 1970s and 1980s, the advent of phototypesetting marked a pivotal shift for the em unit, transforming it from a fixed physical measure tied to metal type bodies into a scalable grid within film-based systems. Phototypesetters projected glyphs onto light-sensitive film or paper using optical or early digital controls, allowing the em to expand or contract proportionally without the constraints of cast metal sorts. This decoupling enabled greater flexibility in type scaling and composition, as the em no longer represented a rigid physical block but rather an abstract reference for glyph positioning and spacing during photographic exposure. The introduction of outline-based font formats in the late 1980s and 1990s further standardized the em in digital typography through PostScript and TrueType technologies. PostScript fonts, developed by Adobe, defined the em square as a 1000 by 1000 unit design space, where glyphs were outlined as vector paths positioned relative to this grid, independent of the final rendered size. TrueType, introduced by Apple and Microsoft in 1991, typically employed 1024 or 2048 units per em to optimize rasterization on screens and printers, with the em serving as a virtual container scaled by the specified point size during output. In both formats, the em became fully abstract and font-size agnostic in design, with point size determining the physical rendering— for instance, a 12-point font scales the em square to 12 points tall, regardless of individual glyph dimensions. This digital framework persisted into the 2010s with the rise of variable fonts, an extension of OpenType specifications that preserved the em's scalability while accommodating axis-based variations. Variable fonts store continuous ranges of styles—such as weight (from thin to black) and width (from condensed to expanded)—within a single file, all mapped to the em square's unit grid for seamless interpolation. The em thus maintains its role as a consistent reference, ensuring that variations along these axes remain proportional to the point size without altering the underlying design space. By the 1990s, traditional definitions of the em as the exact width of a capital M—rooted in metal type conventions—had become fully obsolete in digital standards, replaced by its equivalence to the point size for universal scalability across formats. This shift eliminated inconsistencies from varying M widths across typefaces, prioritizing a standardized, abstract measure for precise control in outline and variable systems.

Applications in Typography

In Print and Publishing

In print and publishing, the em unit serves as a foundational relative measure for establishing consistent visual hierarchy and spacing in static layouts, ensuring that typographic elements scale proportionally with font size across various media like books, newspapers, and magazines. Paragraph indents typically range from 1 to 2 ems, providing a clear demarcation between blocks of text while maintaining readability; for instance, in book design, a 1 em indent is common for body text set in 10- to 12-point type, equivalent to the font's point size in width. Similarly, page margins often incorporate em-based increments to balance white space, with inner margins adjusted to accommodate binding in hardcovers without compromising text flow. Spacing rules in print typography leverage em-derived units to enhance legibility and aesthetic harmony, particularly in separating words and punctuating sentences. The traditional word space approximates 1/4 to 1/3 em, facilitating even justification without excessive hyphenation in justified text blocks common to newspapers and novels. For punctuation, thin spaces measuring 1/5 em are inserted after commas, colons, and semicolons to prevent cramped appearances, while em spaces (full em quads) are reserved for larger separations, such as in tabular matter or script layouts. The en dash, at half an em width, complements these by denoting ranges or connections in editorial content, such as dates or book titles. Publishing software like Adobe InDesign employs relative units for grids to streamline layout workflows, allowing designers to create scalable templates that adapt across page sizes without distorting proportions. Baseline grids aligned to leading ensure vertical rhythm, while column gutters maintain consistent spacing in multi-column formats like magazines. This relative sizing facilitates efficient resizing for different trims, such as from A5 pamphlets to A4 brochures, preserving the overall typographic structure during production. Industry standards for reflowable text in formats like EPUB and PDF emphasize em units to sustain typographic proportions during device-agnostic rendering, particularly in print-to-digital pipelines. EPUB specifications recommend em-based indents and line heights to allow seamless text adjustment while preserving margins and spacing, ensuring that exported print PDFs retain the same relative scaling when converted for e-readers.

In Web and Digital Design

In responsive web design, the em unit facilitates fluid layouts that scale dynamically with user font preferences, ensuring accessibility by accommodating larger text sizes for individuals with visual impairments without disrupting overall proportions. This relative scaling, based on the parent element's font size, allows elements to reflow harmoniously across devices, promoting inclusive experiences that adapt to browser zoom or system settings. Elastic layouts leveraging em units, as opposed to rigid pixel-based ones, maintain readability and structure even when users adjust text enlargement up to 200% as recommended by web accessibility standards. For UI elements, em units ensure proportional harmony by tying dimensions to typography; for instance, button padding is often set at 1-2 em to create touch-friendly targets that grow or shrink with the text, enhancing usability on varied screen sizes. Icon sizing relative to text at 1 em fosters visual consistency, preventing disjointed appearances in interfaces where content scales. This approach contrasts with fixed pixels, which remain device-dependent and can lead to cramped or oversized elements on high-DPI displays. Post-2020 digital trends have amplified em's role in mobile apps and e-readers, where it supports adaptation to high-DPI screens like Retina by enabling scalable, reflowable content without resolution artifacts. In EPUB-based e-books, em measurements allow typography to adjust fluidly to user preferences on devices ranging from smartphones to tablets, aligning with the surge in mobile reading and accessibility-focused development. Relative units like em have become standard in inclusive mobile UI guidelines, facilitating dynamic scaling that enhances legibility on diverse hardware. Earlier web practices occasionally applied em to fixed-width elements, risking overflow on heterogeneous devices due to inheritance compounding in nested components, which could distort layouts unexpectedly. Contemporary designers mitigate this by limiting em to text-proportional features, avoiding its use for absolute constraints to ensure robust responsiveness. Integration with tools like Figma and Sketch now supports relative unit-based prototyping via units like rem and plugins, enabling designers to simulate scalable interfaces that translate seamlessly to code, fostering collaboration for fluid digital products.

Technical Implementation

In CSS and Web Standards

In CSS, the em unit is defined as a relative length equal to the computed value of the font-size property of the element on which it is used. For properties other than font-size, 1em corresponds to the element's own font size; however, when em is applied to the font-size property itself, it inherits from the parent element's computed font-size, enabling scalable typography that adjusts with the document's hierarchy. This inheritance mechanism allows em values to propagate through the DOM, where changes to a parent's font-size automatically scale child elements accordingly. Compound scaling occurs in nested elements due to this inheritance, leading to multiplicative effects. For instance, if a parent element has a font-size of 1.2em (computed as 19.2px assuming a 16px root), a child with font-size: 1.5em will compute to 1.5 times the parent's value, or 28.8px, rather than a fixed multiple of the root. This behavior promotes responsive designs but can result in unintended exponential growth in deeply nested structures, such as multi-level menus or article sidebars. To mitigate nesting issues, the rem (root em) unit was introduced as a variant relative to the font-size of the root element (typically the element), providing consistent scaling independent of parent chains. Unlike em, rem avoids compound multiplication, making it ideal for global sizing; for example, body { font-size: 1rem; } ensures all text bases on the root's 16px default without local inheritance distortions. As of CSS3 and subsequent modules up to 2025, the em unit remains unchanged in its core definition but integrates with modern features like container queries as defined in the CSS Conditional Rules Module Level 5, where it coexists with specialized units such as ch (character width) and ex (x-height) for responsive sizing based on container dimensions rather than viewport. No fundamental alterations to em have been made, but its use in container queries enhances adaptability for modular components, such as cards that scale text relative to their own bounds. Best practices recommend using em for local typography adjustments, like line-height or margins in text blocks, to maintain proportional harmony within components, while favoring rem for base font sizes and layout elements to ensure accessibility and predictability across user zoom levels. A common pitfall is reliance on browser defaults, where the root font-size is typically 16px, potentially causing mismatches on high-DPI displays or when users adjust preferences; setting html { font-size: 62.5%; } (equivalent to 10px base) simplifies rem calculations but requires testing for cross-browser consistency.

In Font Design and Other Formats

In font design, the em serves as the foundational unit for defining glyph coordinates and metrics within digital font files, particularly in TrueType and OpenType formats. These formats employ an em square—a conceptual design space scaled to the font's point size—divided into a fixed number of units specified by the unitsPerEm field in the font's head table. This value, typically 1000 for PostScript-based OpenType (CFF) or a power of 2 such as 2048 for TrueType-based OpenType, ensures consistent scaling regardless of output size, allowing glyphs to be positioned precisely within the em grid. Glyph positioning relies on measurements expressed as fractions of the em to maintain proportional relationships across sizes. The advance width defines the horizontal space a glyph occupies, while left and right sidebearings determine the offsets from the glyph's edges to its bounding box, both stored in font units relative to unitsPerEm. Kerning pairs adjust these advances between adjacent glyphs, also in em fractions, to refine spacing and avoid collisions, enabling designers to create harmonious letter combinations. Beyond and , the em unit appears in other digital formats to standardize glyph scaling. In SVG fonts, the units-per-em attribute on the font-face element divides the em square into a specified number of units, typically aligning with common values like 1000, for embedding scalable vector outlines. Similarly, Type 1 fonts in PDF documents use a 1000-unit em square, where outlines are defined with a 1000:1 scaling matrix to map character space units to user space, ensuring compatibility in PostScript-based rendering. Variable fonts extend the em grid's role by providing a unified coordinate space for interpolating glyph shapes along design axes, such as weight or optical size. Master designs are positioned within the same unitsPerEm grid, allowing linear or non-linear interpolation to generate intermediate instances without altering the em's scale, which preserves metrics consistency across variations. In the CFF2 table used for variable OpenType fonts, a nominalWidthX field further refines this by scaling coordinates relative to the em square. Font design software integrates the em unit to facilitate proportional family creation. Tools like and Glyphs App allow designers to set unitsPerEm (often defaulting to 1000 or 2048) and edit glyphs on the em grid, supporting features like automated scaling for multiple masters in variable fonts. The number of pixels per em for a font of size S points rendered at D PPI is S × (D / 72); for example, a 12-point font at 96 PPI yields approximately 16 pixels per em, influencing hinting and rasterization decisions.

References

  1. https://www.adobe.com/studio/print/pdf/typographic_terms.pdf
  2. https://learn.microsoft.com/en-us/typography/develop/character-design-standards/whitespace
  3. https://www.usm.uni-muenchen.de/people/hoffmann/roff/tmp/typographyspacing.pdf
  4. http://www.briarpress.org/59012
  5. https://www.w3.org/Style/Examples/007/units.en.html
  6. https://www.w3.org/TR/WCAG20-TECHS/C14.html
  7. https://learn.microsoft.com/en-us/typography/opentype/spec/ttch01
  8. https://helpx.adobe.com/fonts/using/adobe-type-resources-faq.html
  9. https://help.fontlab.com/fontlab-vi/Font-Sizes-and-the-Coordinate-System/
  10. https://typedrawers.com/discussion/4949/reasons-to-not-standardize-cap-height-across-font-library
  11. https://www.chicagomanualofstyle.org/dam/jcr:494e70b0-e0d0-497f-9c14-6bd4f472ddff/CMSfacsimile_terms.pdf
  12. https://www.w3.org/Style/LieBos3e/em.en.html
  13. https://pressbooks.openeducationalberta.ca/typographyhandbook/chapter/measurements/
  14. https://typography.guru/term/en-r157/
  15. https://accessibility.psu.edu/legibility/fontsize/
  16. https://developer.mozilla.org/en-US/docs/Web/CSS/length
  17. https://web.dev/learn/css/sizing
  18. https://www.w3schools.com/tags/ref_pxtoemconversion.asp
  19. https://archive.org/download/inventionofprint00devirich/inventionofprint00devirich.pdf
  20. https://www.lettermodel.org/em-en_squares.html
  21. https://www.mirrorservice.org/sites/ftp.ibiblio.org/pub/docs/books/gutenberg/7/2/2/1/72217/72217-h/72217-h.htm
  22. https://www.britannica.com/technology/Lithomat
  23. https://learn.microsoft.com/en-us/typography/truetype/from-typeface-to-font-file
  24. http://designwithfontforge.com/en-US/The_EM_Square.html
  25. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide
  26. https://learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview
  27. https://www.scoringnotes.com/tips/the-point-of-point-sizes/
  28. https://www.thomasphinney.com/2011/03/point-size/
  29. https://kdp.amazon.com/en_US/help/topic/GH4DRT75GWWAGBTU
  30. https://eventimes.co.uk/em-as-in-printing/
  31. https://www.typeseeds.com/articles/spaces.html
  32. https://helpx.adobe.com/indesign/using/grids.html
  33. https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
  34. https://moldstud.com/articles/p-accessible-typography-guidelines-for-inclusive-mobile-app-design
  35. https://css-tricks.com/why-ems/
  36. https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15
  37. https://www.w3.org/TR/css-cascade-5/#inheritance
  38. https://www.freecodecamp.org/news/css-units-when-to-use-each-one/
  39. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
  40. https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6head.html
  41. http://chanae.walon.org/pub/ttf/ttf_glyphs.htm
  42. https://www.w3.org/TR/SVG11/fonts.html
  43. https://adobe-type-tools.github.io/font-tech-notes/pdfs/T1_SPEC.pdf
  44. https://learn.microsoft.com/en-us/typography/opentype/spec/cff2
  45. https://fontforge.org/docs/faq.html
  46. https://handbook.glyphsapp.com/font/
Add your contribution
Related Hubs
User Avatar
No comments yet.