Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: phranque
For instance, given a good article of general interest with otherwise ideal layout (on paper),
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:
* 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]
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 :)
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.
joined:Nov 11, 2000
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.
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.
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!
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.
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.
"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."
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.
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.
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.
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.
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.