What's a good maximum width of text on a webpage? [closed]

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 11 years ago.

Improve this question

I have a fluid layout, but if the browser window is stretched too much, the text can get so wide that it's strange to read such long sentences on 1 line. What's a good maximum width for text? I suppose it de开发者_如何学JAVApends on font size. Is there some kind of formula or heuristic?

The font in my particular case at the moment is serif 16px, but I'm curious to know what best practices are for different fonts and sizes.

---

Smashing Magazine did a design study of popular blogs that contains just this kind of information. The information you're looking for is located in section 2.2 quoted below.

2.2. How many characters per line?

To ensure best readability one needs to ensure comfortable reading. While some research results claim that an optimal line length is 52 – 68 characters per line (including punctuation marks and empty spaces), other studies show that even if the lines are getting longer it does not significantly affect usability. Since no rules of thumbs are provided, designers experiment with a variety of different line lengths.

To compute the max. number of characters per line we have used default setting of the browser as well as default typographic settings provided by the style sheets.

• 10% used 65-74 characters per line (PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped)
• 18% used 75-84 characters per line (Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm)
• 34% used 85-94 characters per line (Lifehacker, Huffington Post, Kottke, Ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger)
• 18% used 95-104 characters per line (Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, Search Engine Land)
• 16% used over 105 characters per line (Engadget, TechCrunch, GigaOM, Wired, TMZ)

Based upon our findings we feel confident to suggest that the most usual (not necessarily most user-friendly) line length lies between 80 and 100 characters.

It is interesting to remark that not a single blog used justified text-alignment — 100% of the blogs used left text-alignment.

So the width is not really important, it's the number of characters that influence the readability.

---

I think you can use the 960 grid as a guide and set a max-width for your fluid layout (I set mine at 960px) because nobody would like to read text across a wide-screen monitor if the layout adapts to the width of the viewport.

So, for your question, I think you should set the width according to your overall spacing for the font (line-height and padding/margin of the contents) and make sure it blends well within the design. The line height for your font should be somewhere between 20px and 26px, while the padding/margin depends on the style of your design.

Hope it helps :)

---

This depends on

1. font size
2. column width
3. average visitor screen resolution
4. devices you are supporting.

I would say that you should check the average screen resolution in your analytics and pander to that demographic.

That said, if you have one solid column of text, you may wish to shorten the line length by adding

a) more columns or
b) graphics or pics