It's time to get back with your ex (units)

Tom Golden
Tom Golden

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:

Internet Explorer 3

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.

Arial 14px
Courier 30px
<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; }
    }

Emoji ethics

The way an emoji appears is critical to its interpretation.

So your data has been leaked. Now what?

Do nothing and it's a matter of time before things disappear; this handy guide should help!