Fonts

Choosing the font for your website is another important decision. The font style and size needs to be easy to read. It is amazing how many website designers put a huge amount of resources into the design of a site, only to use a small font size that makes the page virtually impossible to read. The font style is a personal choice, but remember, you are not selecting a font that YOU want to read, you are selecting a font that you want your visitors to read.

General Font Styles

There are three general font styles: Serif, Sans-Serif, and Monospace.

Serif

Serif fonts have small lines at the ends on some characters. Examples: Times New Roman, Georgia

Sans-Serif

"Sans" means without - these fonts do not have the lines at the ends of characters. Examples: Arial, Verdana

Monospace

All monospace characters have the same width. Examples: Courier New, Lucida Console

There are mixed opinions on which font style is better to use for a website. One of my trusted reference resources suggests "On computer screens, sans-serif fonts are considered easier to read than serif fonts". I

Fonts That Should Work In All Browsers

There is an almost endless variety of fonts available for computers today. However, not all browsers can display all fonts. Specifically, the font used on the web page must already be installed on your visitor's computer.

The following is a list of fonts that should appear in all browsers, because they are the most common fonts and should already be installed on your visitor's computer. It is possible that some of these fonts do not appear as expected in your browser.

Serif fonts

Georgia: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Palatino Linotype: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Book Antiqua: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Palatino: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Times New Roman: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Times: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Serif: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-Serif Fonts

Arial: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Arial Black: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Gadget: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Comic Sans MS: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Cursive: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Impact: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Charcoal: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Sans Unicode: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Grande: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Tahoma: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Geneva: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Trebuchet MS: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Verdana: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

sans-serif: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monospace Fonts

Courier New: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Courier: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Console: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monaco: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

monospace: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Font Families

Since all fonts are not available in all browsers, there is a fall-back method for the best compatibility options of browsers and operating systems. ` By applying a "family" of fonts starting with the preferred font and progressing to the generic font. This allows the browser to pick a similar font if the preferred font is not available.

Commonly Used Font-Family Combinations

• Verdana, Geneva, sans-serif
• Georgia, Times New Roman, Times, serif
• Courier New, Courier, monospace
• Arial, Helvetica, sans-serif
• Tahoma, Geneva, sans-serif
• Trebuchet MS, Arial, Helvetica, sans-serif
• Arial Black, Gadget, sans-serif
• Times New Roman, Times, serif
• Palatino Linotype, Book Antiqua, Palatino, serif
• Lucida Sans Unicode, Lucida Grande, sans-serif
• MS Serif, New York, serif
• Lucida Console, Monaco, monospace
• Comic Sans MS, cursive

Custom Fonts

A more recent enhancement to web design is the ability to use ANY font you like. It is very easy to set up, and you can use more than one font. This enhancement works in most of today's browsers. However, older browsers will not support this feature. In particular, I have only seen this feature working in Internet Explorer 9. It does not seem to work in version 8 or lower.

The bottom line is, you should only use a custom font if you accept that it may not appear as expected for all of your site's visitors.

Let's test your browser. If you see this section appearing in the same font as the paragraph above, then your browser does NOT support the custom font feature.

Here is the list of the current version of the five main browsers, and all of these will support custom fonts.

• Internet Explorer 9
• Firefox 6
• Chrome 13
• Opera 11
• Safari 5