Welcome to WebmasterWorld Guest from 34.204.173.36

Forum Moderators: phranque

Message Too Old, No Replies

What typography helps readers understand pages?

Huge effects for print -- who's tested the web?

     
11:36 pm on Jan 16, 2004 (gmt 0)

New User

10+ Year Member

joined:Apr 9, 2003
posts:38
votes: 0


Colin Wheildon's Type & Layout: How typography and design can get your message across—or get in the way, describes the huge effect typography has on how well readers understand what they read.*

For instance, given a good article of general interest with otherwise ideal layout (on paper),

  • Switching from full justified text to ragged right drops the percentage of readers with good comprehension of the contents from 67% to 38%.
  • Switching from serif to sans serif body type drops good comprehension from 67% to 12%.
  • Any text color but black drastically reduces comprehension -- to 51% for a dark color, 29% for a medium color, and 10% for a bright color.
  • Black text on colored tints of 10% or less works fine. On darker tints, comprehension drops rapidly.

If text is hard to read, people stop reading. Does this sound like web pages?

Wheildon tested printed pages, not computer screens.

Last I emailed him, as far as he knew no one has duplicated his studies on the web. This should be pretty easy:

  1. Start with several high-traffic pages that have multiple opportunities for users to do something, based on what they understand about the content. Best if this content drills several clicks deep to facilitate tracking how far they read.
  2. Serve users sets of these pages that use different style sheets (for example, letting the browser set the font vs. specifying various serif and sans serif fonts).
  3. Track and compare the results.

Any takers?

* Understanding (comprehension) is different than "legibility" or "readability", which measure how well people recognize words and letters, and sometimes how fast they read them. Previous studies measured readability, not comprehension.

[edited by: oilman at 12:13 am (utc) on Jan. 17, 2004]
[edit reason] no affiliate urls please [/edit]

12:06 am on Jan 17, 2004 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12172
votes: 61


Great topic Wilma. Unfortunately we are faced with the complexity of the differences between print media and screen media. There are a few studies out there concerning readability in a screen media environment. Most of the ones I've read have come to the conclusion that sans-serif fonts are more readable than serif fonts when it comes to screen media. Here is one of those articles...

http*//www.wilsonweb.com/wmt6/html-email-fonts.htm

1:46 am on Jan 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


A good bit of research is reported here:

[psychology.wichita.edu...]

12:30 pm on Jan 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 15, 2002
posts:710
votes: 0


Yes, san-serif on the web because the relatively poor quality of monitors makes the glyphs difficult to see.

Dark text on light background - the higher the contrast the better. I think most agree with this.

Larger fonts are better (within reason).

One thing I don't see mentioned enough is line-height (the vertical spacing between lines), and it's relationship to column width. The wider the column, the more space you want between lines. That's because the wider the column gets, the more work it is for the eye to trace back and find the beginning of the next line. I guess that's why newspapers use such narrow columns. By keeping the line-height small they and can cram more text above the fold, and by using narrow columns they preserve readibility.

But on the web, if you have variable width columns (that expand with the window width) then you need to play it safe by giving the lines of text a little more distance.

My $0.02 :)

7:12 am on Jan 18, 2004 (gmt 0)

New User

10+ Year Member

joined:Apr 9, 2003
posts:38
votes: 0


Thanks for the refs and ideas, folks.

