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; Code (markup): 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!
For ease of reading in a web page, there are several 'rules of thumb', based on many studies, some of which you've probably read. Most readability studies are really about the printed page, so some alterations for the web are necessary. Use a sans-serif font family. In print, a high resolution (600+ dpi) medium, the serifs aid the eye in scanning from one letter to the next. It helps us to see words as a whole. The computer screen is a very low resolution (72–100 pseudo pixels per inch) medium, causing those same serifs to add a fuzzing effect, which tires the eyes. Larger font sizes, as for headers, don't suffer from serifs, so serif fonts are OK for them. For code examples, use a mono-spaced font such as Courier. It's a serif, but the fixed spacing will negate the serif problem. Line width should not exceed 65 characters. Somewhat narrower is preferable. Notice how newspaper columns are fairly narrow, ≈30 characters wide. They are that way to increase reading speed while aiding retention. That's not really reasonable for the web, as the window height is not sufficient to allow much text before having to scroll. Any wider than 65 characters causes retrace tracking problems. The line is just too wide, and the eye loses its place when returning to the front of the next line. For proportional fonts, the average character width is ½ em. Font size should be left to the visitor's preference. Period. So, practical recommendations? Normal text, readability of fonts is in this order: verdana, tahoma, arial, 'trebuchet ms'. That is based on the aspect numbers of each. Tahoma is a bit too close spaced and could use a bit of letter spacing, say 1px. Go with body { font: 100% verdana, tahoma, arial, sans-serif; } p { font-size: 1em; } Code (markup): Make your text column 30em, or 480px width. That should be very easy on your visitors' eyes. cheers, gary