Today I am beginning a series of articles dedicated to the subject of Typography in Web Design. The internet has drastically broadened the scope of design, and these days gajillions of people from all walks of life are trying their hand at web design. A trend I have noticed in amateur, and some professional, web design is a complete disregard or lack of attention paid to the type on the site. Not only does the text on a site communicate almost all of the content to the viewer, it can make or break your design. With this series of articles I will discuss, at a level appropriate for all readers, typography on the web, web safe fonts, CSS attributes you can use to adjust your text, and everything in between.
The Web Safe Fonts
When talking about type in web design, the first thing we have to address is which fonts are available to us for use. Using CSS, you can make any or all of the content on your page display using ANY font. However, as always with working on the web, we must be aware of our audience above all else. Only fonts that are loaded onto the computer viewing your website will render, otherwise the browser will switch to its default font, usually Times New Roman/Times. Therefore, it is important for a designer to be aware of which fonts will render consistently and correctly on the vast majority of the computers viewing his or her site.
By examining the pre-loaded fonts on the two largest commercial operating systems, Mac OSX and Windows (XP, Vista, etc.) we can get an accurate list of which fonts are safe for us as designers to use on the web. Most fonts are not found on both operating systems, there are however many fonts that have almost perfect equivalents in the opposite operating system. Therefore, the fonts are listed in pairs, or families, of similar fonts. Keep in mind, just because I list a font as existing in ‘Mac’ or ‘Win’ does not mean it is pre-installed on every iteration of the respective operating system, it just means that it is present on the VAST majority.
Sans-Serif
- Arial (Mac & Win), Helvetica (Mac)
- Verdana (Mac & Win), Geneva (Mac), Tahoma (Win)
- Arial Black (Mac & Win), Gadget (Mac), Impact (Mac & Win)
- Lucida Sans Unicode (Win), Lucida Grande (Mac)
Serif
- Georgia (Mac & Win)
- Times New Roman (Win), Times (Mac)
Monospace
- Courier New (Mac & Win)
- Lucida Console (Win), Monaco (Mac)
If you stick to these fonts and font families in your design work you can rest assured that you are doing everything in your power to insure your type renders similarly cross browser and cross operating system. In upcoming articles I will be addressing each of these fonts separately to help you chose which ones will work best for your web project, so stay tuned!
Penny for your thoughts?