Making reading on-screen as clear as reading something in print - how?

[satishtalim]

What can be done to make the experience of reading on the screen better? I know that there are many research papers on the net on this topic but for a layman it's quite confusing.

My site teaches the reader, Ruby programming and very likely he/she would be spending a lot more time reading on the site. The site uses fluid layout.

If the user uses Firefox or IE with screen resolutions of say 800x600 or 1024x768 or 1152x864, then my questions wrt body text are:

a. which typefaces to use
b. the size of the typefaces
c. what should be the line-height?
d. background and foreground colors

Please note:
a. I am using the following size and typefaces -

font: 81%/1.5em  'Trebuchet MS', Geogia, Arial, sans-serif;

In case, a user does not have these on his/her computer what would these default to?

b. I am not justifying text

c. Do I define type size by %, em, px ?


Sorry for the loaded question!

[Dan Schulz]

It's not a loaded question, but surprisingly, the best answer is to offer the text in short, managable bits and pieces.

By the way, this would be best placed in the "Usability and Accessibility" board. Would you like me to ask about having this moved there on your behalf?

[satishtalim]

It's not a loaded question, but surprisingly, the best answer is to offer the text in short, managable bits and pieces.

By the way, this would be best placed in the "Usability and Accessibility" board. Would you like me to ask about having this moved there on your behalf?

Thanks Dan. Yes, please move this there.

[Dan Schulz]

Well, I can't move it myself, but I can ask.

[Tailslide]

Fonts - At the risk of being shot down in flames I believe that sans-serif fonts (Arial, Verdana, Trebuchet, Tahoma etc) are easier to read on screen while in print format serif fonts (Georgia, Times New Roman etc) are felt to be easier to read.

You've got a mix of serif and sans-serif fonts in your font rule - I'd personally stick to sans-serif and probably Verdana with Arial and Helvetica (for macs) as a backup.

I find Verdana easier to read than the others because it's quite a wide font for it's height - very rounded. I'll admit that that's purely a personal preference though!

There's no way of being sure what a user has specified as default on their computer. It's very likely to be Times New Roman on a PC however.

Alignment - keep text left aligned (if text is to be read left to right obviously!) and don't centre text.
Justification - don't justify text for the screen as it can create "rivers of white space" on the page at different text sizing.
Colours - keep a fairly high contrast of background to foreground colours while avoiding too much of a contrast (black text on white backgrounds or white on black backgrounds can be hard to read for some).

[satishtalim]

Colours - keep a fairly high contrast of background to foreground colours while avoiding too much of a contrast (black text on white backgrounds or white on black backgrounds can be hard to read for some).

If black on white is hard to read for some; then what combination of foreground on background would you suggest?

[AutisticCuckoo]

If the user uses Firefox or IE with screen resolutions of say 800x600 or 1024x768 or 1152x864

Why exclude users with Opera, Safari, Netscape, Konqueror, OmniWeb, ... ?
And screen resolution is irrelevant. A user can have a 1024×768 screen while his browser window is only 400×300.

a. which typefaces to use

The jury is still out on that. Different surveys give different result. An alleged truism is that sanserif fonts are easier to read on-screen, but at least one major survey debunked that.

In my opinion, the most important aspect is to use a typeface that is designed for on-screen use.

b. the size of the typefaces

Strictly speaking, that would be 100%. In other words, let the user decide and respect his or her choice.

Reality is often different, though. A font like Verdana can look horrible at 100% in a browser with a 16px default size.

Users' needs will vary a lot. Someone with a large, low-resolution monitor and good eye-sight may be able to read 9px text, whereas someone else with a small, high-resolution monitor may not.

c. what should be the line-height?

That depends on the measure (line width). The wider the column, the more leading (greater line height) you will need, to guide the eye from the end of one line to the beginning of the next. I think 1.4-1.5 is a good choice in many cases.

d. background and foreground colors

Again, different users will have different needs. A person with poor eye-sight may need high contrast (black on white), while some groups of dyslexics find that jarring and need lower contrast (e.g., blue on pastel yellow).

a. I am using the following size and typefaces -

font: 81%/1.5em  'Trebuchet MS', Geogia, Arial, sans-serif;

In case, a user does not have these on his/her computer what would these default to?

A person (such as myself) who does not have Trebuchet MS, Georgia or Arial will get whatever font is specified as the default sanserif font in his/her browser. In my case that will be Nimbus Sans L.

c. Do I define type size by %, em, px ?

I wouldn't recommend px, since that will prevent most IE users from resizing the text. Whether you choose % or em is a matter of taste, mainly. You should specify the base font size (e.g., for the html element) in %, though, to circumvent a nasty IE bug for sub-1em fonts.