CSS Secrets - The CH Unit

by Jack Pritchard

Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!

How can the CH unit help you? It is believed from many sources that the optimal characters read per line falls under somewhere between 50 - 60. The highest approved, and still considered readable length is 75 characters per line. With the 'ch' unit (Character), you are somewhat able to set a max width based on the number of characters available to a line of text.

"This unit (ch) represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font."

From a cross-browser viewpoint, the ch value is supported by 82.98% of web browsers according to caniuse.com. Unfortunately, the 'CH' unit isn't very accurate, as a rule of thumb I will set my CH value to equal 10 less than a number of characters I am aiming to display. See the Pen Optimal Character per Line by Jack Davies (@JackDavies) on CodePen