{Carrer web log}


Blog about web design & development

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
1230360
1330390
1430420
1530450
1630480
1730510
1830540
1930570
2030600
2130630

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. // Anonymous 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. // Anonymous 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. // Blogger Acaz Souza // 12/10/2010

    Hey look at my site: http://acazsouza.com/

    is about 60-75  

  4. // Blogger 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. // Anonymous Brett Widmann // 12/22/2010

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

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License