Choose a Font
Choosing the right font for your website goes right on top of the list (along with color scheme), as one of the most important design decisions you will make. Your font needs to match the style and theme of your website, but when choosing a font there are a couple things you need to know. Here is how fonts work on the web:
1. Your site's font is not actually stored on your site. What happens is that your site's coding actually calls the font, which is then generated by the visiting computer.
2. If the visiting computer does not have the font being called by the coding, the visiting computer will not know how to interpret the font.
3. There are approximately 18 fonts that are considered "Browser Safe Fonts" that feature the same, or equivalent fonts and come standard on both Mac and Windows systems.
You may be wondering how some sites use custom fonts for logos and menus. These site's logos and menus use images and not text. While both may look similar to the human eye, to search engines they are nothing alike. When search engine bots come across an image, they read the name and root of that image (e.g. img src="/root/images/filename.jpg" ), but when these bots read text, they see and interpret the actual text. This plays a large part in your site being found by these search engines, otherwise known as Search Engine Optimization (SEO).
Common Fonts and their
Mac and Windows Equivalents
Here is a list of the "Browser Safe Fonts" that come standard on both Macs and Windows computers:
|Arial, Arial, Helvetica, sans-serif|
|Arial Black, Arial Black, Gadget, sans-serif|
|Comic Sans MS, Comic Sans MS5, cursive|
|Courier New, Courier New, monospace|
|Georgia1, Georgia, serif|
|Impact, Impact5, Charcoal6, sans-serif|
|Lucida Console, Monaco5, monospace|
|Lucida Sans Unicode, Lucida Grande, sans-serif|
|Palatino Linotype, Book Antiqua3, Palatino, serif|
|Tahoma, Geneva, sans-serif|
|Times New Roman, Times New Roman, Times, serif|
|Trebuchet MS1, Trebuchet MS, sans-serif|
|Verdana, Verdana, Geneva, sans-serif|
|Symbol, Symbol (Symbol2, Symbol2)|
|Webdings, Webdings (Webdings2, Webdings2)|
|Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)|
|MS Sans Serif4, Geneva, sans-serif|
|MS Serif4, New York6, serif|
1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
2 Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
3 Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
4 These fonts are not TrueType fonts but bitmap fonts, so they won't look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).
5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font.
6 These fonts are present in Mac OS X only if Classic is installed (thanks to Julian Gonggrijp for the corrections).