The following post is a guest post by Vivien who runs Inspiration Bit. Vivien is a web developer and freelance web and graphic designer from Vancouver. Her post came at a good time as I have been battling a cold/flu for the last few days. Thanks for the great post Vivien.

Whether we like it or not we’re constantly dealing with type. Type is everywhere – on websites that we visit daily; in magazines, books and newspapers that we read on a regular basis; on the street and store signs; it’s used on packaging of products we consistently buy, and even on TV in commercials, movies and the list goes on. When used correctly Type doesn’t distract our attention from its main goal – deliver a message in the best readable way possible.

However with so many typefaces available it can be a daunting task to pick and combine the right typefaces for the task. I’ll try breaking the selection strategies into 8 bits to help you with achieving the most effective type combinations.

1. How many typefaces can be used?

   As a general rule of thumb, there’s a very little need in using more than two typefaces or type families in a design. However, this rule can be broken depending on the project. First of all, what is the point of using different typefaces in design? The obvious answer is to differentiate certain elements of design. A typical page can consist of more than one element such as plain body text, headlines, subheads, sidenotes, captions, numbers.

   If a design doesn’t have much text then using more than one typeface may look too garish. On the other hand, if a design has lots of content with various elements that need to be projected differently, then more than two typefaces may be used to achieve the right effect.

2. Get the terms right.

   It is very important to understand the difference between the terms Font, Typeface and Type Family.
   Font is the variation of type in styles (bold, italic) and sizes (12pt, 1in).
   Typeface describes the shape of characters, created by typographers.
   Type family is a group of related types with the variations in weight, width, orientation.

   To summarize: “Times” is a type family, consisting of typefaces like Times Roman, Times Italic, that can be used as a Times Roman 12pt font or Times Roman 18pt font.

3. Harmonious Combinations

   Perhaps the easiest and safest way to combine multiple typefaces in design is by choosing them from the same large type family. You can simply mix types with various weights, proportions from the same family to differentiate the headline from the body text.

   The best way is to work with so-called “super families” that consist of various subfamilies. Some of the examples of Super type families are ITC Legacy, ITC Stone, Neue Helvetica, Zapfino.

4. Mixing Serifs with Sans Serifs

   While working with the types within the same family produced harmonious combinations, using the opposite typeface styles generate a better visual interest by adding more depth to the overall layout. The simplest approach here would be to combine serifs with sans serifs. As long as you don’t pick serif and sans serif typefaces with similar designs (i.e. Times with Arial Black) you will almost never go wrong with combining practically any sans serif type with an opposite in style serif typeface. It works because serifs and sans serifs have very different structures so visually they create a good contrast.

5. Contrast Combinations: Size and Weight

   Choosing two serifs or two sans serifs for your type combinations will work too, but once again you must provide a clear distinction between all characters of type. One way to achieve this is by creating contrast in size and weight. Some types look very different when utilized with a large point size, they look especially good on headings.

   The weight of a typefase is determined by the thickness of strokes. When combining typefaces with different weights it is best to go with the highest contrast: combine Regular with Heavy or Extra Bold instead of just usual Bold or Demi. Contrast in weight is one of the most effective and popular ways of combining types.

6. Contrast Combinations: Colour and Form

   The shape of a letter (character) is referred to as a form, for example caps vs. lowercase, regular vs. italic. Keep in mind that it is much more difficult to read words that are set in all caps, because they take on a rectangular form and we’re forced to read them letter by letter. So avoid using All caps, or all Bold with a large amount of text.

   There are two kinds of colours in typography: black and white – that is achieved by setting headlines and subheads in a heavier wieght, playing with a space between the letters, between the lines, the size of the x-height. This creates an illusion of a darker black colour as opposed to the lighter grayish colour of a regular text.

   Another kind is by actually injecting some colour to your designs. It will attract attention to an element by emphasizing and reinforcing the contrast of the types in the combination. It is very important to keep in mind that the number one priority when combining type and colour should be readability, then contrast. There should be enough contrast between the type and background colour, between two types in the post or a logo.

