The best fonts for websites (web safe fonts)

July 26th, 2009 6 Comments

Beginners to website design often scratch their heads in confusion and ask themselves “What are the best fonts for web design?” The answer to this question is both easy and a little complicated. You see, while there are some good fonts for websites, there are also the highly necessary standard fonts for websites as well. Throw into the mix the fact that you can have any font on your website using images and you’ll undoubtedly scratch the hair right off your head.

In this post, I’d like to clear up the confusion and offer some solid “web font” advice to help make choosing your website fonts easier (and to prevent premature balding as well.)

Let’s begin with a little background information:

Text vs. images

The first thing you need to know is that you can safely use any font on a website provided that it is part of an image. How can you tell the difference? Easy: if you can use your mouse to select individual words or even letters of the text your see on a website, then what you have is pure text. Below is an example:

You can easily select this text.

But below is an image that contains text. You can’t select individual words or letters because they are part of an image:





The font used in the image above is called “Moderna” — and you probably don’t have it on your computer. But since it’s used in an image, you can see it just as I do.

Which brings me to the next point:

If they ain’t got it, they won’t see it

So, you just downloaded the coolest grunge font from your favorite free site. You then decided to make all of the main headings (<h1> </h1> tags) on your website this font. Awesome! But when showing your masterpiece of website creativity to your friend at his house, your eyes widen in shock. “Where is my font?!”

If you read the post titled You actually DON’T visit websites then you’d know that, in truth, websites come to you. And if you don’t have a font installed on your computer that a designer used for pure text on his website, then you won’t see that font. Instead, your browser will replace it with some other font that is on your computer.

Common fonts for websites

Since not everyone is using the same operating system, it’s actually a little challenging to prepare a list of web safe fonts that you can use as pure text on your websites. Some people use Windows Vista or Mac OS X. Others use Linux. And others are still using older versions like Windows 98 or Mac OS 8! So to keep things safe, here is a list of the most common, standard fonts for websites that even people using ancient operating systems can see:

• Arial
• Courier New
• Georgia
• Helvetica
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings

Here’s an image of what they look like:

I realize that this is a pretty short list, but remember that these fonts are to be used as pure text and not as logos or other fancy website design elements.

If you’re sure that most of your website visitors are using more recent operating systems, then you can also add these common website fonts to the list:

• Andale Mono
• Arial Black
• Century Gothic
• Comic Sans MS
• Impact
• Tahoma
• Zapf Dingbats

Here’s an image of what they look like:

(There are a few more, but I’m the kind of website designer who prefers to use fonts that everyone can see.)

Final thoughts

In answer to the question “What are the best fonts for web design?” I would recommend for pure text that you stick with the most common fonts in the first list above. This will ensure that everyone visiting your site can see it the way you intend it to be seen. For your website logo, navigation, and other website design elements, you can use any font you want as long as it’s part of an image.