What is the CSS ‘ch’ Unit?

Published 6 years, 4 months past

I keep seeing authors and speakers refer to the ch unit as meaning “character width”.  This leads to claims that you can “make your content column 60 characters wide for maximum readability” or “size images to be a certain number of characters!”

Well… yes and no.  Specifically, yes if you’re using fixed-width fonts.  Otherwise, mostly no.

This is because, despite what the letters ch might imply, ch units are not “character” units.  They are defined as:

Equal to the used advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it. (The advance measure of a glyph is its advance width or height, whichever is in the inline axis of the element.)

So however wide the “0” character is in a given typeface, that’s the measure of one ch.  In monospace (fixed-width) fonts, where all characters are the same width, 1ch equals one character.  In proportional (variable-width) fonts, any given character could be wider or narrower than the “0” character.

To illustrate this, here are a few example elements which are set to be exactly 20ch wide, and also contain exactly 20 characters.

Courier

Look, 20 characters. abcdefghijklmnopqrst 12345678901234567890 iiiiiiiiiiiiiiiiiiii mmmmmmmmmmmmmmmmmmmm

Helvetica

Look, 20 characters. abcdefghijklmnopqrst 12345678901234567890 iiiiiiiiiiiiiiiiiiii mmmmmmmmmmmmmmmmmmmm

Georgia

Look, 20 characters. abcdefghijklmnopqrst 12345678901234567890 iiiiiiiiiiiiiiiiiiii mmmmmmmmmmmmmmmmmmmm

It’s probably no surprise that in Courier, all the elements are the exact same width as their text contents.  In Helvetica, by contrast, this is mostly not the case except for numbers, which appear to be fixed-width.  In Georgia, by contrast, none of the text contents fit the boxes, not even the numbers.

What I’ve found through random experimentation is that in proportional typefaces, 1ch is usually wider than the average character width, usually by around 20-30%.  But there are at least a few typefaces where the zero symbol is skinny with respect to the other letterforms; in such a case, 1ch is narrower than the average character width.  Trajan Pro is one example I found where the zero was a bit narrower than the average, but I’m sure there are others. Conversely, I’m sure there are typefaces with Big Fat Zeroes, in which case the difference between ch and the average character width could be around 50%.

So in general, if you want an 80-character column width and you’re going to use ch to size it, aim for about 60ch, unless you’re specifically working with a typeface that has a skinny zero.  And if you’re working with multiple typefaces, say one for headlines and another for body copy, be careful about setting ch measures and thinking they’ll be equivalent between the two fonts.  The odds are very, very high they won’t be.

It would be interesting to see the Working Group take up the idea of average character width as a unit of measure — say, 1acw or possibly just 1cw — which actually uses all the letterforms in a typeface to calculate an average value.  That would get a lot closer to “make your columns 60 characters wide!” in a lot more cases than ch does now.

