This chapter is from the book
This chapter is from the book
This chapter is from the book
Fonts
There is usually some amount of text on a web page. Some pages have little text, and others have a huge amount of text. This text can either be actual text or graphics that appear as text. To begin, I will deal with text as text and then move on to text as images.
System Fonts
When using text on a website, you might be inclined to use some type of fancy font. Avoid this if at all possible. Several system fonts have been created to display well on web pages. If you use a special font and the person viewing your page does not have that font on her computer, your text reverts to a system font. Also, system fonts are different on Windows versus Apple computers. (Some things are never easy!)
The following are the default system fonts on Windows systems:
- Arial
- Book Antiqua
- Calisto MT
- Century Gothic
- Comic Sans MS
- Copperplate Gothic Bold
- Copperplate Gothic Light
- Courier
- Courier New
- Fixedsys
- Georgia
- Impact
- Lucida Console
- Lucida Handwriting Italic
- Lucida Sans Italic
- Lucida Sans Unicode
- Marlett
- Matisse ITC
- Modern
- MS Serif
- MS Sans Serif
- News Gothic MT
- OCR A Extended
- Small Fonts
- Symbol
- System
- Tempus Sans ITC
- Terminal
- Times New Roman
- Verdana
- Webdings
- Westminster
- Wingdings
The following are the default system fonts on Apple systems:
- AmericanTypewriter
- Andale Mono
- Apple Chancery
- Apple Symbols
- Arial
- Baskerville
- BigCaslon
- Brush Script
- Chalkboard
- Charcoal
- Cochin
- Comic Sans MS
- Copperplate
- Courier
- Courier New
- Didot
- Futura
- Gadget
- Geneva
- Georgia
- Gill Sans
- Helvetica
- Helvetica Neue
- Herculanum
- Hoefler Text
- Impact
- Marker Felt
- Optima
- Papyrus
- Skia
- Symbol
- Times New Roman
- Trebuchet MS
- Verdana
- Webdings
- Zapf Dingbats
- Zapfino
A good rule of thumb regarding fonts is not to specify fonts at all unless necessary. If you have to use a font, make sure it is a system font. Finally, if you need to use a font you know is not a system font, turn the text into an image.
Fonts as Images
So, what happens if you have found the perfect font to use in your logo or central image that is not a default system font? Or you want to use a non-system font for effect that would be ruined if you used a system font? You may want to consider making the text an image. What this means is you create a graphic that contains the text in the font you want and present it like it was text, but it is actually an image. You might want to do this for something like the header of your site. The CNN font (see Figure 4.8) is not a system font, so the logo is an image.
)
Figure 4.8. The logo for CNN.com is an image, not text.
There are some problems with this approach, however. The text is no longer selectable, and search engines cannot find it. Also, these images may slow down your page’s load time. Text as an image can be used to great effect but should be used sparingly.
Fonts and Color
You can also color the text on your web page.
When dealing with text, try to use black text on a white background. Colored text and colored backgrounds can make things difficult to read. It is best to avoid using colored text and colored backgrounds, but at the very least, contrast the color of the text and the color of the background in such a way to make it easy to read. Some okay examples are green text on a black background or blue text on a white background.