7. Avoid conflicting combinations

   Don’t mix typefaces that fall into the same type category, for example Georgia and Garamond – they both belong to the oldstyle category. Don’t choose two similar faces, because they don’t give enough contrast and look more like a mistake since they are not really the same but don’t differ much either. This defeats the whole purpose – why choose different typefaces if they closely resemble each other.

   Here are a few typeface combinations that you should steer away from:

   • Avant Garde Gothis with Univers
   • Bodoni with ZapfBook
   • Caslon with Korinna
   • Palatino with Bembo

   For more typeface combinations you can refer to this very useful cheat sheet in PDF.

8. Don’t combine electronically distorted types

   Whatever type combination you choose for your project don’t get tempted by Image Editing software to add Bold or Italic effects to your text. Type designers spend a great deal of time to properly design the italic and bold versions of a type, by carefully adjusting character proportions, shifts in stroke weight. Electronically distorted type destroys important character proportions and stroke weights. So if you want to use typeface Andale Mono, but it comes only as Regular, don’t force a bold effect on it in Photoshop, choose a different type instead or use a big font size.

So here you go, hopefully you’ll find this article helpful when combining different typefaces for your projects. You can also check out my articles on Typographjy at Inspiration Bit: 16 Best-Loved Font Bits In Web Design and 16 bits of Exceptional Typography Resources

I have been pretty busy this week doing a lot of Photoshop work. I have to admit I am not the fastest Photoshop guru so I look for help out on the web quite often. I came across a couple of sites recently that have been helpful for both Photoshop and Inkscape.

Vecteezy offers free vectors for you to download and use.

Brusheezy offers free Photoshop brushes to download and use.

Make sure you check the license before you download. They are free but some come with restrictions, like you must contact the creator, or not for commercial work.

I had a minute this morning and hit the Stumble button and was taken to this site that has over 10,000 free shapes for your Photoshop. As you all probably know by now I love free stuff. I tend to fill my hard drive up with it. This download is 37 megs and has close to 12,000 shapes for you to play with in Photoshop. Shapes can save a lot of time when you are doing buttons, bullets, and all kinds of items. The shapes are even in categories so you don’t have to load all of them up at once.

One of the little things that often is overlooked by many webmasters is to create a favorite icon or favicon for their website. A favicon is that small 16×16 pixel image that people see on the address bar of their web browser when they visit your website, and it is also used when your website is bookmarked or saved as a favorite by people. It can immediately make your website more recognizable and should be a part of every webmasters branding of their website.

To create a favicon you can do several things. If you already have a logo try making a smaller version of it and see how it looks. Remember favicons are 16×16 pixels, not a very large canvas to work with. There are not a lot of logos that work at that size. Your favicon does not have to be your logo exactly either. You can take an object from your logo or perhaps just a letter. If you are using Photoshop you can install a free plugin from Telegraphics that you can use to export your graphic as an .ico file. Inspiration Bit has a good post about creating a favicon with Photoshop.

If you only have to create the occasional favicon, and don’t want to bother with a Photoshop plugin you can create an image in gif, jpg or png format and use a favicon from picture generator to create your favicon. I got tired of always having problems connecting to other favicon generator websites on the Internet so I went and made my own website at FreeFavicon.com. Once you have your image simply go to FreeFavicon.com, click browse to select your source gif, jpg or png image and click FavIcon Go! You will then be given a preview of your new favicon and a download link to download a zip archive of your new favicon, an animated favicon and a readme file.

Don’t feel creative to make your own custom favicon? FreeFavicon.com also has a gallery of favicons that you can download and use as your own for your website. There are currently five main groups of favicons: business, flags, network, objects and software. If you can’t find a favicon from the gallery, it might give you some inspiration for what your favicon should be.

The last thing you need to do is upload your new favicon to your web server. If you put it in the root of your website then most web browsers will actually look for it there without having the link code in the header of your web page. To make sure that web browsers find your favicon though you can add code similar to this to make sure they find your beautiful new favicon.
<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" />

Just StumbledUpon a couple of great Web 2.0 gradients that you can use in Photoshop to create buttons, logos, tabs, toolbars, backgrounds and all kinds of cool looking things for your websites.

• Photoshop: Web 2.0 Gradients
• Ultimate Web 2.0 Gradients

I am sure these will come in handy for that next web design project.

I have talked about how it is important to test your websites in other browsers to make sure the site looks the way you want it to. While taking screenshots is one way of seeing if your website looks right, it does not give you the chance to make sure all the features that you might have added into a site work. Examples include flash, ajax, javascript and css menus.

