{Carrer web log} ←

How we read on web and how can we improve that

Monday, May 18, 2009 { 17 Comments }

We don’t read! We scan!

80% scanning and 20% reading

We scan almost every time we are on search engine, blogs, news papers, various sites. And we read only when something is extremely interesting or useful.

When we scan no supercomputer is mach for us, we jump around the text, paragraphs, pictures with super speed.

Example from Google Search

I think we can consume entire chunk of text.

We scan a lot but we hate to read. Why?

Why the reading a book is so different from screen reading?

We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!

Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.

You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.

Last week one of my students who was facing internet for first time sad that he had hated internet reading experience, so he is going back to paper.
So what can we do to improve internet reading?

First give more importance to the main content.

80% good reading content 20% noise

Make the sure that content is easy scanable and readable.

I was thinking to resolve this problem by some CSS Typographical solutions.

I made this open project Better Web Readability Project

I want to explain my solutions:

I started with the paragraphs - the main component of any text.

16px default font size. Oliver Reichenstein and Wilson Miner noticed before me and asked for bigger font.

I think we should wait for the big majority to pass to big monitors and then we can use bigger font for any site.

"lucida grande","lucida sans unicode", sans-serif are my personal choice for the paragraphs.

Other problem is: what should the leading or line-height be. I always use 1.5 line-height but bigger font needs bigger leading so I changed to 1.6em and ultimate correction was 1.625 in order to fit in 26px grid line. I was really happy with the leading - I tried bigger and smaller but 1.625 was perfect. Then I realized that I saw that number before, ahh, bang?! 1:1.618 is the Golden Proportion! First I saw the beauty then the number so I called the Golden Leading. 1.625em <> 1.618, but it’s OK for me.

I also wanted paragraphs to be super distinguished one from another for better scanning so I broke the typography rule - new line or indenting for new paragraph. I use both new line and indenting. 26 px or 1.625em was very big jump from one to another paragraph so I broke the perfect grid line and I reduced that jump to half 1.625em/2 = 0.8125em.

The color of the paragraph is #111111 and background-color #FFFEF0 in order to lower very big contrast monitor letters and to give worm book welcoming.

And the last thing Line Length work best with 480px column around 60 characters per line. Try to be near this number and not to pass 580(600px).

I used Serif (Georgia) for the Heading.

I took and recycled almost everything else: lists, tables, images, comments etc. from typography component of my The Golden Grid and Emastic.

And result: Better Web Readability Project - CSS Library

I’m waiting your comments and suggestion

17 Responses to “How we read on web and how can we improve that”

1. //  Christopher Scott // 5/18/2009

   Very cool library indeed. I'm currently working on a CSS framework, and will probably incorporate a lot of these ideas. Great work... well done sir!  

2. //  Vladimir // 5/18/2009

   @Christopher: Thank you for the kind words :)  

3. //  Dennison Uy // 5/19/2009

   I simply fell in love with the examples. I never even realized how much I hated internet reading until you mentioned it. Good work, will definitely use your library in my next project.  

4. //  Andy Walpole // 5/19/2009

   It's good that web designers are so concerned about more readable experience for users
   
   I personally though would go for 14px for text - after all, it's easy enough to enlarge text if you so do desire.  

5. //  Anonymous // 5/19/2009

   Nice job. The line height and font sizes really make the text stand out. I too, may incorporate some of your ideas into my designs.
   
   Refreshing, since most of the CSS frameworks reset the body text to something like 11, 12, or 13.  

6. //  cyclelove // 5/19/2009

   Interesting idea - are you going to apply it to your own blog? :)  

7. //  Vladimir // 5/19/2009

   @James: Absolutely: ) When I have a little time to redesign the site! But I think the era of bigger fonts will come when more then 80-85% of users will have monitors bigger then 1024px.
   
   If you have blog like this is no problem to switch to 16px. But If you have multi column web site it is probably not time to change or you should be careful not to pass 970px.
   If your web site statistics indicate that you have big majority of users with 1240px monitor size you can apply larger fonts right now.  

8. //  praveen // 5/28/2009

   awesome! I really liked your CSS library. I've started using this along with eric meyer's CSS reset and nathan smith's 960.gs and the result is great. Now I can concentrate more on colors and background images rather and leave the typography to your CSS library to take care of the rest.
   
   I made a sample copy at sampleI'd love to see a framework which would have the CSS reset, grids and your readability library so that web designers (read: graphic designers) can now concentrate more on *designing* rather than coding.
   
   Thanx a lot for the post!  

9. //  Vladimir // 5/28/2009

   @praveen: Thanks!  

10. //  Carlos // 6/13/2009

    Just wanted to say thank you for your contributions here. Great explanations for your choices. I'll start to use these :)  

11. //  dave // 7/07/2009

    I think you have created a great concept here. My only issue is that if we web designers were doing our job properly we wouldn't need it! Surely readability should be paramount in our designs over and above asthetic??  

12. //  Vladimir // 7/07/2009

    @dave:I agree with you , web design after all is young "science" I think we still have a lot of to learn.  

13. //  Unknown // 8/05/2009

    You don't have a background color set for your blog, so it is using whatever the person has set as their default bg color.  

14. //  Anonymous // 12/13/2009

    i'm gonna make my own journal  

15. //  Anky // 12/15/2010

    Thats interesting... will keep that in mind  

16. //  Unknown // 1/27/2012

    I hate to be a bummer, but the readability of this blog is very low. The font is too small. The body has zero margin so the text is right up against the edge of the view port. The lines are too wide.  

17. //  Vladimir // 1/27/2012

    @Lucas I agree. I'm working on redesign of this blog I hope to dedicate some extra time and finish it.  

Post a Comment

<< Home