{Carrer web log} ←

Line length and Font Size relation in design

Thursday, December 09, 2010 { 5 Comments }

There are many studies that are claiming that 60 characters per line is optimal reading size.

Optimal is not necessarily fastest reading line length but is the size  preferred by the users.

In the past I used that information for building Better Web Readability Project - CSS Typography Framework.

I stumbled to Christian Holst article "Readability: the Optimal Line Length" realizing that we came to the same conclusion about the proportion of the font size and line length.

Christian is using 17px font size and 520px column size.

I’m using 16px font size and 480px column size(for better readability project)

If you divide 480/16 = 30 or 520/17 = about 30

So the formula is:

Main Font Size X 30 = Optimal Columns Reading  size

Font Size	x 30	Column Size
12	30	360
13	30	390
14	30	420
15	30	450
16	30	480
17	30	510
18	30	540
19	30	570
20	30	600
21	30	630

I stopped at 21 px for the main font size because at some point the text will become too big and not serve its purpose.

Naturally you can’t just take 12px text and put it in 360px column  and hope that everything will look great. The real design process is far more complex but is interesting  when patterns emerge like in this case.

Here is demo.

Any thoughts?

5 Responses to “Line length and Font Size relation in design”

1. //  Andy Walpole // 12/09/2010

   I think it really depends Vladimir on what images you add. You could use 12px in a 630px, add a few images and it would look great.  

2. //  Christian Holst // 12/09/2010

   Hi Vladimir, like your demo link showing the different font/column sizes, I see now I should have made something similar for the article on readability. Glad you did.  

3. //  Acaz Souza // 12/10/2010

   Hey look at my site: http://acazsouza.com/
   
   is about 60-75  

4. //  Barry Schwartz // 12/12/2010

   I would have measured against x-height rather than nominal size. If the extenders are long they tend to fill up space that otherwise would be interline space, so that the nominal size is inflated. Also the nominal size of a font corresponds may include significant interline space.
   
   It is unfortunate that CSS treats fonts with the same nominal size as if they were interchangeable.  

5. //  Brett Widmann // 12/22/2010

   This is a great help to figure out size. Thanks for sharing.  

Post a Comment

<< Home