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

Question

(Not to be confused with Xunit , the popular .Net module testing library.)

Today, in a fit of boredom, I began to inspect the Gmails DOM (yes, I was very bored).

Everything looked pretty simple until I noticed an interesting spec on the width of some elements. Famous googlinites indicated a series of columns using the rare ex unit.

width: 22ex; 

At first I was at a dead end ("what is" ex "?), Then he came back to me: I seem to remember something many years ago when I first learned about CSS. From the CSS3 specification :

[ ex unit ] is equal to the used x-height of the first available font . X-height is called so because it is often equal to the height of the lower case "x". However, the ex expression is even defined for fonts that do not contain "x".

Well, good. But I had never seen it before (I used it myself much less). I use ems quite often and appreciate their value, but why "ex"? This seems a much less standard dimension than em, and much less useful.

One of the few pages I have found in this section is Stephen Powley http://www.xs4all.nl/~sbpoley/webmatters/emex.html . Steven makes good points, but his discussion seems unconvincing to me.

So my question is: What is the meaning of the ex unit for web design?

(This question may be marked subjective, but I will leave this solution to more experienced SO'ers than me.)

Answer 1

This is useful when you want to change something in relation to the height of your lowercase letters in the text. For example, imagine you are working on a design:

In the typographic aspect of design, letter height has important spatial relationships with other elements. The lines in the original image above are intended to indicate the height x of the text, but they also show where the landmarks will be when designing around this text.

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

Answer 2

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

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

Answer 3

Another thing to consider here is how your page scales when the user raises or shrinks the font size (possibly using ctrl + mouse wheel (windows)).

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

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

Thus, using the vertical unit for the vertical scaling property and the horizontal unit for the horizontal scaling property.

Answer 4

The value of being in the CSS specification, if that is what you are really asking, is exactly the same as the value with the em unit.

This allows you to set fonts in relative sizes.

You do not know what size of my base font. So, one good strategy for web design is to set font sizes that are relative, not absolute; equivalent to "double your normal size" or "slightly smaller than normal" rather than a fixed size, such as "ten pixels".

Answer 5

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

Therefore, if you want to specify a vertical distance proportional to the “lines,” use em. Use only ex if you need the actual height of the lowercase letter, which I suppose is much less common.