User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
Chris Pearson has a very detailed mathematical analysis on this very subject in his blog post titled Secret Symphony: The Ultimate Guide to Readable Web Typography.
He states that the three aspects of web typography--font size, line height, and line width--are best received when they are proportional.
He argues that:
Here is a graph that he uses to illustrate this concept for common font sizes:
In the post he goes into very detailed analysis of the mathematics behind it. For example, if you had 16px font in a container 550px wide, here is the equation to solve what the line height should be:
Lucky for us he made an online calculator that lets you enter the values yourself to get the values you need for your use case: Golden Ratio Typography Calculator
user17574368792549525a has a great answer :) Just an extra note...
This is an old design question that far predates the web, so you may find more answers in typography and typesetting circles. From section 2.1.2 of the The Elements of Typographic Style:
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.
See also TEOTS As Applied to the Web.
It's a matter of angles.
Also, it depends on the reader's sight and the font size.
The line length should be such that it didn't require the readers to move their eyes sideways too much. This is the natural constraint.
There is also a bottom limit in that lines shouldn't be too short as to require too much eye movement.
When reading a book we adopt a position so that a line that's perpendicular to the paper at the middle of the line intersects our face between our eyes. The lines that run from between-out-eyes to the ends of the line form a isosceles triangle.
This angle is what has to be controlled. I don't mean measured except by trying to read the text and checking if too long a line produces eye strain by forcing the readers to sweep too much width, with the addition of the parallax issue of returning to the start of the wrong line. Something between 30° and 45° is OK.
The top angle of the isosceles triangle depends both on the line width and on the reading distance.
The reading distance, assuming that the readers can control it, depends on the reader's sight and the font size. For example elder people usually need bigger fonts to be able to read with total comfort.
In desktop or notebook screens, with the current widescreens and default configurations, we tend to sit so that the angle to the sides of the screen is too much. Half that width would be a reasonable line length.
Elder readers set bigger fonts but should still sweep the same angle, so the lines would end up containing less words.
Such readers might not be able to read from the same distance a younger guy does, in this case the page should be made wider.
You can try it. Open a book in Acrobat Reader and set the zoom to fit width.
Then maximize the window: you need to increase the reading distance. On the other hand, if you reduce the window width you'll want to be closer.
As you can learn from the HFI research cited by user 17... there is another factor: the font design.
Some fonts are more readable than others. This seems to be related to the font's xHeight.
I can say right away that, assuming it's all text, a 1920-pixel container is far too wide for comfortable reading.
The value in Step 4 is actually the width that you can read at any given time before you have to rotate your eyeballs, which does require physical effort that adds up. Multiply said value by two for the rough ideal max-width of a text column.
You could use a factor of three if you really want to push things, but I wouldn't recommend it. Forget about web units like ems, pixels, and percentages: it's better to think in terms of real-world units like inches and centimeters when testing how wide is too wide.
I have read blog posts from typographers who say that for any given text column, the best font size is one that generally fits 70-80 characters on a line, eg the English alphabet printed three times. I think the 50 characters is fine if you have larger font size.
