What is the best number of paragraph width for readability?

  • Since my current project has a lot of text/paragraph content, I consider about the readability of the website.

    I've seen and try to inspect any of sites that I feel have a good readability such as medium.com, Quora.com, and so on.

    Their width of the paragraph always between 500-700px.

    My question is, what is the best number of paragraph width for readability?especially on desktop view.

  • According to studies, the line length should not exceed 70 characters. So keep your paragraph width between 50 and 70 characters.

    So actually you should not care about the width in pixels, but rather the width in ems (The width relative to the font-size). So go for 30-50em.

    Also wikipedia says:

    Some studies have shown that 100 cpl can be read faster than lines with 25 characters, but the level of comprehension remains the same. In order for on-screen text to have both the best speed and comprehension possible about 55 cpl should be used. Like with printed text if lines are too long or too short it will result in slower reading. If lines are too long it is difficult for the reader to quickly return to the start of the next line (saccade) whereas if lines are too short more scrolling or paging will be required. Research suggests that longer lines are better for quick scanning, but shorter lines are better for accuracy. Longer lines should be used when the information will likely be scanned, while shorter lines should be used when the information is meant to be read thoroughly. Web design is often intended to be read in full rather than skimmed, so shorter lines should be used when possible.

    See: https://www.researchgate.net/publication/234578707_Optimal_Line_Length_in_Reading--A_Literature_Review

    This is often cited (the 70 characters per line), but ironically always presented with more than 70 characters per line (your first quoted line has 96 characters, for example). The abstract of the article you reference (researchgate.net) which describes 70 characters being ideal has, in fact, 118 characters in it's opening line. Everyone quotes 70 characters, but the sources stating 70 as being ideal rarely if ever follow that very recommendation.

    Just because those recommendations aren't followed doesn't mean they're no good @SnakeDoc. The authors of that paper had no influence on the design of researchgate.net

    Also, full text here (second header). Unfortunately it seems a scan and the typography is rather messed up – but it's about 80 characters wide, which is pretty close to the cited 70 ;-)

    "Pretty close" only counts in horseshoes and hand grenades, @Carpetsmoker ;-P

    Is worth noting that the width can also be determined by `rem`s as well as the `em`s that you noted. Although, `em` is probably more common amongst graphics programs.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM