interlinkONE

Web Safe Fonts – Jazz them up

Posted by Jaclyn Smith on Monday, August 10, 2009 at 12:25 PM in Design

I was reviewing my work emails last night and I saw an email had come in for me to take a look at changing the type face for a certain webpage. I didn’t give much thought to it other then how it should only take about 5 minutes of my time to pick a font and plug it in.

But as I sat down at my desk this morning I realized how small the universal type face world is.

My best comparison for people who don’t work in design is it’s like this…

You’re heading to a birthday party and uh oh. No card. So you pull into a gas station – you see a rack with about 25 cards. However, you walk over to it and only five of the 25 cards are suitable for birthdays. And guess what? They’re pretty generic —“Happy Birthday Pal!”, “It’s your special day buddy!”, etc… They typically contain phrases that do not reflect your personality, or words that you would ever use when talking to your friend.

There are hundreds of font faces that may exist in the design world. However, when it comes to using fonts that are safe for the web, you only have a handful to pick from.  Here’s a sampling of those popular safe ones:

It’s frustrating but sometimes you have to make the best of it. Add your own little flare to take away from how drab it is.

So here are a few suggestions from my experience today that you can keep in mind when trying to jazz up your generic type face for your emails, web pages, powerpoints, and more.

Serif vs. Sans Serif

For me to expand on Serif and Sans Serif fonts would require me to write a few books so here’s the most general way I can explain.

If you’re trying to be a bit more scholarly Serif is the way to go. You can see in the image above that serif have little hooks or feet. Serifs go way back and you will see them almost everywhere – mostly for lengthy readings or more professional letters anything that’s printed.

Serif is a bit more fun and casual and is seen a lot on the web and emails. Why’s that? Well it’s easier to read on a screen. This is because print resolution is higher than a monitor’s resolution so those serif feet start connecting resulting in difficult reading.

Color

Don’t go overboard on your color – mix and matching too many colors and font faces can become a disaster. But! A little variation may be nice.

If you have a white background try out a gray coloring. Gray text is becoming much more common on the web and in emails.

Try making your headers a different color. Look for a color that compliments the rest of your design. If you’re having trouble finding a color check out Kuler - http://kuler.adobe.com/ they can be a big help.

JPG time

I don’t suggest this for blocks of text but if you just need that header text to grab attention to your block of text below go into your design program and pick from one of the forbidden web fonts and save the header as a .jpg and add it in to your design it can be a quick fix if the suggestions above can’t help you out.

ComicSans

I have one final suggestion – but it’s more of a favor I ask.

Please don’t use ComicSans -  http://bancomicsans.com/

(14) Comments Tags fonts, sans serif, serif, Web safe type