This question already has an answer here:

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.

marked as duplicate by icc97, Mayo, Devin, Community Jun 8 '17 at 2:40

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

up vote 15 down vote accepted

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

  • 7
    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. – SnakeDoc Jun 7 '17 at 20:31
  • 5
    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 – Martin Tournoij Jun 7 '17 at 23:31
  • 2
    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 ;-) – Martin Tournoij Jun 7 '17 at 23:34
  • "Pretty close" only counts in horseshoes and hand grenades, @Carpetsmoker ;-P – SnakeDoc Jun 8 '17 at 14:50

The ideal paragraph width is not based on pixels per se, but on characters per line.

This of course depends on the size and spacing of your font type. The project I'm working on has a paragraph width of 540 pixels. There's room for 70 characters per line.

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

Source: Readability: the Optimal Line Length

You can read more on this (arguments on too long or too short lines) when you click on the above mentioned source.

  • 1
    +1 I think this is the more relevant answer because the question really relates to what the optimal amount of information that a user can be expected to absorb. – Michael Lai Jun 8 '17 at 1:00

tl;dr

An average of 60-70 characters is ideal for desktop viewing.
40-50 is more realistic on mobile.


Line length (measure in typographer speak) is an important factor for comfortable readability, especially if you expect prolonged reading (pretty rare on screen). James Craig said it well in Designing with Type:

Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.… Too short a line breaks up words or phrases that are generally read as a unit.

Measure isn't everything

Text size and spacing diagram

Example taken from Pocket mobile. Notice the relatively short measure.

Measure has to be considered in light of other factors that are of equal or greater importance.

The key determining factors when designing for readability are:

  • Typeface
  • Font size
  • Letter spacing*
  • Word spacing*
  • Foreground / background contrast
  • Measure
  • Leading (space between lines)

* Side note on letter and word spacing:
This shouldn't be big concern, as long as you use a good typeface and set it at the right size. These factors are usually accounted for in the font itself and rarely require adjustment.

The not-so-special case of mobile

Considering all factors, you'll find that mobile readability is best with a shorter measure. This is nothing new. Historically, measures in the 30-50 range have been common for multi-column layouts like magazines and newspapers (remember those things?).

In those contexts, multiple columns require narrowing the line — but you can't just keep shrinking the type. It's better to have a readable type size (and leading) and live with a shorter measure. This format would cause reader fatigue in extended "immersive" reading, but that's not an issue for the casual type of reading happening here.

Mobile fits the same scenario.

Resources

Smashing Mag has a great primer specifically addressing line length factors and responsive design. Read that whole thing before you make any further decisions.

There is also a long in progress work translating Robert Bringhurst's classic Elements of Typographic Style to a web-centric resource: Richard Rutter's The Elements of Typographic Style Applied to the Web. 👈 That link will take you to the section on choosing the right measure. One great observation from that page you may want to consider:

… the beauty and advantage of the Web as a medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged & embraced, and built into website designs from the ground up.


I addressed a similar question here some time ago.

Some resources that I found, can help you more:

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

A 560-pixel wide article container, we end up with about 70 characters per line.

source: https://baymard.com/blog/line-length-readability

65 characters (2.5 times the Roman alphabet) is often referred to as the perfect measure. Derived from this number is the ideal range that all designers should strive for: 45 to 75 characters (including spaces and punctuation) per line for print.

source: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

All the resources talk about characters per line, since depending on the font and the font-size, the width does not really say a lot about the readability.

  • How many pixels does this translate to, if the font size is 14 px? How about if the font size is 20 px? I'm looking for an approximate conversion ratio. – Micah Walter Oct 1 at 17:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.