DesignWebKit - Web Design Blog

Fonts that Kill Designs – Typography Mistakes to Avoid

by
November 4th, 2013   |   Web and Trends

If there’s one resource web designers have in abundance, it is fonts. We have more fonts available to us than any other designing resource. And just as their majestic amount wasn’t enough, most of them are absolutely free. No wonder beginning designers get bamboozled when it comes to selecting appropriate fonts for their designs.

Fonts that Kill Designs - Typography Mistakes to Avoid

Confusion never leads to achievement. So today we’ll eradicate the confusion and identify some of the common typography mistakes designers make in the font selection process. In the second part of the article, we will go through the methodology of selecting fonts.

The Basics

Typography Mistake #1: Not Knowing the Terminology

The skill of choosing the right font at the right place depends on the knowledge of typography you have. You need this knowledge to discern a great font from an ordinary font. Of course, you don’t have to go deep but understanding the basics of typography is essential for every designer in the business, whether you design websites of graphics.

Adobe has done a good job compiling essential typography terms that all designers should know. I recommend you check out that list.

Typography Mistake #2: Forgetting about Coherence and Unity

You must have heard it before, but let’s recap: the very first rule of typography is to create concord and contrast, and avoid conflict.

  • Concord. Concordance in fonts is mostly mild or formal. Usually what happens is that you use one font only. You change the font size, weight (bold, light) and styles (italics, normal) but you don’t shift from one font to another. Concordance is mostly used for large informative blocks of text on the web.
  • Contrast. Contrast works on the famous rule of science, opposites attract. In contrast, you mix fonts that complement each other. The oldest trick in the book to create contrast is to use a serif font with a sans serif font (there’s a lot more to creating contrast, we’ll get to that in a bit). Use of contrast is typically high in print media.
  • Conflict. In simple words, conflict occurs when you use two different fonts that are similar to each other. For instance, Times New Roman and Georgia are both serif fonts and visually quite similar, but of course not exactly the same. If you use them both in a design, it won’t impress anyone.

Even if you do find fonts that go well with each other, things can still go wrong due to lack of coherence and unity. Creating coherence between fonts require you to use the same colors and effects on the title as well as the taglines.

Here’s an example.

Fonts that Kill Designs - Typography Mistakes to Avoid

You can see the first tagline (from the creators of Planet Earth) matches with the title (LIFE); even though there’s a big difference of point size, font color and weight are almost identical. Same goes for the phase-two of the design. Tagline (Sunday, March 21, 8PM) matches with the title (Discovery Channel). Even the line down under synchronizes beautifully with rest of the design. That’s coherence. That’s what you need to learn.
Mind you, this is not a typography based poster. This is just a design that is using fonts in proper manner.

Typography Mistake #3: Not Paying Attention to Kerning

If you think hotshot software like Adobe Illustrator or Photoshop will take care of possible kerning issues… think again!

Kerning in Text. Typography Mistake to Avoid

All good designers manually kern text. Graphic designers use Alt (options key on MAC) + Arrow Keys to kern text. Web designers use tools like kern.js to control kerning on web text.

Typography Mistake #4: Inappropriate Use of Fonts

Each font has its own characteristics. Some are uniquely stylish while some others are regularly useful. Your job is to find balance between the two. Also, your job is using the right font at the right place. A good font used at the wrong place leads to a design-disaster. Let’s see this example:

Typography Mistakes - Inappropriate Use of Fonts

Seriously? This is the font they chose?? This font could be wonderful for aunt Martha’s knitting club, but Harley Davidson riding club… seriously?

Selecting the right font for the job

The bad news here is that there is no set formula for choosing the most accurate font for a particular place. But the good news is that you don’t really need a formula. Just commonsense is enough. One guy who has that commonsense (not to mention incredible amount of design experience) is Julian Hansen. He designed a cool infographic/flowchart for making the selection process of a typeface easy. Below is the thumbnail, be sure to click it.

Choose a Typeface - Infographic. Avoid Typography Mistakes

