Web typography describes the layout of a web page, specifically with type. When using type, it is important to determine contrast. Contrast is determined by size, weight, position, shape, and color. With size, the larger the text, the more space is taken, and the more it stands out. Consequently, one should use large text only to grab one’s attention. Weight deals with the font styles of bold, italic, or extra bold. One should only use weight for type to emphasize something. Position is the placement of text (and graphics) on the page. The standard is a horizontal position, but a slanted position could be used if appropriate for the application. Shape concerns extremely large typefaces and certain graphics that should “fit in” among the normal text. Finally, color is important for a web page. The colors of the background, text, and graphics should not conflict with each other or make it difficult to read the text/view the graphics.

The opposite of contrast is harmony, which deals with the unity of all parts in the design. There should be harmony of shape, tone, color, and treatment. Shape is achieved by ensuring that type and illustrations conform. Tone is achieved when the weights of the typefaces and illustrations are equal. Color concerns the relationship of one color to another. Treatment is the relationship of typeface design to the product or idea being sold to the viewer.

A good web page should have variety to give liveliness to the layout. A web page also needs action—the principle that governs the movements of the eye from one part of a design to another. The reader should be visually guided to elements of the page according to their degrees of importance. Finally, a web page should have balance. Whether the balance is symmetrical or asymmetrical, it is important to have it so that the page does not look unappealing.

As with any project, it is important to do some planning when designing a web page. When planning a web page, one should have vision (to be able to detect an idea and play around with it), imagination (be able to use an idea effectively), and judgement (be able to assess the idea’s value and correct use and place). One should perform two steps of planning. The first step is pre-layout planning, which involves asking yourself many questions, such as: What is the objective?; Who is the target group?; What is the layout format?; etc. The second step is the layout procedure, which may involve drawing thumbnail sketches, creating a rough layout, and then a comprehensive layout, all before writing HTML code.

Of my three layouts, I feel Layout #1 conveys the information best. Everything is centered, which is more pleasing to the eye. The background color is a nice green, which is in harmony with the blue in the graphics and the links. There is a nicely formatted table to display the general information, with its own separate color to make it stand out. Each section of the page is separated by horizontal lines. The UWF graphic is rather large, but it is to emphasize the school I attend, and one can also click on it to go to the UWF homepage. I thought it was creative to use the graphics as part of the opening sentence.

With Layout #2, while the headers are centered, the main information is not, and one has to divert their eyes to the left. The background is a standard, but boring white. Also, the UWF graphic is about the same size as the Spring 2000 graphic, which does not give it emphasis.

With Layout #3, the information is not very organized. There are no lines to separate related sections, the links to websites are sloppily placed, and the link to send email should not really be at the top. If someone is interested enough to email the person, they will view the entire web page first, and therefore should be at the bottom. Also, some people find it hard to read against a red background.