Is this formula for approximating the character count per line in a div correct?
css, typography
Solution
The examples and the formula and the notes on the cited page all sum up to the simple idea that the width of a character is one half of the font size.
That’s simply a coarse rule of thumb and not very accurate even as an average. The width depends on the font and on the character. The “average width of characters” is a very vague concept. In typography, e.g. in “The Elements of Typographic Style” by Robert Bringhurst, the length of the English lowercase alphabet (a to z) is used as a measure, but it effectively means calculating the average over those letters, as if texts consisted of them only and with each character equally frequent.
In reality, the average width of characters in English prose seems to be closer to 0.4 of the font size rather than 0.5 of it.
In conclusion, if you wish to set the column width to, say, 50 characters, then the following is a reasonable attempt:
width: 20em;
width: 50ch;
Old browsers that do not support the CSS3 unit `ch` will then use `20em`, which corresponds to the 0.4 estimate. You might use a somewhat larger ratio, or considerably larger, if you have checked (measured) that your primary font suggestions refer to fonts where characters are relatively wide. But it’s not exact science. Even the use of the `ch` unit isn’t exact science, since it simply denotes the width of the digit zero (0), though this could be treated as a reasonable approximation of “average character width”.
Problem
I came across some website that says In the preceding example, column 1 has a fixed width: it has been set to 400 px wide. With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line. The CSS for its column 1 is `DIV#col1 { width:400px }` At the moment, I'm not so concerned with some case scenario where the reader increases the text size. I don't understand where he gets his ratios from, but this formula seems to account for both ratios he gives: ``` approximate charcount per line = [2 * (div width)] / (font size) ``` The units in the formula are pixels... Further down he gives two more examples, and the formula still seems to hold... Is this formula correct? Why is he giving those ratios? I would think that someone asked this before, but maybe I have the wrong search terms :)