Comments (19)

  1. Wouldn’t it be hard to define an average character width without specifying language (character frequencies vary wildly across languages, even if they have similar alphabets)? And even with a single, language it seems to me that you could have significant problems defining average in (say) a mathematical text versus a romance novel.

  2. Pingback ::

    Collective #429 | Web Design News from Dubado

    […] What is the CSS ‘ch’ Unit? […]

  3. Great information, I had no idea that measure even existed, thank you for sharing. I guess an important point to be considered is the language used in the page, particularly because of the average amount of letters per word.

    Cheers!

  4. Have you looked into the difference between “ch” and “ex” or “ch” and “en”?
    “en” is not a css uom but in typography is defined to be half an “em”.

  5. So what even is the point of this unit? Seems like it’s not useful in practicality.

  6. Pingback ::

    Pixels of the Week – July 8, 2018 - Stéphanie Walter - UX and UI Design, Mobile optimization

    […] What is the CSS ‘ch’ Unit? “however wide the “0” character is in a given typeface, that’s the measure of one ch” […]

  7. Pingback ::

    Web Design & Development News: Collective #429 | Codrops

    […] What is the CSS 'ch' Unit? […]

  8. Interesting idea, Eric! It got me thinking. Please bear with me.

    I see two issues with using ch for column width as it stands, both of which you address implicitly:

    Other than for monospace fonts, it does not correspond to the average width of the letters.
    The deviation from the average width is inconsistent between fonts.

    I understand that you’re looking for a unit that is better at predicting the actual letter count than ch is. Arguably, if the deviation from the average were consistent regardless of font, #1 would be less of a problem.

    But how should we define average width for our purposes?

    Considering the situation you describe — to make a column n characters wide — just using all the letterforms in a typeface to calculate an average value, as you proposed in your last paragraph, would probably not correspond to the actual average character width in any given column, since actual letter form distribution in ordinary text in non-uniform. It even varies by language. Granted, it would probably more often than not be closer to the actual average width than using the character “0”.

    Furthermore, using all Unicode blocks covered by a particular font would skew the average even more. For example, CJK characters are in general much wider that Latin characters. Using only a subset, let’s say all four Latin blocks, would give a more practical value for Latin texts, but not for those using non-Latin scripts.

    A pragmatic solution would maybe be computing the average width using the letters in a 30 word long Lorem ipsum string. That value would probably be close enough for Latin and maybe Greek and Cyrillic scripts. For other scripts, probably not, but then again, the concept of a “n characters wide column” maybe is a purely western typography thing. I don’t know.

    I don’t have a good solution, I just think that this problem can’t be solved just by introducing a new unit. Maybe something that works analogously (is that a word?) to font-size-adjust, but for widths. And, preferably accommodating non-western scripts.

    Until a better solution comes along, I’ll follow your advice in the second-to-last paragraph: tweaking it manually

    Nevertheless, thank you for your ideas, insights and advocacy. Reading your articles is always educational.

  9. Thanks, Eric for this wonderful deep dive of measurement nerdiness! I’ve seen this measure and wondered about how it worked–didn’t know it was based on zero character.

  10. The characters examples with 3 different fonts looks all the same in FF mobile.

  11. Average character width would be useful, but I can think of more cases in which a maximum character width unit would help more. 1mcw could mean the width of the widest character, such as ‘m’ or ‘w’, but not necessarily only those. Using this unit would guarantee that the text content will not exceed the boundaries.

  12. Pingback ::

    Что такое единица CSS «ch»? | Все про сайтостроение

    […] Источник: https://meyerweb.com/ […]

  13. The “ch” unit would be useful for most Asian languages like Chinese and Japanese as the width of each Asian character is fixed. However, if the content consists of multiple languages (e.g. Chinese + English + Arabic numerals), it will be hard to know the width of such mixed text.

  14. Pingback ::

    Diez diseños modernos en una línea de CSS | R Marketing Digital

    […] mínimo aquí es 23ch o 23 unidades de caracteres, y el tamaño máximo es 46ch, 46 caracteres. Unidades de ancho de caracteres se basan en el tamaño de fuente del elemento (específicamente el ancho de la glifo). El tamaño […]

  15. Pingback ::

    CSS Secrets you should know - Blog-Mudassar Ahmed

    […] can restrict our text width or height relying upon the “ch” unit. As Eric Mayer brings up, the ch unit addresses the width of the char ‘0’ (zero) in the font, which is […]

  16. I use “ex” units for this purpose.

    The height of the lowercase x character. And unlike the “skinny zero” scenario, they are almost always the same height as width.

  17. Pingback ::

    Watch Out for Layout Shifts with ‘ch’ Units – Cloud Four

    […] ch units to constrain our post […]

  18. For example, CJK characters are in general much wider that Latin characters.

    I think this kinda works out because CJK words are in general many fewer characters than those in Latin-charset languages.

  19. Chinese text can’t handle the ch width unit properly because ch is based on the width of the Latin character ‘0’, which doesn’t accurately represent the width of Chinese characters. We use a multiplier (around 1.32) to adjust the max-width for Traditional Chinese text to fix this.

    @for $i from 25 through 50 {

#{'[lang*="zh"]'} .ch#{$i} {
    $adjusted-width: ceil($i * 1.32);
    max-width: #{$adjusted-width}ch !important;
  }
}

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview