In the Internet’s early days, web design was limited to only a few widely-accepted fonts. Since then, the number of widely-accepted fonts has greatly increased, but web designers should still be weary when choosing text-based fonts. Fonts can only be recognized by computers after they have been installed on the actual system. And since most people do not install fonts, they tend to use the base fonts which come with their PC’s or Mac’s.
Why are we only concerned with text-based font?
Fonts used in actual text rely on CSS or some sort of styling to customize their appearance. “Font-family’s” are the recommended method for styling, which choose backup fonts that replace primary fonts when a computer cannot recognize them. Fonts used in ANY image will appear without conflict, but more than often we find ourselves needing solid fonts for text-based use.
Example of Font-Family Styling:
p {
font-family:Verdana, Arial, Helvetica, sans-serif;
}Using this approach, fonts are used from left to right. If a user’s computer does not have Verdana, then the text will use Arial, then Helvetica and so forth.
So what fonts are web safe?
That answer really depends upon which operating system you are trying to cater to (Windows vs. Mac vs. Linux). A recent survey by Codestyle.org sought to determine the most popular fonts for each operating system. Let’s take a look at the top fonts for Windows and Mac systems.
Top Fonts For Windows (expand/collapse)
Top Fonts for Mac (expand/collapse)
While Windows is much more common than Mac, we should still take Mac font popularities into account. You can choose popular Windows fonts for your primary fonts, but have at least one font that will definitely be visible to Mac users (such as Helvetica or Lucida Grande) as your backup font.
Overall Top Web Safe Fonts
These fonts are a sure pick to be recognized by nearly all audiences.
- Arial
- Verdana
- Tahoma
- Courier New
- Georgia
- Helvetica
- Times New Roman
- Trebuchet MS
Smart topic to write about, I’m a web designer and I often run into problems down the road with font compatibility between macs and PCs. Your list of compatible fonts is solid.
The fonts you recommended are all safe to use but people should also worry about what size font they choose. Most ppl use pixels to determine font size but that could mean completely different things from one computer to the next. Using %’s or em’s is best.
I have to agree, fonts are a bigger deal then ppl think. Nice post.