When trying to achieve the “ideal” letter count per line how do you balance container size and font size?

Question

“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.”

Source: The Elements of Typographic Style Applied to the Web

When designing a website, predominately for desktop, how do you balance a reasonable font size with container size? Particularly in parts of the website that are fairly dense with information.

With image this is easily achieved by using it as a stopping point:

But without image, it becomes very dense in appearance and harder to follow from one line to the next:

For these dense sections should I reduce the width of the content wrapper? Or enlarge the font size? In the actual document there are already some call-out boxes, lists, and images scattered throughout which helps. But for the portions where its just text how should it be dealt with? I've aerated the content a quite a bit so don't really want to adjust the entire site's width or font size just because of a few denser sections, but if everyone thinks that's the only acceptable way then I will.

Answer 1

First of all, this answer depends completely on what the content of the text and the feel you want to create. From your question, it seems that it's for some type of blog or informational article, but not too technical. My answer will reflect that outlook.

---

For these dense sections should I reduce the width of the content wrapper? Or enlarge the font size?

It's important to stay consistent throughout the page as much as possible. As such, I think these text sections should be styled in the same way as the other text, meaning we need to change the styling in general.

Looking over it, there seems to a few things that I'd improve:

• Apply more padding on the container. White space is vitally important. I'd recommend going on the side of too much as opposed to not having enough. Somewhere around 30-40px of side padding seems to work best in my experience.
• Use a slightly larger font. It looks like you're using ~14px, I'd recommend using around 16px instead. See this related UX.SE post for more details.
• Use a bigger line-height - this one is the main difference. Making the line height bigger makes reading large blocks of text much easier to read.

Here's a demo with the applied recommended changes for you to play with.

With that being said, these recommendations are primarily for a site viewed on a desktop. You will likely need to downsize all three of the above points for mobile users. Again, the related UX post can provide more information on the subject.

Answer 2

You could create divs for the body copy. That way you control the width or make it relative to the screen's size but keeping smaller proportions inside the divs. For every div you create, you could set width, color, span, etc. See this page: http://www.w3schools.com/tags/tag_div.asp