Flickr

You can view my pictures and my contacts from Flickr.

Flickr

Amazon

You can view my wish list from Amazon.

Amazon

Delicious

You can view the newest links I've tagged on Delicious.

Delicious

Upcoming

You can view my future events.

Upcoming

Feeds

You can view RSS feeds from my friends and colleagues.

Use of ch unit considered inappropriate (in certain circumstances)

Update: The title of this post was originally a knowing nod to the considered harmful cliché. I thought it might be amusing and get a bit of attention. However it was brought to my attention by a few people I respect that the title as written might be harmful in itself, so I changed it. However I believe that the subtle point I’m trying to make still stands:

When did we start using the ch unit to specify the maximum length for a line of text? Many places you look nowadays you'll see a variation on:

.prose {
  max-inline-size: 60ch;
}

Is it because of a direct reading of Bringhurst and people (like me) who’ve quoted him:

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

I get it: there’s all that talk of ’characters’. But that’s not what Bringhurst means literally. I’ll come back to that shortly.

Firstly let’s remind ourselves about the CSS ch unit. While ch sounds like it should equate to a number of characters or a character width, that’s not strictly the case. The ch unit specifically refers to the width of the zero ’0’ character within the selected font, or 0.5em if no ’0’ is present. So unless you have a line made up entirely of zeroes, or are using a monospaced font, a width of 66ch will probably not give you a line containing 66 characters. What’s more, the rendered width of that line will vary with the font design, sometimes significantly.

Screenshot of two paragraphs, one wider than the other.
Two text blocks are set to 34 ch wide, but the use of a condensed font (top) and an expanded font (bottom) makes the rendered width narrower and wider respectively.

The important part of Bringhurst’s guideline is not the ’66-characters’ but the ’satisfactory length’. This is about readability, and readability is affected by the length of a line more so than the number of characters in it.

A consistent finding is that long line lengths on screen are least preferred or judged as least easy to read [my emphasis]

With that in mind, restricting your line length using rem would be a far more appropriate unit to use:

.prose {
  max-inline-size: 30rem;
}

This would give you a line length accessibly tied to text size, but independent of font design.

But is using ch harmful?

Bringhurst’s guideline includes this little caveat: a page set in a serifed text face in a text size. This enables him to equate the number of characters in a line with its length. So if you are using a fairly standard typeface for your text then you’ll probably be fine. However that ’standard typeface’ assumption is implicit anytime you use ch to set the width of a column of text. Using rem removes that assumption and gives you what you are probably really after – a consistent, predictable limit on line length.

It didn’t surprise me to find that Eric Meyer had written about this six years ago. I’ll leave you with an important observation from his post:

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.

So is using ch harmful? At the risk of saying it depends, it might not be harmful, but it could be, and there is a far more reliable and appropriate unit to use by way of the rem when it comes to limiting line length in a column of text.

Read or add comments

Adactio Elsewhere

I seem to have left pieces of myself scattered around the internet. This is my attempt to pull some of those pieces together.