views:

581

answers:

3

(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).

Everything looked pretty straight forward until I noticed an interesting specification on the widths of certain elements. The illustrious googlites had specified a number of table cols using the rare 'ex' unit.

width: 22ex;

At first I was stumped ("what's an 'ex'?"), then it came back to me: I seem to remember something form years ago when first I was learning about css.

The ‘ex’ unit is defined by the font’s ‘x-height’. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that don’t contain an "x".

Well and good. But I've never actually seen it used before (much less used it myself). I use ems quite commonly, and appreciate their value, but why the "ex"? It seems much less standard a measurement than the em, and far less useful.

One of the few pages I found discussing this topic is Stephen Poley's http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen makes good points, however, his discussion seems inconclusive to me.

So my question is: What value does the 'ex' unit lend to web design?

(This question could be tagged subjective, but I'll leave that decision to more experienced SO'ers than myself.)

+9  A: 
Rex M
just to add, it's the height equivalent of using the 'em' unit for width
Jonathan Fingland
@Jonathan a much simpler way to state it, thanks.
Rex M
So is 2ex the height of one capital letter, then?
musicfreak
@musicfreak not necessarily. That depends on the specific typeface. Some fonts have lowercase which are nearly half of the uppercase' height; some have the same height for both cases; and everywhere in-between.
Rex M
I recognize the relationship between em and ex. But since the aspect ratio of fonts is fixed, I don't see the value-add. Perhaps a follow on question would be "when should ex be used instead of em?" To me they seem interchangable with 'ex' just adding another level of complexity. +1 for the good description.
Joel Potter
@Joel What is the ratio between the width of m and the height of x for a given font? Even though it is fixed, it can potentially be very difficult to calculate, because every font has a different and arbitrary ratio between its m and its x. So when designing elements that should be relative to the type, instead of having to determine the ratio yourself, you can rely on the x-height to keep things in proportion.
Rex M
A: 

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".

AmbroseChapel
I agree with this. But isn't the em spec enough for this and more reliable?
Joel Potter
A: 

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.