Say What?....

     The use of paragraphs and columns to structure your pages was addressed in the previous article. Now it is time to discuss the text that you will fill those columns and paragraphs with. Like every element of the design process, effective use of text can either direct your readers attention or divert it. This section discusses some simple typography concepts that can enhance your pages.

TYPE CONSISTENCY

     A significant part of your efforts in establishing a consistent layout will focus on how you implement text in your page design. You will want to establish "norms" for your pages in terms of the headers, titles, pull quotes (discussed later in this article), and other typographic elements. By using the same font size and color for page elements that do not vary throughout the site, you create an environment that is familiar to the eye. Titles and headers should be short and to the point. They should be about one font size larger than the main body of text. A page title may be slightly larger as long as it does not overwhelm the rest of the page (extremely large text on a web page is often thought of as you, the author, "shouting" your message to the visitor). You may choose to vary font colors between your different page elements. This can add a nice effect to the appearance and readability of your pages but it is important to use complimentary colors (discussed further in the next article). Your choice of font colors and types should have some connection to the theme or message you are trying to convey if possible. If not, ensure they do not contrast or compete with the background or graphic colors you have chosen. You'll notice a number of typographic problems pointed out in the examples to the right. While it is acceptable to vary font size and color within a page, it is important to minimize the variety of font types in use. Too many fonts in the same page will give your work the appearance of a ransom note rather than a web site. Standard fonts like Times New Roman or just about any of the Courier or Arial groups will offer the greatest compatibility to your users. A good rule of thumb (unless you are developing graphic text, discussed later in this article) is "if the font is not naturally available to you as a result of installing your operating system... use something else". You may choose to download an "exotic" font from the net and use it in your page design. Unfortunately, your text will not appear to everyone else as it does to you (unless they too have downloaded that font). Asking a visitor to download a unique font prior to visiting your site is akin to asking a dinner guest to bring their own plate and utensils. It needlessly places an additional viewing requirement on the visitor that they are likely to ignore (along with your site).

SPACE IS YOUR FRIEND

     The use of space is an often overlooked method of balancing your page content and drawing the readers attention to items of importance. The novice page designer will endeavor to fill every square inch of screen space with text and graphics, often separating content by repeatedly using bars or rules. You do not need to fill the screen. An absence of content is sometimes the best way to draw attention to what "is" there. Space should be an integral part of your design by establishing margins, paragraph breaks, indents, and other "blank areas" that help the reader focus on your content in manageable sections. Use space to make titles stand out or to separate large sections (or columns) of text into smaller paragraphs that can easily be "absorbed" without overwhelming the reader with a continuous wall of text. Notice in the following examples, how space surrounding the text adds emphasis to the main point of the content on the block on the bottom (the location and phone number of a business).

Welcome to Bob's used car outlet. We specialize in large, small, medium, domestic, foreign, and broken cars. Call us day or night and we will negotiate a trade for your old "clunker". Come visit us at 1141 Sharp Stick Dr., Apt 12, Snake oil, Oklahoma. 922-898-0010. We are particularly fond of repossessed and fire damaged vehicles. Don't forget to bring the kids for free hot-dogs and balloons!

Welcome to Bob's used car outlet. We specialize in large, small, medium, domestic, foreign, and broken cars. Call us day or night and we will negotiate a trade for your old "clunker". Come visit us at 1141 Junk Yard Dr., Door #3, Paradise, Michigan.              922-898-0010 We are particularly fond of repossessed and fire damaged vehicles. Don't forget to bring the kids for free hot-dogs and balloons!

     You can add space to your page in any of a number of ways. You can use tabs, paragraph indents, non-breaking spaces (expressed as &NBSP in HTML), tables with various alignments or empty cells, graphic "spacers", or a combination of these or other methods. The first thing most beginners do when they realize a need to partition the page is to insert horizontal rules or bars to break up sections of content. While this can be effective if used sparingly, it is more often than not, just another abused design element. Too many rules or bars across your page will give the reader a feeling of reading your page through the rungs of a ladder. White space is a much cleaner and practical alternative. In the second part of this typography article, we'll take a look at some creative tips you can employ in your pages as well as some typographic "no-no's" in web design.

[Page 2] [Next Article]