The only way to ultimately know if your website works in all the different platforms and browsers you need to use it on all the platforms and operating systems that there are. It can be hard to keep that many systems and operating systems around. This is where BrowserCam Remote Access comes in very useful. I recently subscribed to this service and I could not be happier. I no longer have to worry about whether or not websites are working on multiple systems and operating systems, because I can test the sites on all the versions of Windows from Windows 98 and up, Mac OS 10.3 and 10.4 and Linux.

The service allows you to use a VNC client to connect to the service and use the system to test your websites in and make sure all those little details work. Not only can you make sure the website is rendered properly in all the major browsers, but you can make sure the ajax addon like Lightbox that you added, or flash video player, or javascript are all working the way they are suppose to.

If you are serious about web development and want to make sure your websites work in all the major operating systems and web browsers give BrowserCam remote access a try. I have been very happy with it and it has already saved me a great deal of time in my testing of new features for websites.

Looking for some new fonts for a project? Take a look at this list of “The Ultimate List of Fonts on the Internet” post over at Look at This. There are some excellent resources in the list. You are sure to find some new and interesting fonts from some of those sites.

A great list of things you should not do when creating a website.

19 Things NOT To Do When Building a Website.

I will only add two that I did not see, and I have mentioned them before. No stupid annoying animations and make your text readable.

I have seen this on the web before, but I came across it again this evening and it made me laugh. It is so true. I am just wrapping up a redesign project and everything was going so well, until some issues popped up with Internet Explorer. I don’t think I spent that much time making it work in Internet Explorer but it sure was frustrating.

I don’t agree with the section on giving up on getting the layout working using CSS and using tables. If your web design company can’t get the layout to work using CSS and wants to use tables, find a new web design company.

I have been cleaning up an older website for a client the last few days, and, to be frank, it has gotten me in a bit of a cranky mood. I can’t help but be reminded of the reasons why your aunts cousins nephew should not design and program your website:

Annoying Animations

Animation when it is done well on a website or page can enhance the users experience of a page. How often does that happen? If you are lucky maybe one out of a 1000 times. You not only see it on MySpace but there are some very respected bloggers out there that have annoying animations on their website. As a general rule, don’t use animated gifs or flash.

Auto Play Music and/or Video

This used to be just music, but with the success of YouTube and other video sharing sites people often embed videos that auto play. Don’t get me wrong, I like embedded video on a site, but let me start them. I’ll watch it if I want to watch it. The same goes for any kind of music. Feel free to embed your podcast on your site, but let me start it. I could be talking on the phone and surfing and the last thing I need is your music starting up as soon as I hit your page.

Hard to Read Text

Do you want me to read your website? Do you actually have something important to say that you want me to see? Make your text readable. A decent font size, that is easy to read, and contrasts well with the background. I prefer black text on a white background, but white on black is good too. Just make the text readable.

Marquee Text and Blinking Text

This is like an animation and hard to read text all in one. Nothing like annoying your users. It starts to give you a headache after a little while.

Bad Spelling

I admit I am not the greatest speller in the world, but I do know how to use a spell checker. I might still get to and too mixed up but please spell check your website. Along with this please don’t use short cuts like you are instant messaging people. L8r does not belong on a website.

Resize Images

Please learn how to resize an image. There are so many free software packages out there that you can use to do this on your own computer. If you don’t want to install the software go and use one of the new online photo editing sites, like Snipshot. There is no excuse any more not to resize your images for your site. It saves on bandwidth, makes your pages easier and faster to load, and does not annoy people.

Splash Pages

Why do designers still make these? If I am at your site I am looking for information, I don’t want to look at some nice pretty picture or flash animation. I see a splash page and I leave.

Bad HTML

This is just me, I know that most people could care less about how people code their websites, but there are reasons why you are not suppose to use font tags, frames and tables (for layout that is) anymore.

Listen to the Professional

You are paying someone to create your website. They spend countless hours learning what works and what does not work on the Internet. Listen to them when they tell you a splash page, or animated graphics are a bad idea. Don’t tell them how to do their job. Designers and web programmers, listen to your clients. They know their business. It is our job to help them do what they do best, run their business.

If you want to see an abundance of these annoying things, head on over to MySpace. It will only take a minimum of five profile views to find every one of these annoyances.

Did I miss any annoyances? What website annoyances would you add to the list?