98

(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 straightforward 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 from years ago when first I was learning about CSS. From the CSS3 spec:

[The ex unit is] equal to the used x-height of the first available font. 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 do not 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.)

Rory O'Kane
  • 29,210
  • 11
  • 96
  • 131
Joel
  • 19,175
  • 2
  • 63
  • 83

6 Answers6

141

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:

alt text


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

Community
  • 1
  • 1
Rex M
  • 142,167
  • 33
  • 283
  • 313
  • 34
    just to add, it's the height equivalent of using the 'em' unit for width – Jonathan Fingland May 28 '09 at 00:32
  • So is 2ex the height of one capital letter, then? – Sasha Chedygov May 28 '09 at 02:19
  • @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 May 28 '09 at 02:21
  • 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 May 28 '09 at 03:19
  • 3
    @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 May 28 '09 at 03:30
  • 2
    Another fairly esoteric point is that [according to Mozilla](http://kb.mozillazine.org/Em_vs._ex) Gecko can scale items using exes a bit more accurately than those using ems. The default "non-styled" size of an em is 10.06667px while the size of an ex is 6px. This means that when scaling ems Firefox has to round partial pixels more often than when scaling exes. – benrifkah Oct 05 '11 at 19:00
  • 1
    While not generally correct, it is valid to imagine that 2ex is about the same size as 1em (although the height of a capital letter would typically be somewhat less than 1em). The CSS spec even states "where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed." – natevw Apr 03 '13 at 18:40
  • 29
    @JonathanFingland @RexM Unlike in print typography, in CSS, the `em` unit [does *not* measure a width](http://www.w3.org/WAI/GL/css2em.htm#pgfId=33019) – it measures the **height** of the font. [`1 em` is the computed `font-size` value](http://www.w3.org/TR/css3-values/#em-unit), and [`font-size` specifies “the desired height of glyphs”](http://www.w3.org/TR/css3-fonts/#font-size-prop). So both `em` and `ex` measure a height. ([`ch`](http://www.w3.org/TR/css3-values/#ch-unit), however, does measure a width.) – Rory O'Kane Sep 11 '13 at 20:27
  • 1
    Well, `ch` was a new revelation! It's been around for so long, but I didn't even know about it... – kumarharsh Aug 13 '14 at 11:27
  • 3
    RexM: might I suggest to simply roll-back your answer to your first version, because Rory O'Kane's comment above is completely correct! The only thing one could add to that is that `em` and `ex` are relative to the parent element's computed font-size, or it's parent.parent etc. all the way up to the root element `html` (to which `rem` units are relative) and if that's undefined then we end up with the browser's default (usually 16px/12pt) *Perhaps* @JonathanFingland could remove that comment (not to confuse future readers)? – GitaarLAB Jan 10 '16 at 20:31
29

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;
}
jbs
  • 495
  • 4
  • 7
  • 2
    I don't think that really helps explain what an "ex" is, though. –  Sep 14 '14 at 01:29
  • 14
    The question is "What value does the 'ex' unit lend to web design?". Not "what is an ex unit?" Joel does a very good job of defining an ex unit in the original question. I am providing a practical example of how you can use it to position a superscript. – jbs Sep 15 '14 at 14:12
  • 1
    Good practical example that directly answers the question. Well done. – Basil Bourque Nov 09 '14 at 06:57
2

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.

  • 7
    Both em and ex are vertical units, since they are defined as the *height* of upper case "M" and lower case "x" respectively. They can both be used for vertical and horizontal lengths. – JacquesB May 09 '15 at 13:02
  • To add to this, `ch` is a horizontal unit measuring the width of the zero numeral ("0"). –  Jun 17 '20 at 22:14
1

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.

Yì Yáng
  • 101
  • 1
  • 6
0

For actual value in pixels, getComputedStyle is there to the rescue.

For example, on my maching,

(Chrome on macOs - default font) 1ex == 7.2px

(Chrome on macOs - "system-ui" font) 1ex == 8.4px

Nitsan BenHanoch
  • 411
  • 3
  • 6
0

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
  • 11,957
  • 7
  • 46
  • 68
  • I agree with this. But isn't the em spec enough for this and more reliable? – Joel May 28 '09 at 03:12
  • 1
    @JoelPotter yes, but *only* for widths; for heights, the `ex` seems to be the equivalent. – ANeves Nov 19 '12 at 17:29
  • 5
    @ANeves Incorrect. In CSS an em is the *height* of a font (approximately), not the *width*. In print typography, the idea of an em came from the width of an uppercase `M`. But CSS refined `em`. See [Wikipedia](https://en.wikipedia.org/wiki/Em_(typography)#CSS). – Basil Bourque Nov 09 '14 at 06:55
  • 2
    If you want width, use the [`ch`](http://www.w3.org/TR/css3-values/#ch-unit) unit as mentioned on another answer. – Basil Bourque Nov 09 '14 at 07:01