Our web sites are nothing without content, and most content is comprised of simple text. Many web designers neglect to pay attention to their typography, and it shows. Proper typography varies based on where the text is and what purpose it serves. Although there are no rules etched in stone, there are a few general techniques that should be followed. Although some of these tips may seem elementary, many of them are not followed.


Clearly, headings should be larger, by 1 or 2 font sizes, than your body text. You may consider bold, but be cognizant of the letter width. Arial Black, for example, may create letters too fat for your taste. When using colors, be sure the colors contrast well with the background color of your site. Black and dark gray do not contrast well, while black and white (or light gray) work quite well. Sometimes, even a simple color change can create useful headings.

Also be sure to cascade your headings. A main heading, for example, would be larger than subheadings. This effect creates a sense of emphasis and flow to the information.

Do not italicize your headings. Italics are meant to underscore particular content, but since the text is a heading and of larger size anyway, italics are redundant and often make the text difficult to read.


The default is Times New Roman, which works fine, but many think it is boring. I have experimented with Arial, Georgia and Verdana, and have found Verdana the most readable font face available. This is a personal preference, but fonts should be restricted to the above four to ensure compatibility between all users of your web site. If your user's browser does not support your font choice, their browser will revert to its default. Since browsers have increased support for CSS, or Cascading Style Sheets, whenever possible, use CSS to define your fonts, rather than HTML's <font> tag. Also, be sure to keep your font sizes large enough for visitors of all ages and eyesight's.

Stress Styles.

Avoid using all capital letters within your text, as it makes it difficult to read and implies you are shouting at the reader.

To stress words within your body text, decide on a format and stick with it. Some choose bold, while others choose italics or underline. My personal favorite is italics, but any of these can work well. Be careful when using underline, however, as it can be mistaken for a link. In addition, do not overuse these stress styles.

Entire body text should not be bold. Bold, like italics, is used to emphasis words, and usually an entire body of copy should speak for itself in regularly styled text. I like to use CSS to space my body text out a little to increase readability.

Article written by Lee.