Upon first inspection of this topic it is easy to underestimate the complexity inherent in the symbols we all take for granted, viz fonts and typography. However in order to use type creatively, as opposed to merely typing words, you have to know the background to the huge variety of fonts (more than 10,000) which can be employed in both DTP and HTML projects. Understanding the history of typography (see below) will also help you to utilise font families with precision and aplomb.

There is no real difference between DTP and work online, except that on the Web you cannot predict exactly how your user will view the fonts on your Website. The users' browser version, and how they have set it up determines the look and feel of your text. You cannot make a Web user see your wonderful fontographic designs which you have spent hours creating. You can only hope that the fonts you have chosen are not too unusual and thus can be displayed on your users' screens (which of course vary in size, resolution and quality). Defaults such as Times New Roman, and variants such as Arial will usually always be found on users' computers, but what about Caslon, Garamond or Verdana - commonly found in desktop published documents?

This pretty severe limitation on the Web accounts for the overuse of such fonts as Arial and Times New Roman and explains why so much of current Web content looks so similar.

Readability (from Robin Williams' The Non-Designer's Type Book)

Readability refers to whether an extended amount of text e.g. a whole article, is easy or not to read. This does not include headings. What makes a typeface readable depends upon many things. The easiest way to describe readability is paradoxically the concept of invisibility. Readable typefaces are basically transparent. They do not call attention to themselves. Avoid distinctiveness because that will draw attention to the letter or word. Too thick or thin, too bold or skinny, too complex or even plain type will detract from your message.

The most readable fonts were those created from late 15th to early 17th century. These were intended for long documents and display moderation in terms of their seriphs, their thick or thin lines and their x-height. In fact you can hardly distinguish between fonts such as Garamond or Minion Light because they are just so readable.

Serif (eg Times) or sans-serif (eg Arial) is a debate which has been settled by research which says that in our society today it is easier to read a serifed font than a non-serifed one. Perhaps it is the little filips on the letters which lead our eyes to recognise whole words faster, perhaps the subtle x-height factor. You can of course use a sans-serif  font for body text, but remember to use a slightly smaller font size and to use a shorter the line length than you would normally.

Caps or lowercase is not really a choice since a mixture of lowercase and uppercase is the easiest to read.

Letter spacing and word spacing is solved by not justifying the right hand edge of a body of text. Quite often justified text will require the addition of extra spaces between letters and words. This slows us down.

Line length needs to be not too long otherwise we cannot find our way back to the start of the new line; and not too short that everyday phrases are broken up all the time.

Linespacing (or leading) will need to be increased if the line length is longer than usual; or if the typeface has a large x-height; and if you are reversing type on a solid background.

Moderation is the key to maximising readability.

Legibility (from Robin Williams' The Non-Designer's Type Book)

Lgibility is about scanning headings, signs, hurried perusal of material in short bursts. We do not read letter by letter, but by whole words and phrases. English-speaking people take in lots of information which then goes straight to our brains for processing. It is thus more efficient to design information for the greatest amount of legibility as well as readabilty. A newsletter headings should jump out of the page and into the casual reader's mind. Warning signs should not have to be decoded for their meanings - they should be obvious from the first time they are sighted.

A large x-height will decrease a word's legibility. Extra heavy type decreases legibility.

A monospaced font such as Courier is also hard to decipher.

Again a mixture of lowercase and uppercase leads to increased legibility. ALL CAPS ARE THE LEAST LEGIBLE SINCE THEY MAKE YOU STOP AND COMPREHEND EACH LETTER YOU SEE.

The most legible type is:

1. a sans serif font with an average x-height;
2. regular to medium weight (sometimes bold);
3. lowercase and appropriate caps;
4. not condensed, expanded or oblique;
5. contains a little extra letter spacing (kerning) in small points (below 10) and a little less kerning in larger point sizes (above 14).

Exercises:

1. On your own Bulletin Board Space  please analyse the UWS website or any other well-known Website for Readability and Legibility.  You may like to focus on the School of Commmunication, Design and Media's pages. 

2. Evaluate the UWS, CDM or other site from a design perspective. e.g. Contrast, Repetition, Alignment, Proximity.

3. Lastly use Ethos, Pathos and Logos to finalise the evaluation.

Some Rules of Good DTP (from Robin Williams' The Non-Designer's Type Book)

(Exercise questions are interspersed here:)

1. The document should not use Helvetica. Helvetica was popular way back in the 60's and 70s'. It is a hippie font. But is it not groovy (baby) now..
2. The document should display curly quote marks, not "straight ones". (What are the problems with this on the Web?)
3. Good desktopped documents do not use double returns (like most people use). (How do you get around this?)
4. They do not use two spaces after punctuation such as full stops and question marks. (Why were 2 spaces used in the first instance?)
5. Never use grey boxes behind black text.
6. Never use a fully centred layout. (Why?)
7. Never use lots of borders.
8. Never use indents for paragraphs. (Why not?)
9. Do not use hyphens for bullets.
10. Do not use shadowed text.
11. Do not use 12 point text and auto leading (this is usually the default on most programs).
12. Never use underline on anything. (Why not?).
13. NEVER USE ALL CAPS!!

Links to articles about Typography and Fonts

If you are new to using DTP programs (including MS Word) then you need to read the Basics Rules for creating better looking documents.

Dimitri Kirsanov has a unique article which explains the history and development of typography and modern font usage for DTP purposes and also for the Web. An excellent overview.

Click here for some of the History and Issues surrounding Typography.

An article, High-tech Type Tips gives Web typography tips including specifying fonts, mouseovers,and optimizing HTML and GIF type. (from c|net Builder.com).

Another article, Balanced Page Type Tips shows you how you can use alignment, asymmetry, grouping of text blocks, and more to balance your Web pages. (from c|net Builder.com).

Full index of all the excellent links from About.com.

A Brief History of Type by Thomas Phinney.