Seems to me that the studies referenced (and others I've seen), while good, don't quite do what I want: determine, from visitor responses, what combination of typographical factors work on real web pages.

Including testing such things as letting visitors' browsers set the font. How does that compare with setting either a serif or a sans serif font? And which ones? Especially if you let the browser set the text size, with changes in font size set in percentages?

Good point on line-height and its relation to column width, jamesa. Another factor that needs some real-world tests based on results.

Wheildon found that typographers, graphic designers, and the like had no trouble with typographical elements that caused serious problems for magazine readers. In that sense, those of us most competent to create typography are least qualified to notice what doesn't work about it.

Any ideas for getting this comparison launched as an actual project? Best if done on several different websites that have different page layouts and page lengths, different purposes (shopping, informational), different audiences with different degrees of web experience, etc. Then report the results publicly -- here, for instance.

7:18 am on Jan 18, 2004 (gmt 0)

Moderator from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
posts:12411
votes: 417


Switching from full justified text to ragged right drops the percentage of readers with good comprehension of the contents from 67% to 38%.

I've found that justifying text on the web doesn't work well with narrow columns... You can get some ridiculously large spaces between long words in a short line.

On darker tints, comprehension drops rapidly.

My experience and gut instinct says this is also true on a screen. The worst is tinted text on a black background... the old Wired Magazine school of design. I could never read that dark purple text against black in the magazine. It's even more difficult on a monitor.

I studied calligraphy and typography for a long time with one of the great teachers, who fully imbued me with the belief that black fonts on white paper work best. For paper, I'm also a strong believer in serif fonts. On the web, what everybody here said is true... sans-serif works best, but that doesn't necessarily mean Helvetica bold.

Above my desk I have a note posted... for 12px and greater, use Arial; for 9, 10, and 11px, used Verdana. I don't expect anything less than 9px to be legible on a large screen, hi-res monitor.

About testing all this... sounds like another application for split run testing.

8:16 pm on Jan 18, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


re: small fonts

There's a huge uptick in onscreen readability when a font size of 8px or 9px also gets, say, 1px of letter-spacing. I read that detail once in a study, long since lost, and applied it. Then I didn't need a study -- it was obvious once I tried it.

Similarly, a bit of extra line height is extremely helpful, just as leading is in print. There's a balance between font size, the width of the line and the space between lines that good typographers know well. Actual onscreen testing is still minimal in this area, but until CSS allows for dynamic line-height, this is one factor that argues against extremely flexible layouts (and begs for browser support for max-width!)

And finally, black on white is great for print - but that's partially because paper is not "pure" white nor is ink "pure" black. A pure white on screen is a bit too much glare for my eye and I often temper it to a near white, usually on the warm side, and just enough to show in at least 16 bit color but map to #ffffff with 8-bit settings.

1:46 am on Jan 22, 2004 (gmt 0)

New User

10+ Year Member

joined:Apr 9, 2003
posts:38
votes: 0


Very interesting what folks say about small fonts.

Vincent Flanders of Web Pages That Suck [webpagesthatsuck.com] rants against fixed-size fonts -- which some wag named "font b*tch" typography -- because some browsers won't resize them (IE 5 and 6 for Windows). This causes problems for visitors with less-than-perfect vision, notably older surfers with money to spend.

I build all my pages with sizes in percentages, so visitors can make the type as big or as small as they like. I think I shall start adding letterspacing to the really small sizes -- thanks for the tip, tedster!

5:03 pm on Jan 22, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 2, 2003
posts:515
votes: 0


Apparently, Verdana is the most readable font on a computer screen. My style declaration on all my sites is as follows:
body 
{
font-family: verdana, arial, helvetica, sans-serif;
5:28 pm on Jan 22, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member jimbeetle is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 26, 2002
posts:3295
votes: 9


Basically repeating what everybody else has stated, but the relationship among font size, line length and height are the most often overlooked factors on a web page.

Add in screen glare, resolution, scrolling, distance from screen, posture and all the other factors not necessarily related to print and we have an entirely different science.

I've been spending the past two days setting up a couple of Movable Type sites. Not wanting to take the time and resources to print a 100-page manual I simply kept it open in a browser window. Whew! Small font, long lines, normal height, scrolling up and down, posture eroding after hours in front of the machine. Made for very, very tired eyes and a sore neck.

I found this morning it makes a beautiful and very useful printed document. Time and money well spent.

10:01 pm on Jan 22, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Apparently, Verdana is the most readable font on a computer screen

Verdana was one of several Windows core fonts [microsoft.com] that Micrososft helped develop -- explicitly for the web and on screen rendering.

Although Verdana does test pretty well, surprisingly in this usability test at wichita.edu [psychology.wichita.edu] Century Schoolbook did even better.

10:39 pm on Jan 22, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 2, 2003
posts:515
votes: 0


tedster- interesting links. I scanned the study, and the conclusion was:
"Of the fonts studied, Verdana appears to be the best overall font choice. Besides being the most preferred, it was read fairly quickly and was perceived as being legible."

In what regards would you prefer Schoolbook?
11:46 pm on Jan 22, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:July 18, 2002
posts:2312
votes: 42


notably older surfers with money to spend

That's my customer and we doubled the size of our font across the board to please them. It made a difference. But I think lots of people should take note of this. The baby boomers (at least in the US) are getting old fast and many of them are too proud to wear glasses for reading. Beyond that, seinor citizens are one of the fastest growing demographics on the web. A larger font may actually get you a more loyal audience, simply because they can read your site over another one.

12:06 am on Jan 23, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 29, 2003
posts:72
votes: 0


Just my 2p worth - Sitting on IRC and chatting for hours on end, myself (and a lot of friends) have found that white text on a black background works a lot better, less eyestrain, and less loss of interest. We can only take so much black on white in a day when the white is actually brighter than paper...

Not that I want to see it on a lot of websites - I've not found that many with light text on dark backgrounds that work as well, but when they do work, they get more interest because of the novelty, and hence I'm more likely to read everything in more depth.

Robin

4:08 am on Jan 24, 2004 (gmt 0)

New User

10+ Year Member

joined:Apr 9, 2003
posts:38
votes: 0


Sans serif fonts have many advantages on screens, but make sure that pages users will print use serif type. Wheildon found the percentage of readers who comprehended articles well dropped from 67% to 12% when he switched from serif (such as Times or Times New Roman) to sans serif.

Setting body text justified rather than ragged right also helps significantly.

I run a site with lots of articles, many long. We let browsers set the fonts visitors see, but provide printer versions of article pages. These use Times body text, justified paragraphs, and other tweaks for good reading comprehension. We also downstyle titles and subheads (use sentence-style capitalization), again to aid comprehension.

4:19 am on Jan 24, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


In what regards would you prefer Schoolbook?

Just in terms of reading speed - not the only criteria to consider, I grant you.

I have one client who demanded a serif font for their site - I used "Georgia, Century Schoolbook, Palatino, serif;" The conversion stats for the site are well within the acceptable range.

However, I used a hearty font size in general (note the peak at 12 points), and for the fine print and headers, I still went with a sans serif family.

11:15 am on Jan 24, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 5, 2003
posts:636
votes: 0


Awesome posts in this thread.

I actually added verdana as my first choice for a font and the second I uploaded my new stylesheet and refreshed the current page my eyes felt a tad bit of relief. It's amazing the difference between verdana and arial.

I should have done it a long time ago. Thanks folks.