If you enjoy a challenge, pairing fonts is up there with the best of them. The challenge is not in selecting two or more fonts that work well; it is in the selection of two that are compatible so that you accomplish your typographic aims. Any more than two fonts can be the recipe for a headache that has come to stay like an over welcome relative, but stunning designs be still achieved with impressive results.
We’ve put together a few simple ingredients to get you started with font pairing for the web. You’ll be pleased to know that typography has been around since you were no bigger than a minute and the rules and formulas are now well established. Now there are resources to assist, but you’ll find searching the net is liable to spill out all these different opinions, so we will organise the key principles into bite-sized pieces to make them clear and effortless. Once you’ve got them down pat, font pairing will become second nature.
How Many Fonts Should You Use?
Your aim is to maintain unity and variety when you’re selecting multiple fonts, and there are no rules to say how many you should and shouldn’t use on a page layout. But you need to keep the essentials in mind. Font population is a personal choice but using several might question your inner harmony not to mention your sanity. However, if you can pull it off, the results are rather striking. Nevertheless, the old rule of thumb applies; use fewer fonts, and your task is more straight forward. Fonts have different variants and weights which is the way to take advantage of an array of styles so long as they compliment each other. Think about the overall effect you’re trying to achieve. Fonts can sometimes clash.
Contrast
Contrast is the definitive reason we create font pairings in the first place. You require easy reading transition and contrasting fonts with headings and body copy. This allows your readers to distinguish between the paragraphs, but it also makes the text visually attractive and assists in keeping your reader’s attention. Contrast means fonts are different in appearance. It means weight; how bold or pale a font is. It means size and colour. The key is to make sure your chosen fonts contrast enough in this area.
Keep it Simple with Complementary Fonts
Keeping key qualities similar between fonts is the key to successful font pairing; too much contrast and you’ve got the recipe for distraction and even irritation that might just have your reader clicking off your page. Aim to keep the font characteristics similar, i.e. mood height and family. Many fonts have personalities, and you can see their serious, casual, playful and elegant sides.
Think about the purpose you want to portray, choose fonts that match that purpose, and you’re closer to producing a successful design than if you were using the comical, happy and bubbly typeface for a business newsletter. Exploring distinctive fonts gives you the opportunity to become familiar with different trends. Opposites can sometimes actually balance each other very well. Pairing a strong font as a display with a conservative font balances the design. This is often used as a successful way to design brands and logos.
If your content is humorous, use a font that generates that emotional expression. Using Modak is fun, but you wouldn’t use Indie Flower for the body copy; the two clash and can destroy the delivery of even the best content so avoid contrasts that appear too opposite.
Avoid Conflict
Steer clear of conflict when combining typeface. You’re looking for contrast, not a battle between fonts. Look for those that share some of the above-mentioned qualities and perhaps similar proportions. Ensure the lower case letters all share the same height. This is known as “x-height”, and even if the overall appearance slightly differs, you’ll finish up with harmony, not a prickly unbalanced presentation.
Fonts don’t have to be similar to be incompatible, and typefaces that have comparable weights, proportions, and shapes are likely candidates for confusion. The way to avoid a distasteful contrast is to place two similar fonts side by side on your screen. Stand back and squint at the screen. You’ll know your design needs a tweak in contrast between your typeface choices if they look the same. Rely on instinct. You can always look at our services and contact us regarding this matter!
Visual Structure
Have a look at newspapers and magazines. These offer great examples of how the fonts are combined. Notice the spaces between headers, subheadings and body content. Notice also the captions and how each variable font compliments the other. Pay attention to the size, and notice how the boldness (also known as “weight” is in proportion with the spacing. Everything must appeal to the eye to draw in the reader and keep him reading.
You can decide what information deserves bold copy and what portion requires body copy. What information is essential to your reader? This is what will stand out for them. If you’re making an offer it needs a bold, ‘Look At Me’ font. Pair that with a complimentary font in the body copy to make it attractive to the eye. With that kind of approach, you are able to make your font choices accordingly.
Context
What is the context of your content and where is your design going to appear? Having clarity with placement will save the headache for another day. Your text needs to be at a size that is easily readable if it is for display purposes. Generous space between letters also deserves consideration. Mix your serifs and sans serifs, if you’re running out of time. Two fonts work very well together and are a sure fire way to a successful design.
Want to get it right? Practice!
Practice is fun. Combine fonts on your own. It’s going to involve a lot of trial and error but taking risks is part of the journey to success. When you bear in mind, there’s no foolproof formula for finding the perfect font combination you’ll be at liberty to take constructive risks.
And if the font choices are still too hard or you just don’t have the time, join some of the savvy users.
Take a look at this article to know more about the future of web design!
our work
