Type: HTML
Key Concepts

Overview We can play with the text on a web page by changing its size, typeface, font, and/or color.

However, before you do too much experimenting with type, become familiar with some of the basic concepts of typography.

A font is a style or shape of type.

A typeface is a family of fonts. For example, the text you are reading now uses the Times Roman typeface. Times Roman also comes in a bold font and an italic font.

Each typeface has many different characteristics ranging from the height and width of each character to the thickness or thinness of the strokes that make up each character.

Typeface does fall into two major classifications: serif and sans serif.

A serif is a stroke that appears or projects from the ends of the main strokes that make up a letter.  Times Roman, the typeface I am using in this sentence, is a serif typeface.

A sans serif (from the Latin sans, meaning without) typeface lacks these projecting strokes.  Arial, the typeface I am using in this sentence, is a sans serif typeface.

Each typeface has its own character and projects its own image.

Comic sans Gothic has a playfulness that reminds the reader of the kind of hand lettering that might appear in a comic strip.

Courier New looks like it was created by a typewriter.

Script MT Bold looks like very ornate handwriting

So choose your typeface carefully. 

However, note that the browser being used by your visitor must be able to support your chosen typeface. In other words, if the visitor's browser cannot display your typeface, the browser will revert to its default typeface and your carefully chosen effects will disappear.

The only way to permanently insure the look of your chosen typeface is to create a graphic file using that typeface.  In general, use such a graphic file only with a headline.

The art of typography is a separate study unto itself.  But there are a few basic rules that web developers should follow when they choose typefaces.
  • Limit the number of typefaces on your site to two.
  • Most American readers will be more comfortable with serif typefaces (like Times Roman) in their body copy and sans serif typefaces (like Ariel or Helvetica) in their headlines
  • Don't use all capital letters for any phrase longer than a short title.
  • Never use all capital letters with a script font.
Employ contrast between your typeface and the background of your page.
  • Black text on a white background provides the highest and therefore the strongest contrast.  However, black text on a slightly less contrasted background seems to work best on a monitor screen.  Try black on light yellow (#ffffcc) or light gray (#cccccc).
  • White text on a black background, while legible, causes eyestrain.  Use it sparingly.
  • When you choose text and background color combinations, keep your visitors' needs in mind.  Visitors may want to print your pages.   Pages with highly textured or dark backgrounds  are not only hard to read but often difficult to print.
Employ white space.
  • Break long stretches of running text into columns; but don't make a visitor scroll up and down your screen.
  • Break up your text with occasional graphics; even a horizontal line or a splash of colored text will often suffice.

Type: HTML
Key Concepts
Change Text Font
Change Text Size
Change Text Color

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: January 24, 2008
© Agatha Taormina