What is the value of the css 'ex' unit?

Question

(Not to be confused with Xunit, a popular .Net unit testing library.)

Today in a fit of boredom I started inspecting Gmails DOM (yes, I was very bored).

Ever

Answer 1

Another thing to consider here is how your page scales when a user ups or downs their font size (perhaps using ctrl+mouse wheel (windows)).

I have used em with.. padding-left: 2 em; padding-right: 2 em;

and ex with padding-bottom: 2 ex; padding-top: 2 ex;

Thus using a vertical unit of measure for a vertically scaling property and a horizontal unit of measure for a horizontally scaling property.

Answer 2

Note that, terms like "single/double line spacing" actually mean the offset between two adjacent lines, measured by em. So "double line spacing" means each line has a height of 2 em.

Therefore, if you want to specify a vertical distance that is proportional to "lines", use em. Only use ex if you want the actual height of lowercase letter, which is, I dare say, a much rarer instance.

UPDATE: The web standard allows the browser to use either 0.5em as ex or derive from the font.

However, there is no way to reliably embed any "x-height" information in a font (OpenType or webfont).

Hence, the former possibility makes the ex-unit redundant, and the latter lacks any reliable means to happen. And the fact that either is possible makes it even less reliable.

Thus I argue for the lack of value of the ex-unit.

Answer 3

To answer the question, one use is with superscript and subscript. Example:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Answer 4

The value of having it in the CSS spec, if that's what you're really asking, is exactly the same as the value of having the em unit.

It enables you to set fonts to relative sizes.

You don't know what my base font size is. So one good strategy for web design is to set font sizes which are relative, rather than absolute; the equivalent of "double your normal size" or "a little smaller than your normal size" rather than a fixed size like "ten pixels".

Answer 5

It is useful when you want to size something in relation to the height of your text's lowercase letters. For example, imagine working on a design like so:

In the typographic dimension of design, the height of letters has important spatial relationships to the rest of the elements. The lines in the source image above are intended to help point out the x-height of the text, but they also show where guidelines would be if designing around that text.

As Jonathan pointed out in the comments, ex is simply the height version of em (width).