Welcome to the Web - Rocketface(R) Workshop Webmaster's Tutorial - "How to Design a Website" Rocketface(R) Home - Welcome to the Web
Webmaster's Tutorial -------------- Webmaster's Tutorial Index -------------- Article Archive -------------- Sitemap -------------- Privacy -------------- About

Webmaster's Tutorial
About Domain Names
About Web Hosts

Analyze Website
Analyze Audience
Target Audience
Demographics
Website Goals

Organize Website
Website Basic Layout
Website Structure
Website Sections
Website Content
Website Navigation

Develop Website
Website Construction
Sitemap Construction
Webpage Construction

Implement Website
FTP Website
Fine Tune Website
Upload Organization
User Interaction

Maintain Website
Maintenance Plan
Website Optimization
Optimize Website
Website Promotion
Website Traffic Analysis

Resources
Main Site Index
Article Archive


Typography and Website Design - Style
Uppercase, bold, italic, underlined, subscript and superscript text as well as font color and size.

Typography on the Web

Style

Once you have decided on the "appearance" of web page text; what about the "style" of the text? Style refers to -uppercase, bold, italic, underlined, subscript and superscript text as well as font color and size.

Avoid uppercase text

A good rule of thumb is to avoid using uppercase text as much as possible; it's difficult to read when you are skimming a page. (Plus, on the Internet, capital letters symbolize "SHOUTING"!) Save the bold, italics and underlining for very important text and use it in small doses.

Sans-serif fonts are best

It is best to use a sans-serif font for all of your website text styles. This not only provides easy reading for your website visitor but also gives an appearance of uniformity and professionalism to the site.

Font Color vs Background

The color of font you use for the bulk of your pages should be one that contrasts sharply with the background for easy readability. If the background is too colorful or dark, use a graphics program to lighten it.

Contrast text with the background

The example given below shows the need to contrast your text with it's background. In order for your web text to be easily readable you must consider the web page background vs the text color. Do they contrast effectively? Are your visitors going to be able to read your content without trouble?

Example of web page background graphics vs text color and readability.

Shown is an example of web page background graphics vs text color and readability.

Font Size

Font size is a matter of preference and is often determined by the type of web site you have. However, it's usually pretty easy to spot a web site by someone new to the Internet ... the font size is very large and is the same for everything. This is because most of us are conditioned to use a size 12pt font for creating printed correspondence and we transfer that habit to a web site. To compare, A 10pt font is used for these pages with a larger 12pt for headers.

Here is what a 12pt font looks like on the web. You can imagine how fast this would fill up a web page. Plus, text this large is unnecessary on the web, except as headers.

Text size and color

Rather than using bold, italics or underlining, a slightly larger or different colored font can call attention to important information. And smaller text, as in the links at the bottom of this page, let the reader know this is something different from the rest of the web page.

Avoid harsh font colors

Don't get carried away with a lot of different text colors; too many and a web site can take on a circus-like appearance. Also, this type of color use is unprofessional.

Simple is always the best bet

The colors red and yellow will draw the eye's attention, but they also tire the eyes. So use these colors sparingly - just to emphasize something you really want your visitors to see. Simple is always the best bet.

A lot of text in either red or yellow, and your visitors will move on not even realizing it's because the color has tired their eyes. Keep your visitors happy and you will be happy you did.



Back Next


Copyright© 1999 - 2011
Rocketface® Graphics
Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index