Web Design Tips, Tutorials & More!

Combining Fonts

Typography and the art of combining various fonts is the not the easiest art to master. There are several different aspects you need to learn and with more and more fonts becoming available the art is becoming more difficult and almost a full time job.

You need to learn which you can combine and, which are just don’t jell at all. Some of this you can learn by rote but a lot is to be subject to artistic license.

Many times you will be restricted by what is allowable by web servers. The amount of fonts that are compatible on the various web servers in a cross server manner is one of the things that you need to learn early.  Once you have learned, which can be used, and they aren’t all that many although more than there were, you are in the know of what your basic tools of which you can use are.  Outlandish unusual fonts really can only be used in a form of photos, or they will distort and go out of shape on the website you have made.

Your group of fonts will consist of the basics most of which can be found in Douglas Bonneville’s group of fonts. This is a basic group of 19 fonts. These you can use in various combinations available in the cheat sheet he provides.

If you are looking at Helvetica combinations you will find a good selection in the Font Shop.

Learning to balance the various fonts to make in pairs is something of an art. Some look totally wrong together while sometimes unexpected combinations can work extremely. Basically, it takes time to look at them and mix and match them and work out as matching to the eye.

I would suggest you start a collection of clippings of various fonts you like in Magazines and make a note of the name and sort and keep them in a clipping dictionary.  By using a collection like this you will have a variety you can show to any client who might want a particular looking font or might have chosen that font for their company logo, which already exists.

It’s important to remember if you are making a website for an existing firm the brand needs to move forward. You wouldn’t be recreating a brand you would be building on the brand, and the logo would move forward and not change.

Often in the case of a logo it can be in the form you wouldn’t normally use on the web. The use of type in print and the use of type on the web can be very different as the amount of type faces used in a magazine or a letterhead isn’t as restrictive as that of a search engine. When this happens, we usually revert to using a replacement with a .jpg or a .png if it is in a solid text form.  This means it won’t be distorted by the replacement of the nearest type by a search engine. This replacement can throw out the whole design, and this is something we need to avoid whenever possible.


Leave a Reply