text - Relationship between font-size and width of container

Are there any studies done which tell us the relationship between the font size and the optimal width of the container they are in?

For example, 12px font size is going to be too small in a container of 1920px width, as when your eye goes back to the left side it could easily lose which line it was on. So what then is the optimal width for 12px font?

Is there a mathematical formula for maximum readability?

Answer

Based on this part of the question

'when your eye goes back to the left side it could easily lose which line it was on'

I've recast the question as

'What is the optimal line length for reading text on-line'?

My apologies if I misinterpreted the question.

There are a few ways to measure line length. In this answer, line length is measured in characters per line (cpl).

There is an excellent review of the literature in Visible Language.

A older and less thorough review by HFI is here and available for free - unlike the first review.

This summary ignores the decades of research on reading in print may not be relevant to reading on a computer display, tablet, or smartphone.

These are the recommendations for on-line reading.

• Medium line length of 55 cpl for ease of reading, better comprehension and better reading rates for on-screen text compared to lines of 25 cpl or lOO cpl.


• Optimal line width for a single column of text ranges from 45 to 75 cpl. For multiple columns, the line length should be 30 to 50 cpl.


• Line length should be around 30 times (between 20 to 40) the size of the font type


• Readers prefer short lines of about 8 to 10 words or 45 to 60 characters long


• Make line spacing at least 1/30 of the line length to give a 2-degree downward angle for finding the next line.


• Lines with more words should have additional space between them. Additional line spacing allows longer line length without sacrificing legibility

These recommendations touch on some of the other factors relevant to the question but each of these should also be considered when setting line length.

• Line leading


• Word spacing


• Text justification


• Length of the text passage


• Number of columns of text on a page


• Visual angle formed by a line of text


• Screen size


• Screen resolution