# 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?

-
You might want to look into letter/word-count per row, but there are many factors affecting readability. I asked a similar question on graphicdesign.stackexchange, but the consensus was to "individually do a visual check". –  kontur Feb 5 '13 at 13:24

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.

• 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
-
Excellent answer! (Can we encourage you to pick a more memorable name than 'user1757436'?) –  Alex Feinman Feb 5 '13 at 13:44

I can say right away that, assuming it's all text, a 1920-pixel container is far too wide for comfortable reading.

2. Put your left index finger in front of your left eye.
3. Put your right index finger in front of your right eye.
4. Look at the distance between your left and right index finger.

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.

-
The measurement you suggest is not really how binocular vision works. If we only saw a ray hitting our pupil at 90 degrees to the eyeball surface, and had to rotate the eyeballs for the rest, this would give us a reading field of 2 parallel lines at pupil-distance apart. In fact, the visual field of our eyes is not 2 straight lines, it is a trapeze with our eyes as a base and about a 50 degrees wide viewfield (but we can focus best in the middle, of course). Sadly, I can't draw a diagram in the comment, but there surely are sources in the web explaining the human field of view. –  Rumi P. Oct 28 '13 at 11:39

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.

-

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:

• Font size and line height are proportionally related.
• For any font size, the line height must increase as the line width increases.
• When nature needs a proportion to relate things and to provide order on any scale, it tends to use the golden ratio.
• If your line width is shorter than the optimal width, then your corresponding line height must be less than the golden ratio. Conversely, if your line width is longer than the optimal width, your corresponding line height must be greater than the golden ratio.
• Golden Ratio Typography can be used to fine-tune the typography of any medium!

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.