Using Effective Typography Techniques for Creating Outstanding Electronic Documents

A Quote from Beatrice A. Warde, Expert on Typography

"Type well-used is invisible as type. The mental eye focuses through type and not upon it, so that any type which has excess in design, anything that gets in the way of the mental picture to be conveyed, is bad type." Beatrice Warde (1900-1969)

Beatrice Ward was a commentator and authority on typography. One of the works she wrote,"This is a Printing Office", was produced as a broadside, which is essentially a large poster, printed on one side. This broadside has been cast in bronze and is mounted at the entrance of the U.S. Government Printing Office in Washington, D.C. A statement to her expertise and research on the effective of various typographic practices.

The quote is very relevant today in this era of electronic publication. With all of the available options for font, size, color, formatting, and multimedia it is easy for content to get lost in technique.

This article and perhaps several others which follow will look at some of the terminology of typography as well as some guidelines and examples of techniques which make the "type invisible" and the content stand out.

Some of the Terminology Used in Document Design

Some of these terms might be "old hat" while others might be quite new. As this document will be one of several in discussing effective document design they are presented here alphabetically. More words to the vocabulary as we work through typography and page design.

Flush-left ragged right is the way that this document is presented. The margin on the left is uniform. The right margin is irregular.

Grid is the cross-ruled guidelines over which a page are assembled.

Gutter margin is an internal margin generally between columns of text.

Hanging indentation is a "reverse" of a normal paragraph. in this case all lines but the first are indented.

Justification is the term used for setting text to the same exact width. Justification is achieved by irregular word spacing. Justification can be contrasted with the flush-left ragged right method of document layout.

Kearning is a term for differing letter spacing in a word to create a more visual pleasing effect.

Leading like the word font are holdover terms from when text was metal. In those days of printing, lead slugs were used to separate lines. Leading is synonymous with the term line spacing. When no additional line spacing is used the document is said to be set solid.

Margins surround the live area of a page: on the top, bottom, left, and right sizes.

Serif and san serif text fonts. The difference is really in the ornamentation which sidstingushes serf from san serif fonts. (See the illustration below.)

Typographic color refers to the lightness or darkness of a page element. Bad color discourages reader from reading. For example, who wants to read a page whose text is all yellow or pink?

White space is the empty area the "real estate of a document page which is subtracted from by imagery and text..

Word spacing is the space between words in a document. Consistent word spacing is important. Inconsistent or excessive word spacing slows the reader down and distracts from


Making Text Appealing

There are a number of ways to make text appealing which we will discuss at some length in future articles:

  • effective use of line spacing. How to balance overcrowding with overly sparse.
  • position of text in relationship to images on a page:
  • using contrasting font types
  • varying font size and font weight
  • effective column width and length
  • creating distinctive page layout
  • relating page shape to page content

Effective and Consistent Page Typography for the World Wide Web

Much of the information today is published exclusively for the web. The pitfalls which occur in using too much technology. Content should not take second place of "dazzle" design. The goal of good design is good communication.

Contrasting Serif and Non-Serif Font Type

In this illustration of helkvetica font. The black letters would be the san serif representation while the black letter with the small red line stoke added.
In this illustration of helkvetica font. The black letters would be the san serif representation while the black letter with the small red line stoke added.

Sources of Good Design Information

I have found several sources which I use in coming up with a clever design for an article.. They are worth investigating if not having them on your personal bookshelf.

Beavington, William, Craig, James, Scala Irene Korol. (2006) "Designing with Type the Essential Guide to Typography 5th Edition". New York: Watson Guptill ISBN-13: 978-0823014132

White, Alex (1992) "Type in Use: Effective Typography for Electronic Publishing. New York. 1992. ISBN 0-8306-3796-6.

Your Favorite Font

What is your favorite font?

  • Helvetica
  • Arial
  • Tahoma
  • Times New Roman
  • Some other forn.
See results without voting

What's Next?

This article has been one of pre exploration. The subject of what is effective typography has been raised., some terminology was discussed, and several sources for further information were given in the reference. Our next article will start looking at specific element of page design and what makes them work.

An Example of "Kerning" Text

It is interesting but merely coincidental that Peter Kern's  advertisement seems to have an element of kerning to it.
It is interesting but merely coincidental that Peter Kern's advertisement seems to have an element of kerning to it.
This bronze plaque with the broadside "This is a Printing Office" penned by Beatrice Ward can be found at the enterance of the U.S. Government Printing Office in Washington, D.C.
This bronze plaque with the broadside "This is a Printing Office" penned by Beatrice Ward can be found at the enterance of the U.S. Government Printing Office in Washington, D.C.

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working