July 8, 2015

Quick Measure

Most of us are familiar with the 60-75 character long measure for a readable web. There are many ways to implement this, but when I’m prototyping something and probably using a non-standard font, I like to use the ch CSS unit to get some decent line length for paragraphs of text.

What is ch? It’s another font-relative unit, similar to em, rem, ex. The unit is based on the width of ‘0’ of the font being used. But, mark ye, be forewarned; this width is not the best estimate of a typeface’s average character width. It’s not a bad place to start thought, especially for prototyping.

Example

p {
    max-width: 65ch;
}

See the CodePen

And yeah — I’m not using this method on this site, but it’s a nice trick in my bag that I frequent.