The font, the whole font, and nothing but the font…

fonts

Fonts!

*throws handful of letters into the air*

I love unique fonts. Thanks to some fabulous online sources, I’ve become quite a collector. Here is my newest favorite:

sketchrockwell

I also love this one:

28dayslaterred

Check out the curves on this baby:

angelina

Well-chosen fonts can add a touch of wit, sophistication or just plain fun to your blog or website. The question is, how do you use them? The answer is:

sparingly

Fancy fonts are like condiments, meant to enhance, not over power. Imagine trying to read an entire article in this font:

what

Kind of makes your eyes cross, right? Fonts like Coneria Script (used above) are meant to be used as accents, like a header for example. Check out the difference when we use Coneria Script for the header and Verdana for the body copy:

teacher

Nice! The headline catches the eye, while the easy-to-read body copy keeps the reader, well, reading. Which is what we want. When putting your blog together, choose an easy to read font for your text blocks and a bolder choice for your headers.

howmany

For the main part of your blog/website, three is a good number. For example, on this blog, I use Rokkit Bold (1) and Impact (2) for the logo, and Rokkit Regular (3) for the body copy. This gives continuity of brand and keeps the design flowing through each page. Using too many styles of lettering can be overwhelming and create pages of visual soup that will chase readers away.

If you are creating a self-contained design element, using different fonts from your main blog is perfectly acceptable. For example, notice below I brought in a fourth font (Sketch Rockwell again), but it works because the visuals are contained in a separate graphic.

branding

While my blog colors are strictly black, white, red and gray, adding blue makes the design stand out. Remember, color is your friend, but, like the invisibility cloak, use it well. (“Really, PPG, a Harry Potter reference?” Yes, sometimes you need to pacify your inner nerd.)

Can I let you in on a color secret? White body copy on a black background is hard to read! Take a look at the above graphic again and notice I just broke my own rule. However, I did it with care, by using a font that is large and bold. This works. The following example does not:

saywhat

See what I mean? If your heart is set on black, or if a black background fits your design, try using a larger or bolder font, like this:

better

There, isn’t that better? It was easy to accomplish, all I did was switch to a slightly bolder font and increase the point size from 13 to 18. The copy box did change in size, but only slightly. Love your black background? Keep it, but change your size settings. Your readers will thank you.

Want to add to your own font collection? Here are some great resources for free fonts:

Font Squirrel 

Urban Fonts

The Northern Block

1001 Free Fonts

Have fun exploring the wonderful world of fonts! Do you know a resource for great designs not listed here? Drop me a line in the comments, I have a 2 terabyte hard drive, after all.