Typographic Units in CSS

Ex and ch are typographic units, meaning their values depend on an element’s font family. When you use em or rem units, the browser computes their values based on the element’s font size. It doesn’t matter what font gets displayed onscreen, the browser will compute the same values for every typeface. This is where ex and ch units offer a little more flexibility. They require the browser to reference an element’s font family before computing values and applying styles.

Let’s take a look at these two typographic units in more detail.

Ex units

In typographic terms, x-height is determined by the height of a typeface’s lowercase letters. This is often measured by the letter x, which doesn’t have any ascenders or descenders. The relationship between a typeface’s font size and x-height can tell you a lot about the typeface’s proportions with only a couple of measurements.

Ex units get their value from the x-height of the font context they’re computed in, which is determined by two things: font family and font size. In other words, they’re equal to the x-height of a specific font family at a specific font size.

To illustrate this, if Helvetica Neue is set at a font size of 100px, then you can expect 1ex to equal about 52px:

Using ex units in CSS is just like using any other units. You’re able to write them with any CSS property you’d use with pixels or em units.

Ch units

Ch units are based on the characters of a typeface, drawing their value from the width of a font’s 0 glyph. I’ll warn you that this is somewhat arbitrary, and the width of a 0 is often a poor estimate of a typeface’s average character width. However, when using a monospace typeface — where all glyphs share identical widths — ch units are always dependable.

With this constraint in mind, here are some of the use cases where I’ve found ch units to be particularly useful:

• Setting a container’s width
• Letter-spacing text (instead of using height-based units like em)
• Creating gutters that are based on a typeface’s proportions

In the following example, I’m able to declare max-width: 75ch on the paragraph element, ensuring ideal line length as the user’s viewport widens.

Takeaways

I’ll admit that ex and ch units are more than a little weird. They’re unlike any other units CSS has to offer. Weirdness aside, these typographic units offer front-end developers a lot of opportunities to explore web typography. With any luck, I hope that ex and ch pave the road for additional typographic units to follow.