The Odd-Sized Em

  • In typography, an “em” is the width of an M, hence the name.
  • In monospace fonts, all letters have the same width.

So: Why does monospace text with the CSS “max-width: 10em;” not wrap with a width of 10 characters?

Answer: it seems that, despite the name, 1em in CSS is actually the height of a letter in the default font size, e.g. 16px. Unless your letters are square, which is rather unusual (at least for Latin), 1em in CSS will be nothing like 1em in normal typography.

Anyone know why they did that?

Is it possible to use CSS to say “make the maximum width of this text 80 characters”? If not, why not (seems like a common requirement)? If so, how?

8 thoughts on “The Odd-Sized Em

  1. Yeah, it’s been driving us all nuts forever. Thank goodness we can use pixels now to get a ~80 character width, since the introduction (and defaultisation ;) of full page zoom!

  2. I see a few problems there: if your letters aren’t square then what defines the width of the text?
    The minimum, e.g. 80 i’s? Or the maximum, which could be something like 80 m’s?
    (replace with the actual characters in question; I only chose i+m because they could likely be the most narrow or widest characters).

    Regards, Mic

  3. Gecko has supported the ch unit for some time, at least in HTML (to support the cols attribute on textarea and pre elements); support in XUL is more recent.

    Gecko uses the width of a 0 if available, otherwise the font’s average character width.

  4. Yes, the CSS spec even defines “1em” as the font size (usually of the element it applies on, IIRC of the parent in case of the font-size property, so that “font-size: 1.5em” should mean the same as “font-size: 150%”) – and “1ch” is the average character width (there’s an exact description of how to retrieve that, IIRC measuring the “0” character or something like that).

  5. From what I understand, originally, in typography 1em was (and, I think, is) indeed the width of the capital M. But when HTML came around, and considering that in proportional fonts the capital M occupies a more or less square space, many HTML authors abusively used 1em as the height of the current font. So much so that “the bug became a feature” and current CSS standards mandate that the em unit may indeed be used with this “height” meaning. This may be one of the reasons why Gecko introduced the ch (from “character”) unit some time ago, as only a width, and the width of the digit zero. Not all browsers accepts the ch unit yet, and I’m not sure of whether or not the W3C has yet condoned it, but I feel confident that it soon will; in the meantime it may already be used for userC*.css, for CSS files internal to Gecko browsers and mailers, and in general for anything which is not meant to be read by a non-Gecko or obsolete-Gecko HTML/CSS rendering engine.