Let’s Mix Things Up: A Few Tips On How to Combine Typefaces Successfully for Your Website	2.0/5.0 (1 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
Charlie Brown September 15, 2015

One is (almost) never enough!

Choosing the perfect typeface for your web design project can be a long and arduous task. It can make a grown web designer cry when you finally have the typeface of your dreams. However, for most web design projects, this is just the tip of the iceberg. One typeface is quite never enough. In order to create more visual interest and help the user follow the flow of information in order of priority, you will need to combine several typefaces.

That is no easy task! Having decided the ‘main’ typeface, you will need to get several others that complement the main and each other without creating a look of clashing collages that takes away from the message on the page. This is difficult for most people, from newbie to website design Geelong master, so don’t beat yourself up too much if you are struggling. It takes a combination of experience and creative instinct to develop the best combination, so here are a few tips on how to go about this.

Choosing the practical font

Remember what we called the ‘main’ typeface? It is also called the practical font. This is often as dictated by the individual or company whose website you are building so it is really a no-brainer. In cases where the font specification isn’t given, the limitations of space on the page may limit your choices to fonts that are legible in smaller sizes.

Should you have carte blanche as far as space and font type, the best thing to do is pick a font for the body text that is legible e.g. Cabin, Droid Sans. The focus here is practicality not pretty. Also, pick what you are comfortable with in order to move on with the design project.

Choosing the personality font

This is where the creativity kicks in. Your aim is to select a typeface that speaks to the personality of the website while blending in seamlessly with the practical font. There are a few things to keep in mind at this point:

• Contrast

In order to combine two fonts, they should be neither too different nor too similar. Typefaces that look too similar clash, creating this jarring effect in your mind when trying to distinguish or rank the content. If they are too different, the end result looks like a smorgasbord of typefaces that literally assaults the eyes.

A happy medium exists among the various typefaces and you should find it in order to create true contrast.

• Weight

Each typeface has a different weight even without making any alterations to it. It is important to understand this when trying to put two or more of them together in one page. The trick here, again, is balance. Don’t put two typefaces together that have extreme differences unless you will make up for them in structure and style.

• Companion fonts

When in doubt, go for the companion fonts of your ‘main’ typeface. For instance, Droid Sans’ companion font is Droid Serif. Combining these two will assure you of that balance in contrast we talked about earlier and prevent any jarring clashes. This is an excellent option if you are still honing your skills.

• History

There are times when the choice of practical and personality fonts has already in place for you historically. If the subject you are writing about has been discussed before, rather the reinventing the wheel, you can simply use what was used in those historical documents. This is especially important if the subject matter is set in a rather specific time in history. It even makes the content a little more interesting to read.

• Style

The style of a particular typeface has huge implications on its reception by the reader. Using italics, regular styles, bolding and/or underlining can change the perception of the article or document significantly, as would drop shadows, outlines and other such decorations.

These are great when using different typefaces within a single type family. They help to create the balanced contrast and variations that facilitate effective communication.

• Classification

As mentioned before, grouping of typefaces is in families based on their general appearance, mood and structure. You may choose typefaces from different classifications for a proper contrast or from within the same classification but different sub-classes which also provides the contrast. Feel free to try out differ ent combinations to see the effect for yourself.

• Mood

Typefaces convey different moods by virtue of their structure. For instance, Duality creates a casual mood while Droid Serif is rather modern. There are a lot of moods created by the different typefaces and your choice will be based on the kind of mood you’re trying to create.

Make sure your font matches the mood of your content and your website, as well as matching the moods of the other fonts.

• Structure

Structure has to do with how the letters are shaped. Some are bold, chunky and ‘in your face’, others are casual, almost demure, while others are classic, graceful, maybe even regal. This ties in with the mood so that the choice depends on the project and the content.

Again, they shouldn’t be too similar or too different, or else there will be that jarring effect we talked about earlier. It is advisable to put the two fonts together to see how they match and differ before making your final decision.

• Hierarchy

Hierarchy facilitates the flow of information to the reader. Think of a newspaper: the headlines are big and bold; the sub-titles are smaller but stand out when compared to the body text. It is like a navigation system for the readers eyes.

The same applies to your content. It should have a deliberate balance of scale among the typefaces where the top-most heading is the largest and they all get smaller as the article progresses. Weight and style play a role here as well in creating contrast and an interesting look.

Conclusion:

The approach to choosing font should not be one of dread at the thousands of options and the limited time. The principles discussed here should narrow down your options sufficiently to enable you to have a little fun while creating that website. So relax and go create an awesome website.