Selection of the right font for your website is a process you should not overlook.

The right font can set the style for your site but it also means that your readers can actually read your pages and menus without straining.

You may not think that a slight difference in font shape can make the difference but High End websites and Print Publications like Newspapers and Magazines have strict rules about which fonts are used in their publications.  Additionally text books go through stringent review and readability is a primary concern.

Some companies even go as far as producing their own fonts but many will purchase commercial font packs that can cost over $1,000 for a single family of fonts.

When designing your site you should take notice of:

• Readability
• Availability of the font on the viewers computer.
• Does the font scale well for headlines
• Does the font look good in other variants such as Italic and Bold

Font Availability

Every computer system is different and the availability of fonts across operating systems is not standardized. In this situation you should build your site for the primary number of visitors and use default fonts found on that operating system. No offense but unless you are supporting a website that talks about Apple or BSD products you should write with Window in mind.

This means you you can get away with using fonts like Arial and Verdana but as fall backs you should also include a sans or sans-serif attribute in your font selectors.

H1 {font-family:arial,helvetica,verdana,sans-serif}

This will provide a close match for your other visitors.

Rule of Three

In typography it is a common rule that any page should not use more then three different type families.

The best method is to use a single font family to unify your whole site and pages. Variations can be used for Preformatted text to show code or sidebar content, Headlines or Mastheads like your site logo.

Serif or Sans

The basic rule is that as fonts get smaller they are easier to read if they have serifs. Serifs are the small design features of a font that give detail to the edges of characters.

Although you may not notice the difference while reading a single page or block of text you may find that while reading lots of information your eyes may appreciate Serif Text over Sans Serif.

For instance

Logos and Images

Once you decide on a style of font you want to maintain that font choice throughout your site by applying it to any logos, special images. This means when adding items in the form of Images you should continue to use the same font.

Special logos can have a slightly different quality and this is appealing if typography is your main subject matter.

Tools

Tools like FireFox’s Firebug will allow you to alter the CSS styles of any page you are visiting.

You should use this tool to alter the fonts used on different websites so you can get an idea of how fonts are used and how they effect the design and function.

Visit a site and change the default font from a Serif to Sans Serif and see if you notice the difference.

Final Note

Remember all rules are made to be broken but following standards of not loading up on a lot of different fonts or picking simple fonts that everyone has will make your life easier as a designer.

For more information on Font Selection see our CSS and HTML Lessons