Have you ever looked up the available CSS units?

Well, you must have. But have you looked up all of them?

The basic ones, px, %, em, are mostly very well known. But there are some that have been there since CSS1, that you probably don't know at all.

Have you ever heard of the ex unit before?

The ex unit

Browser support

Everything, right back to IE3.

For reference, this is what IE3 looks like:

What does it mean?

1ex is equal to the height of the letter 'x' relative to the element's font-size and font-family. If these are unspecified, they take the closest defined ancestor's values.

<div style="font-size: 14px; font-family: Arial;">
  Arial 14px
  <div style="height: 1ex; width: 200px; background: red; display: inline-block;"></div>
</div>
<div style="font-size: 30px; font-family: Courier;">
  Courier 30px
  <div style="height: 1ex; width: 200px; background: blue; display: inline-block;"></div>
</div>

Why is it useful?

On the surface, it is very similar to the em unit, as it is relative to the active font-size of the element.

The key perks are:

• 2ex is often the best CSS approximation of the actual height of the text as it is font specific, rather than the invisible box containing the glyph, known as the 'em-square' in typography.
• Some people who use em don't know what it is, but they might look up ex.
• It's useful for custom superscript text.
• You can be a length unit elitist hipster.

---

Here's some (highly constrived) examples:

• You can use it to produce a simple cross-browser coloured underline:
  Link 1
  Link 2
  Link 3

  a[href] {
    text-decoration: none;
    border-bottom: .12ex solid red;
  }

  <a href='#' style='font-size: 12px'>Link 1</a>
  <a href='#' style='font-size: 18px'>Link 2</a>
  <a href='#' style='font-size: 24px'>Link 3</a>

• Superscript:

  x2
  x2
  x2

  .super-me {
    font-size: 50%; /* half the size */
    bottom: 2ex; /* twice the x-height, as the x is now half the size ^ */ 
    position: relative;
  }

• Letter spacing could be in ex: BRAND
  BRAND
  BRAND

  .brand {
    letter-spacing: .5ex;
  }

• Copy linebreaks (e.g. landing page multiline headers)
  I have learnt since that it behaves inconsistently across browsers (Source) Break line here and no later. Break line here and no later. Break line here and no later.

  #breaks-after-here {
    /* always breaks after 'here', even if font size changes */
    max-width: 14ex;
  }
  
  .intro { font-size: 12px; }
  
  @media (min-width: 800px) {
    .intro { font-size: 18px; }
  }
  
  @media (min-width: 1200px) {
    .intro { font-size: 24px; }
  }