The CSS ex unit[z]

From: www.xs4all.nl/~sbpoley/webmatters/emex.html

Summary

I have a few times seen it suggested that the ex unit is useful for setting the widths of CSS boxes. However, having done a little experimenting with the em and ex units in CSS, I do not share that view.

In fact my conclusion is that the CSS ‘ex’ unit is practically useless. A unit based on a typical character width would indeed have been useful in getting CSS boxes to wrap at approximately the same point in the text, regardless of which font the reader is using. But the ex is defined as follows:

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

However, if one is defining the height of a box in terms of the font-size, one clearly wants to use the font-size itself – i.e. the em. While if one is defining the width of a box, it is not obvious why there is any advantage in using the x height. I have racked my brains on this one, and invited opinions on Usenet; I cannot think of any use for the ex unit. If you can, please contact me.

Was this something that went wrong during the creation of the CSS specification?

The rest of this article gives some background for this.

Examples – box sizes

Below are some boxes with the widths shown. Of the browsers I have tried, only Mozilla – and so presumably also other Gecko-based browsers, such as Netscape 6/7 – uses the ex units according to specification. Opera and Internet Explorer seem to assume 1 ex is 0.5 em and leave it at that. Actually half an em does correspond to a typographical unit, but another one: the en.

(Since the original version of this page it has been pointed out to me that the Opera / Internet Explorer behaviour is dictated by the limitations of the Windows operating system. Apparently the Gecko browsers do all their own character rendering, which goes some way to explain why they are so large.)

 

30 em Times New Roman

A sentence made up of lots of very short words to see how the wrap goes with some em and ex values.

 

30 em Arial

A sentence made up of lots of very short words to see how the wrap goes with some em and ex values.

 

60 ex Times New Roman

A sentence made up of lots of very short words to see how the wrap goes with some em and ex values.

 

60 ex Arial

A sentence made up of lots of very short words to see how the wrap goes with some em and ex values.

 

60 ex Verdana

A sentence made up of lots of very short words to see how the wrap goes with some em and ex values.

 

60 ex Bernhard Fashion BT

A sentence made up of lots of very short words to see how the wrap goes with some em and ex values.

 

For those people using other configurations: the image below shows how the above boxes look in Mozilla on Windows. You can see how the Bernhard Fashion font gets a very narrow box because it has very low lower-case letters, though it is actually not much narrower than Times New Roman. It is hard to see how this is useful.

Now, it is possible to create examples where the ex unit does give a more consistent block size (at any rate in Mozilla). This is the case where the fonts concerned have a similar aspect ratio for their lower-case letters (ratio of height to width) but very different aspect values (ratio of em to ex). This is however not generally true.

Font sizes

A helpful e-mail from a typesetter pointed out that it can be useful in typesetting to set fonts according to their ex size: fonts with the same ex size tend to be about equally legible. I suspect this may have been why the ex unit was originally introduced: the intention was to be able to specify something like { font-x-size: 1ex } This could have been very useful: if the author’s selected font had a significantly different aspect value from the reader’s selected default, it would set a font size of approximately equal readability. However font-x-size never materialised.

Stan Brown did point out a conceivable use for the ex. If one wanted to use a graphic to represent a character which has no defined character entity reference, and the character was required to be the size of a lower-case letter, then in principle one could set the height of the image to 1ex. In practice however browser resizing of images is not good enough to make that effective, and in any case one would have to search hard to find a character for which this was necessary.

It has also been suggested that the ex might be useful for margin/padding settings. I guess this is just about possible, at least for top and bottom, though again whether it gives better results than the em probably depends heavily on which fonts are in use.

Winding up

In summary then, although the ex may just be marginally useful in one or two circumstances, your web pages will not suffer if you ignore its existence completely.

Incidentally I’ve found an error in the CSS specification:

“In bicameral scripts, the subjective apparent size and legibility of a font are less dependent on their ‘font-size’ value than on the value of their ‘x-height’, or, more usefully, on the ratio of these two values, called the aspect value (font size divided by x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible.”

Given the last quoted sentence (and also the sentences that follow it in the specification) it is clear that the aspect value is not as stated, but is actually x-height divided by font-size.

Finally, I’ll mention an interesting article Typographical measurement systems on ems, ens and related matters.