With printed material, there is an endless selection of text styles and fonts you can choose from. With the internet, there are only about a half dozen that render with any clarity. Why?

First of all, the internet depends upon which fonts you have loaded on your computer. If a web page has a font that you don't have on your computer, the browser knows to use the default font which is a Times Roman style serif font.

Second of all, the resolution of a monitor screen is less than one-tenth the resolution of an average brochure. PCs have a screen resolution equal to 86 dots per inch. MacIntosh is even lower at 72. An average newspaper is 300 dots per inch for comparison. This is why italics don't work very well on a web page in the smaller fonts, especially the serif ones.

So what do you pick so users can read every page without guessing what they're reading?

There is also great pressure to load more text into the finite area of a web page. This means that standard page font sizing is going smaller not larger. So it becomes more important to choose a font that you can still read at 8 pt versus one that you can't read very well at 8 pt (which is the smallest you can read, which may be debatable).

Yes there has been research done and it looks like the Verdana font style is the winner for being one of the most easily read fonts on a monitor, even down to 8 pt. But what if you don't have Verdana on your computer? Then Arial is the next bet for a sans serif, easy to read font. But what if you don't have Arial on your Non-Microsoft MacIntosh (Arial is a Microsoft font)? Then, Helvetica is a sure bet. We could go on naming several fonts for every page but these three will cover over 96% of all users: Verdana, Arial, Helvetica.

Page headings, like the one at the top of this page ("Text, Fonts, Headings, etc."), are 12 pt bold. However, we can go bigger to 14 pt for these headings if we so choose. Notice how much smoother the font renders at 14 pt than 12 pt. This is true of most fonts on a web screen.

It is at 14 pt that the resolution is adequate that Italics can be used and easily read. Below 14 pt, it is best to use BOLD where you would otherwise use italics.

Also, there is a curious thing that browsers do if a paragraph is missing its closing tag: it takes the last sentence in that paragraph and drops it down about half a space and it looks wierd.

The solution is to make sure your paragraphs all have a closing tag on them (FrontPage doesn't always automatically put a closing tag on every paragraph for some reason).

Also, when copying text from another format like Microsoft Word, it is best to "launder" it with NOTEPAD, an accessory on every PC running Windows. Why? Because you want to strip off all unnecessary formatting that may transfer with the text and make it very difficult to format and size on a web page. FrontPage does have a command to remove all formatting under the FORMAT menu at the top, but it doesn't work.

And finally, you want to break up larger paragraphs into smaller ones so that they can be more easily digested in a 450 pixel wide format.

 

W H I T T I E R   C O L L E G E
13406 East Philadelphia » P.O. Box 634 » Whittier, CA 90608-4413
Main: (562) 907-4200 » Fax: (562) 698-4067
W e b   T e m p l a t e   M a n u a l