Web-Safe Fonts For Your Blog

No matter what blogging platform you use … even if you’re just building a straight HTML website … there are relatively few fonts that are safe to use. You can’t just find a “pretty” font on your computer and use it on your website. You have to do your research first. Hopefully, this article will help you narrow down the choices in your quest to make your website bulletproof.

In basic CSS format, you define a font for a website like so:

body {
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 12px;
}

There’s really not much in the way of explanation here. You define a global font style in the “body” style section of your CSS. And if you want define a different font style for a different element, you can do that just as easily by following the same format as above.

You might have noticed the degrading failsafe I put in as a way to buy a little “insurance” in case your first choice isn’t available. If the user’s computer doesn’t have the Arial font (although the chances of that are slim), then it goes on to the second font in the list. If that’s not there, then it goes to the third. You get the idea.

The Setting

OK, for those who don’t know, let’s just say that you defined “Trajan Pro” (one of my favorite fonts, although not as a web font) as your default font in your stylesheet. The nature of the web is not like print. Just because you define a font as the default doesn’t mean that the user is going to see it that way. If the user doesn’t have that font installed on his or her computer, then they won’t see the font you’ve chosen for your website. If you haven’t defined a secondary font, then the browser will just revert to the default font … usually a common Serif font like Times New Roman.

So what font’s are safe to use?

I’m by no means saying this is a definitive list or anything, but here are some font’s I’ve picked up in my experience as “safe”.

• Arial – A basic Sans-Serif font. Most websites use this font because of it’s simplicity.
• Helvetica – A font very similar to Arial.
• Times New Roman – Yep, the default in Microsoft Word 🙂
• Georgia – Like TNR, but with a little more character.

A couple more that I think are safe:

• Trebuchet MS – Pretty cool looking font. Good for headers. I use it for my headers here on this blog.
• Verdana – Doesn’t look great in anything above 11px font size.

That’s where my list ends, but for a few more options, check out this good page for a deeper explanation of everything, and a slightly longer list of safe fonts.

Sorry to burst your bubble if I did. I know there are lots of people who wish web design was as easy as print, but unfortunately your choice of fonts is limited. But that doesn’t mean you can’t still do great web designs. Make it work … make it fit. If you apply some good color choices and a good grid, font ends up not mattering all that much.

To be honest, I’m glad web fonts are limited. Have you ever seen a flier on a telephone pole that someone did in a word processor? I rest my case 🙂

• Category: Blogging Tips, Web Design Tips