Common Font Types

There are plenty of classifications for fonts. I’m describing the most essential ones here; these are the ones that you absolutely need to be familiar with to do well in fonts. For a full list of classifications, please check out Typedia’s type classifications.

Old Style Fonts

Sometimes referred as ‘venetian’, old style fonts consist of calligraphy styled typefaces. These are the typefaces of pre-renaissance period. In such fonts, the stroke size varies; you get thick and thin ligature in the same letter.

Old style fonts work great when you are trying to create a vintage, classic or traditional effect. There are some examples of ols style fonts.

Palatino

Fonts that Kill Designs - Typography Mistakes to Avoid

Garamond

Fonts that Kill Designs - Typography Mistakes to Avoid

Bembo

Fonts that Kill Designs - Typography Mistakes to Avoid

Modern Fonts

As the name suggests, these are the typefaces of post-renaissance period. Actually, modern fonts include two subcategories, transitional (17th to 18th century) and modern (late 18th century to 21st century). When readability and simplicity became more important than style and calligraphy, the shift from old style to modern took place. Designers focused on geometric shapes and patterned designing to create the letterforms of the future.

Modern fonts are bold and dynamic, however, they might seem a little… Spice less.

Baskerville (transitional period font)

Fonts that Kill Designs - Typography Mistakes to Avoid

Bodoni

Fonts that Kill Designs - Typography Mistakes to Avoid

Didot

Fonts that Kill Designs - Typography Mistakes to Avoid

Geometric Fonts

All geometric fonts are sans-serif fonts. That is because these fonts (as the name goes) are based on strict geometric forms. Serifs cannot be accommodated here.

These fonts are usually designed on the “less is more” principle and they work fittingly with minimalism designs.

These are the most modern, readable and user-friendly fonts out there. But they can also seem boring and impersonal; so use them with caution.

Univers

Fonts that Kill Designs - Typography Mistakes to Avoid

Futura

Fonts that Kill Designs - Typography Mistakes to Avoid

Avant Garde

Fonts that Kill Designs - Typography Mistakes to Avoid

Humanist Fonts

These sans serif fonts are derived from handwriting, i.e. humans. Geometric fonts focus totally on mechanical style of typefaces but humanist focus on details. Of course, these details come at a cost. These fonts compromise a little bit on consistency. In humanist fonts, stroke size varies so they look classy and personal.

Humanist fonts contain the blend of human touch and modern geometrically correct aesthetics.

Optima

Fonts that Kill Designs - Typography Mistakes to Avoid

Frutiger

Fonts that Kill Designs - Typography Mistakes to Avoid

Myriad

Fonts that Kill Designs - Typography Mistakes to Avoid

Slab Serifs Fonts

Slab Serifs are pretty much like humanist fonts but they contain serif feet. The use of these fonts is a little tricky. They can be sophisticated and they can be rugged. They can be handsome and they can be gawky.

To be honest, Slab Serifs have such a huge variety that they shouldn’t even be categorized as one type of fonts, but they are categorized this way since they are distinct with their serif shoes.

Clarendon

Fonts that Kill Designs - Typography Mistakes to Avoid

Lubalin Graph

Fonts that Kill Designs - Typography Mistakes to Avoid

Rockwell

Fonts that Kill Designs - Typography Mistakes to Avoid

Cross Match

Do you need to mix and match fonts? How much? And why?? Sometimes, questions like these don’t have a one clear fits-at-all-places kind of an answer, but let’s try to decode the mystery.

Do you need to pair up fonts? Well, sometimes it’s a good way to add spice into any design. For instance, a Chinese restaurant’s menu card would lack something important if it doesn’t has the restaurant’s name written in a font like Chinese Takeaway.

Chinese Takeaway Font

Of course, you can’t put the price list and names of the dishes in such a font. For them you would use a font that is easily readable and looks sophisticated.

Marrying the fonts

Pairing up fonts is a good idea for print media in particular and all kinds of media in general. You choose one font for headings and one for text. These fonts have to work like a couple in a marriage. One should complement the other.

