In web design, graphic design, and any application where type is necessary, it is important to ensure the font and typography layout complements the context of the design. If you’re designing a corporate ad for microsoft, you’re probably not going to use a funky, “all the bells and whistles” font with eroded parts and wacky alignment. Similarly, if you’re designing an ad in the newspaper for a car dealership, you probably won’t be using Times New Roman. Oh - and in NO situation whatsoever are you EVER going to have the need to use Comic Sans MS. Never. So here’s a few tips to ensure you are selecting your type properly.

1. Serifs vs Sans

Unclear as to what Serif vs Sans is? Well its a lot easier for me to show you.

So you can kind of see the difference I hope. Serif has a little more “fancy” look to it, with extra elements on the tips of most of the font pieces. (For more information on sans vs serif, check out this site!)

Now that you’re clear on the difference - how do you know which to use and when. Well, there is a lot of debate about this. Some people suggest that sans fonts should be used for body text, while serif should be used for titles and headings (like this site). But this isn’t always the case. Most of the time, it will be up to the designer to choose which looks best, and that comes with experience.  Personally, I find that serif has a more professional look to it - so i tend to use it in more professional applications. Sans, on the other hand, is quite contemporary - so i use it accordingly. My advice to you? Start noticing type in certain areas like signs, magazines, books, websites, etc. and decide for yourself which looks best and where.

Some good sans fonts: GeosansLight, Calibri, Arial, Helvetica, Trebuchet, Verdana, Myriad Pro
Some good serif fonts: Cambria, Georgia, Perpetua, Rockwell

2. Readability

Ever seen a website where you struggle to read the title - or a magazine where its a struggle to read the message? Readability plays a key role in the aesthetic appeal of text. When designing something, step back from it, and take a full look at the page to see if the text is easy to read, and immediately clear as to what it is saying. Although groovy fonts are fun, don’t overdo it.

3. Spacing and Layout

Most graphic editing programs have an option of altering the line-height, letter spacing, and word spacing.

Again, the eye for this kind of thing comes with time and experience, but you can start now by looking at websites, books and magazines and seeing what looks good. Normally, i’d suggest leaving the letter spacing at a normal level for body text, but for headings, logos, and graphics, feel free to experiment with these properties. Line height is also a key factor in readability. Brian Cray, typography specialist, says this about these properties:

As a Web developer, you have the option to tweak the letter-spacing, word-spacing, and line-height in your CSS. But you probably don’t.

By default there’s too much white space between characters, words, and lines if your font-size is greater than 16 for a short headline. As font-sizes get bigger the letters and words seem separate, fragmented. They are lonesome. Unify your text with thinner letter and word spacing and shorter line heights. The general rule-of-thumb I follow is to provide just enough space to allow the reader to read the headline. Doing this also adds weight to your headline for nice contrast over body copy.

Try tweaking your letter-spacing, word-spacing, and line-height. You’ll be amazed at the impact.

So when you’re designing, keep these properties in mind!

4. Pairing Fonts Properly

In most design situations, you’re going to need to use more than one font. A general rule of thumb is to keep the font number to two, but there are always exceptions. For this example, we will assume you are selecting 2 fonts. Here are some “do’s” and “don’t”s

• Don’t select two fonts from the same family, or that look similar. For example, Times New Roman and Garamond
• Don’t use more than one “bold” font. Not bold as in font-weight, but bold as in catchy, attractive, and with a strong personality. Rather, pick one complex font, and one simple font
• Sometimes it’s good to pair modern fonts with older fonts - you choose
• When picking fonts for titles, place a brief excerpt of text below the top font to ensure they flow properly
• Pair a Serif with a Sans!
• Don’t use Comic Sans MS. Period

5. Color and Themes

I don’t wish to get into too much detail about color, as there are entire courses on color theory. The main thing to keep in mind when choosing colors for your fonts, is uniformity and clarity. Ensure that the color you pick, matches the font you choose. How do you know this? Well, there’s no easy way to tell you. Just keep in mind that when designing, you should step back and take a broad look at the design, to ensure that the color of the font has sufficient contrast (but not TOO much) with the background, while ensuring it ties in with the theme.

If you have any questions or comments on the above article, please list them below! Thanks for reading, and be sure to add this article to all your favorite bookmark sites!

Tags: Fonts, Graphic Design, Typography, Web Design

This entry was posted on Tuesday, April 21st, 2009 at 9:39 am and is filed under Graphic Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.