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.
rems as well as the ems that you noted. Although, em is probably more common amongst graphics programs.
Commented
Feb 3, 2021 at 23:07
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.
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.
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:
* 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.
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.
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.