You have to be aware of the characteristics of both fonts, they must contrast to create good results: a bit like a good marriage. In a healthy marital life, if one person is a good speaker, the other should be a good listener. Only then they will complement each other. Fonts should complement in the same manner. If the font for headings is bold and full of impact, the font for content should be easy on the eyes. If the font for headings is a serif font, the content should be written in sans font.

Usually, coupling fonts works the best, but sometimes, two are just not enough:

In principle, you should not make any variations with fonts… or do it a whole lot. This ‘wanted’ poster above is an example of a lot of variation.

‘wanted’ poster

Even if you are willing to take the risk and going for a lot of variations, note it down that not all fonts look good on large amount. For instance, horror fonts or cursive tattoo fonts look amazing when used sparingly. Use them without restraint and all hell breaks loose.

Using Fonts in Print Media

Print media gives you the liberty of doing more than you can do on the web. And that’s why it is better to work in font combinations. Mind you, consistency is the most important factor, but while maintaining that, you should try to make font combinations. Because you can!

Combinations are great, but you should also have some safe-exits. If you ever get stuck (and that will happen), you should have a way out. My favorite sans rescue fonts are: Myriad, Akzidenz Grotesk and Interstate. In serifs: Mercury and Perpetua.

The easiest combination is using condensed serif fonts for headings, because they grab attention. Sans fonts are good for content. Be aware that condensed serif rule doesn’t apply on brochures or leaflets, but it applies on posters, billboards, newspaper headlines, etc. etc. etc.

Before moving on to next section, I wanted to say that some traditional newspapers still use serif fonts for content. That’s not a good practice and you should not follow them. They are doing it out of plain traditionalism, you should rather go for readability.

Using Fonts in Web

I’m strictly against making combos on web. You have to code more, you have to check multiple fonts on cross-browser testing, the site takes more time loading… none of that is an advantage. But if there’s a pressing need and you have to have a combo, I suggest stay within google fonts library. An example combo can be Droid sans and Droid serif.

Droid sans and Droid serif - Google Fonts

On web, maintaining readability is a little difficult compared to print media. Screen reading is not as easy as reading on paper.
Probably that’s the reason UK government set the following guidelines in Illustrated Handbook for Web Management Teams: “Use only clear, commonly used fonts. Avoid the use of small text. Users should have the ability to scale fonts.”

UK government does not use serif fonts on its websites. And nor does many news websites. This is done for enhancing readability and page load time.
Another thing designers always keep in mind is that body text must always be on flat background; preferably, black text on white background (as you are seeing here on DesignWebKit).

Using only one font, on flat background… sounds like a very restrictive way of designing, doesn’t it? Actually it is not! 90% of the times you can create wonders just by varying weights and sizes. Here’s an example:

One Font in White Background

In this advertisement, the (nearly) invisible text is written in 300 weight value, and rest of everything is in weight value of 700. (you know CSS, right?)
Make sure that your body font has good kerning because kern.js and such jQuery plugins don’t really help on body text. So when you choose a font, make sure to check out kerning.

Conclusion

Today we only talked about using fonts. If you feel you have a thing for letters, words, fonts and typography, you should think about making typography your specialty. A good typographer is always in demand.

We have talked about many principles and rules of using fonts. They all work but to tell you the truth, you are allowed to break the rules. In fact, you are encouraged to break the rules.

Designing is like playing the piano. First you learn the rules, but once you get a grasp over the instrument, you should forget the rules and play straight from your heart. You should treat typography in the say way.

What would happen if you break these typography rules… well, there’s only one way to find out!

All the best!

About the author
Ayaz Malik

Ayaz Malik is a designer, web developer and an IT enthusiast. He also has a blog called http://www.designzzz.com.

NEWSLETTER

SIGN UP
Follow us
Write For Us
Join DesignWebKit as a guest writer today! Write a design related article or tutorial and build the reputation of an expert in your field.
TALK TO US