12

How to Pick Fonts for Your Website or Blog: The Dos and Don'ts

Shannon Lausch
More people every day are staking out their own personal corner on the Internet, whether it be a Facebook account, a MySpace page, a LinkedIn profile, a blog-the list goes on. Sometimes people have complete creative control over the style and fonts on their page, and in these instances, disaster can strike. Who can forget the countless MySpace pages that look as though a rainbow ate too much sparkles and puked all over it?

But for beginners, these poor style decisions are easy to make-especially regarding fonts. Picking a font is one of your most important decisions for your page's design. Font affects readability and determines whether readers will be enticed to continue browsing your page or hurriedly leave your page in an attempt to salvage their sight. Here are ten dos and don'ts to help you use fonts more effectively.

1. Do keep script, decorative, and unusual fonts to a minimum

With so many options, you may be tempted to pick the most quirky font to get attention. Or maybe you think you're giving your page a classy look by using a cursive font. But really, the basic purpose of fonts is to communicate your thoughts. If your font is barely readable then you fail to effectively communicate. If your font can match the personality of the page without hindering readability, great. If not, readability should trump over creativity.

If you're dying to use an unusual font, use them for titles or headings. Never use them for the body of a text.

2. Do remember that ordinary serif and sans serif fonts are your friends

They may seem boring and tired but common fonts like Arial, Calibri, Caslon, and Garamond became common because they're so easy to read. Don't be afraid that readers will criticize your lack of creativity by using one of these fonts. If you pick a good one, your readers shouldn't even pay attention.

Confused with this terminology? Serif fonts are those that have short lines at the end of the strokes of each letter (see picture 1). Sans serif fonts don't have them (see picture 2). Usually guides will tell you to use serif fonts for large pieces of text, since they're easier to read. However, sans serif fonts are actually easier to read on a computer screen. Always try to pick the font that's the easiest to read on your page.

3. Don't use more than three types of fonts

You should probably only use two fonts for your page. Three is pushing it. If you use too many fonts, your page will look cluttered. Try to pick one font for headings and another font for body text. Your page will have a cleaner, more professional look if you keep your font use consistent.

4. Do be distinct when using different fonts

When picking fonts, you should also keep in mind that each font you use should be distinct from the other one. For example, if you use Sylfaen for the heading and Times New Roman for the body text, people may not even notice the difference. If they do notice, they may just think it's a mistake.

For a good combination, pick one serif font and one sans serif font. Whichever one you use for headings or subheadings, make sure you make it either bolder, a bigger size, or a different color to ensure it's even more distinct (but you don't have to do all three of those).

5. Never use all caps

You've probably heard this rule a thousand times, but here it is again. You shouldn't even use all caps for headlines or subheads. Putting text in all caps vastly decreases readability and makes you look unprofessional.

6. Don't capitalize each word in headlines

Which is more readable: "Don't Capitalize Each Word In Headlines And Subheads" or "Don't capitalize each word in headlines and subheads"? If you think the latter, you're like most people. Some publications capitalize each word, but it is easier to read headlines written like a normal sentence.

To make headlines stand out without capitalizing each word, use a font that's bolder and make it distinctively larger than the body text.

7. Do use bold and italics sparingly

Don't overuse bold or italics in your piece. By using italics or bold too many times, you de-emphasize their emphasis. Never use bold or italics for an entire paragraph.

8. Don't use Comic Sans

Comic Sans drives web designers nuts. Its cutesy look combined with its overuse has motivated movements to ban this font (seriously, just Google Comic Sans and the first hit is bancomicsans.com). In any case, just make sure you don't use this font with serious articles. People can be very touchy about fonts and for some reason, Comic Sans gets font-lovers raving-and not in a good way.

9. Do be careful when using reverse type

Have you ever stumbled on a page that uses a black background and white type? How did your eyes feel after reading that page? Probably not very good. While a savvy designer can pull off a dark background with a light font, you're better off using a light background with a dark font. If you do use a dark background, remember to at least use a sans serif font, since some letters in serif fonts are far too thin and may get lost in the background.

10. Do a side-by-side comparison if you're trying decide between different fonts

Have you picked your fonts yet? If you're having trouble choosing, put your choices side-by-side. Don't automatically choose the one that grabs your attention. Focus on which one is easier to read. Do your eyes naturally flow through the text or do you have to concentrate to get through it?

11 Comments

Post a Comment
  • Lisa Curcio1/5/2009

    =)

  • freakmamma12/24/2008

    Thanks for sharing

  • Juniper12/23/2008

    Great suggestions. I've seen so many otherwise-informative websites ruined by poor, unprofessional fonts.

  • C.B. Jones12/21/2008

    In short, bland is the way to go? I guess the best way to be flashy is via content, not layout.

  • Salmon Ponross12/20/2008

    Being a webmaster, I agree with you.

  • Roberta Baxter12/15/2008

    Too decorative can be disturbing. Good post. Roberta Baxter

  • Nikki12/15/2008

    I agree!

  • Patricia Sicilia12/15/2008

    I was writing to a friend in jail this summer, and chose a font that simulated handwriting because mine is horrid and I thought she'd enjoy it more, but she wrote back to not use that "fancy" font because it was hard to read. You do have to consider these things.

  • Michael Segers12/15/2008

    One consideration is that if you use an offbeat font, people who view your page can't see it unless they have that font installed (or if you use it in a graphic). I have seen websites that include a font file and instructions for installing it, so you can see the page as it was designed. If you don't have the font installed, you'll just see your default font (Times New Roman for most folks). Dark backgrounds with light fonts aren't as bad (for me) as just weird combinations where I can't really see the font or heavy background designs that eat up the text. I have actually copied and pasted to Notepad texts that are just unreadable. You can tell you really touched a nerve for me. Thanks for your gread advice. (I love the description of MySpace messes.)

  • Janienne Jennrich12/15/2008

    This is really important. As a printers' wife, it drives me nuts when people goof. Thanks!

Displaying Comments
Next »

To comment, please sign in to your Yahoo! account, or sign up for a new account.