Question

In the CSS3 CSS Fonts Module Level 3 (candidate Oct 13), there is a single reference to the "EM box" and one to the "EM unit" in section 2.3. The quote follows:

[The font-size] property indicates the desired height of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.

What is the "EM box" or the related "EM unit"?

Browsers (and other user agents) should get that from somewhere, from where?

Was it helpful?

Solution

In traditional typography, the space taken up by a capital letter M and the mandatory whitespace around it is always a square. The height or width of the square, an "em", is used as a unit of space used by the text. For example, from that definition, one em is the height of a line of text with the ascender and descender spaces included but without any additional inter-line spacing.

The actual size of an em in points (if you're talking about paper) or pixels (if you're talking about computers) depends on the typeface and size of the font you've chosen.

Browsers etc. get this information from the font, which has a table that provides constants of this sort which they can use to guide rendering of text.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top