Eileen Dittmar's Web Interface Design for Educators

 

Page Quick Jump

Principles

Text

Font

Resources

Site Map

Updates

Instructional Systems Design Models to be added April 2006

As more working adults discover the educational opportunities available in an online learning environment, the demand for quality, innovative programs, and faculty will continue to rise.

~ Eileen Dittmar

Control allisay.wav Tom Hanks from Forrest Gump

Plug in help

Typography

 

Principles

The text you see when designing your Web site may not necessarily look the same when your users view your site on their computer. The font type, size, color, spacing, and resolution may vary. Various factors to consider when selecting typography include:

Below are a some basic typographical guidelines to create readable text for as many users as possible.

Keep the text size in a 12-14 range

Larger fonts may be used to attract attention, or for headlines, but keeping the body of the text in 12-14 size range will prevent people from having to change their font settings to view your page properly. Some operating systems reduce the font size more than others.

Do not use large amounts of text in bold, italic, or ALL CAPS.


Bold text can show emphasis, but not when used on the entire text passage which eliminates the emphasis and distracts the reader. IT IS DIFFICULT TO READ A TEXT IN ALL CAPITAL LETTERS FOR MORE THAN A FEW LINES. THIS IS DUE TO THE UNIFORM SHAPE AND SIZE OF THE TEXT WHEN USING ALL CAPS. Heavy use of italics also makes your text difficult to read, especially in smaller font sizes.

The use of too many different types of fonts makes your Web page look less professional and distracts from the content. Use one style change at a time to highlight a word or phrase -- for example bold, italics, and all caps at the same time (LIKE THIS).

Back to Top

 

Two fonts and limit color

Mixing and matching fonts can make text difficult to read -- keep the number of font styles and color to a minimum.

Be consistent with the fonts for text, headings, subheading, links, and other aspects of your site. Make sure there is enough color contrast and brightness contrast between the text and the background .

The best suggestion is two fonts per page, usually one used for headings and one for body text.  As these two fonts are not the same, they should be different enough, or ideally, contrasting. A good suggestion that is cross platform is a serif (e.g. Times) and a sans serif (e.g. Helvetica).

Back to Top

 

Typography Resources

builder.com

Web Page Design For Designers

All Good Things Typography

FontSite

IdentiFont

Back to Top

 

About Us | Site Map | Privacy Policy | ©2005 Eileen M. Dittmar PH.D. Learner Capella University edittmar@charter.net