Typographic Units in CSS
ch are typographic units, meaning their values depend on an element’s font family. When you use
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
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.
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
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
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
- 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.
I’ll admit that
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
ch pave the road for additional typographic units to follow.