10 Font Facts: Why Typography is a Powerful Tool in Inbound Marketing

By: | May 25th, 2012

Are you an Arial or a Times New Roman type of person? You surely have a favorite font when you write – we all do. Is there a font type you would never, ever use? There probably is. The thing is, without even noticing, we’re surrounded by fonts all the time. They’re everywhere: on our cereal box, in the morning newspaper, in the instructions for putting together our new Ikea table (although, granted, no amount of words could help when you’re missing a tiny but very important screw).

We use and choose fonts daily. In a wider context, fonts form an important part of the art of typography, which is the general name for the technique of arranging letters to make them visible. Typography takes into consideration line length, line spacing, letter size, letter spacing and of course, the selection of typefaces, otherwise known as fonts.

Fonts and Typography

Why Typography Matters for Inbound Marketing

You may not realize this, but when designing a website for your company or writing an e-book about your product, typography is major importance. Why so? Well, the fonts you choose create a certain look and feel for your content, and these look and feel determine how your product or service are communicated to prospective clients.

Not only that: fonts can actually affect the way we think and act. In a series of experiments that took place in 2008, psychology researchers Norbert Schwartz and Hyunjin Song made some very surprising discoveries. In one of their experiments, two groups of people were given printed exercise instructions. One group received the instructions in a simple, readable font (Arial) and the other group received identical instructions in a fancy, hard-to-read font. When participants were asked to assess the time it would take them to complete the task, the ones who got the fancy font estimated it would take them twice as long (15 minutes) than the ones who got the simple font (8 minutes).

The bottom line is this: fonts affect judgment. Judgment affects action. If you want people to use your product or service – your fonts better be effective.

Following are top ten tips about fonts that are going to add some shine into your web design. Next time you are having a hard time choosing just the right font for your needs, don’t forget to look at this list and take these things into consideration!

#1 You are Not Limited in Your Choice of Fonts for Web Design

You may have heard that the types of SEO-friendly fonts that can be used in web design are quite limited. This used to be true in the past: when selecting a font for your website, you had to be sure that the computer of that website’s user also has that font loaded so that the page would show well. Therefore, website designers were limited to the very few fonts that are available on anyone’s computer, such as Arial, Times New Roman, Verdana and so on.

The old way to go around this was to create an image of your desired font and then insert it into the web page. Alas, this was disastrous for SEO – since Google can’t read text from images, websites using this method were destined to go down, down, down in their rankings.

However, thanks to some web updates and great software you can now use any font you choose for your web design and be certain it will not sabotage your SEO:

You Can Use CSS (Cascading Style Sheets)

A style sheet is a computer language used to aid in the presentation of structured documents. CSS is a style sheet language that is used most commonly for styling web pages written in HTML, XHTML and any other kind of XML document. CSS3 is one of the latest CSS standards; it allows you greater freedom with styles of design for web. CSS3 lets you whatever font you like. Anxious to try this out? Go here. For a more detailed introduction to CSS3, read this tutorial. For information about CSS3 modules, their statuses, updates and examples, check out css3.info.

Or Cufon

Another way to get creative with your fonts is to use Cufon, a JavaScript-based service that can convert your text to the font of your choice and still keep it readable in the code of the page. Cufon has won great popularity due to its speed, ease of use and its compatibility with most browsers. Here are some instructions to get you started.

Typekit is Another Similar Service

Typekit, a service currently owned by Adobe, also allows you to embed non-standard fonts into web documents. The service offers a subscription-based library of thousands of high quality fonts, many of which are free. However, Typekit also offers paid subscriptions for which you get a greater or full access to the library (depending on the price) as well as advanced options and a greater number of fonts per website (the free option allows you to use 2 fonts per site). Here’s a video tutorial for Typekit; have fun!

Then There’s Also Google Font API

Basically, Google Font API enables you to easily integrate your desired font, imported from the Google fonts directory, into your web page. With Google Font API, you can make your font show even in non CSS3-friendly browsers like Internet explorer. In addition, it offers a sizable collection of high-quality fonts you can use in your web pages, all SEO-friendly, easy to use and compatible with most browsers. Here’s a guide, and here’s a taste of the fun (I wonder who thought up that strange sentence. Hmm):

Google Web Fonts

#2 But… Don’t Use Too Many Custom Fonts on the Same Page

A word of advice: while it is greatly encouraged you get crazy creative with the endless font choices mentioned above, don’t let your enthusiasm take over and use 10 different types of fonts on the same page. This may cause a visual overload and may distract the visitors from the message you are trying to get across. Try keeping the fancy, artistic fonts to your headings and calls to action and keep body texts in simple, very readable fonts.

The New Yorker

The New Yorker is widely known for its spectacular use of typography.

Font Overload

Font overload. Help!!! (from metatasks.com)

#3 Match Your Audience

Whatever it is you trying to spread the word about, you probably have a specific target audience; and the font types you use should reflect this. Remember, fonts can be very powerful in setting the tone and atmosphere of your content. Fonts, as a part of your web design, can either keep your readers engaged or make them bored and leave the page. When choosing what fonts to use, the, a good rule is to think about your business and visualize your target audience. Are they young, sophisticated hi-tech entrepreneurs? Sassy teenage girls? Snobbish, well-read intellectuals? Test out different fonts to see which fits best with the mood you want to set. Also, a good idea is to check out similar websites and see what fonts they have used.

Here’s a great example of good font choice by a vintage fashion blog lulusvintage.com:

Lulus Vintage

#4 Size does Matter…

…at least when it comes to the fonts on your web page. I imagine that you want people to be able to read the content on your site. Therefore, it is advisable not to use less than 10 point (10 px / 10 pixels) in the main bodies of text of your content. However, in the case that your site is also visited by the elderly and the short-sighted, 12 point should be your minimum. Some say even this isn’t enough, and statements like ’14 is the new 12′ and even ’16 is the new 12′ are being thrown around quite a lot lately. In any case, remember that the font sizes you choose should fit the hierarchy of your text:  the body text should be at least 10- or 12-point. Main heading should be 14-, 16-, or 18-point. Subheadings should be somewhere in the middle – say, 12- or 14-point. For image captions, smaller sizes are recommended: 8-, 9-, or 10-point.

Here’s an interesting post that explains why you shouldn’t anything less than 16 pixels font for your body text. Do you agree?

#5 Be Consistent

This tip relates to the ‘don’t use too many fonts tip’ but takes it one step further. Not only you shouldn’t use too many different fonts on your website; but you should also be consistent with the fonts you use. If you started off by using a certain font for headings and another font for body text, don’t go changing them in the middle. This will make you web page look unprofessional, cluttered and confusing. It is also very likely that it will distract the users from the content. Consistence equals clarity, and you want your readers to get a clear message, right?

So please, be consistent! You do not want your web page to end up looking like this:

Terrible Use Of Fonts

From gomediazine.com

#6 Serifs for Headers, Sans Serifs for Body Text? Yes, but Not Always

What’s up with those serifs and why do they keep coming up everywhere? You may remember that I’ve also mentioned serifs and sans-serifs in the previous post. Well, strangely enough, these annoying little serifs matter enormously when it comes to legibility, and using them well is a basic skill for any online writer or web designer. Since sans-serif fonts (think Arial) are very clear legible even in small size, it is generally recommended to use the for the body text.  Serif fonts (think Times New Roman) make great and fancy headers, but may appear slightly less clear as they grow smaller. However, if the body text is longer than 10 lines, it is sometimes advisable to use serif fonts, as their curves and shapes make the text easier to follow than the uniformity and simplicity of sans serifs. Another important tip is not to switch between serif and sans serif fonts too many times on a single web page. This hurts readability and looks inconsistent.

#7 Bold, Italic or Underline? How to Use Basic Styling Correctly

Have you ever wondered when you should use italics? Or whether a whole sentence in bold is overdoing it?

Here are a few basic rules to help you with your basic styling:

  • Italics are great for emphasis, and most often used for quotes, captions, key words and titles. Don’t use them too much, though, because a large chunk of text in italics is just too annoying to read.
  • Bold is also used for emphasis, but mostly for key words, headings, sub-headings. Avoid using bold for whole paragraphs – use it sparingly or else it loses its effect.
  • Underline is tricky on the web, because when used in the body text, underlined words can be mistaken for links. Try keeping it to headings, sub headings or just avoid it completely.

#8 Be Careful with your CAPS LOCK Key

Have you come across a whole sentence written in all caps (capital letters)? SERIOUSLY ANNOYING, RIGHT? IT FEELS LIKE SOME IS SHOUTING AT YOU! Also, it is harder to read. Some fonts are downright illegible when written in all caps. All caps can be considered in the case of a very short headline, consisting of 1-2 words; but that basically it. Another reason not to use all caps is that it is hard to edit them out if you want to redesign your website.

#9 Avoid Comic Sans at all Costs

Comic Sans Font

From dailytypography.com

Many words have been written about the notorious Comic Sans font; most of them, hateful. Believe it or not, there’s a whole website dedicated solely to the goal of banning comic sans from our lives, forever. Why do people have such strong, negative feelings about this font? Mostly, it’s due to overexposure and misuse. Particularly, when this playful, childish font was (and still is, sometimes) used for formal or serious subjects. For example, grave markers; formal job applications; contracts; warning signs; etc.

One of the many inappropriate uses of Comic Sans:

Comic Sans Inappropriate Use

From flickr.com

If you wish to better understand why you hate comic sans, here’s a very detailed explanation. There are several other iconic, well-known and overly-used fonts you should try avoid using; read about them here.

#10 Use Awesome Fonts! And Let Us Help You with That

Well, you didn’t expect us to make you read this long post about fonts without giving you some candy in the end, right?

If you want your online content to be awesome and stand out, you should definitely devote some of your time to search for unique fonts that can better convey your message and make appear original and innovative. Here are several resources where you can find a ton of great fonts:

What are your favorite fonts?

If you want your website and other online content to ‘sell’ you effectively, take great care in your choice of fonts; and do some research. Look at websites similar to yours; check out font libraries and directories; keep up-to-date on the latest fonts. Remember: typography matters.

Do you have some font and typography tips you want to share with us? What are your least favorite fonts? Do you have some more great sources for cool fonts? Let us know!

Dafna Ben-Yehoshua Google+

A biologist turned content writer who dances lindy hop for fun. Specializes in multi-tasking and never getting enough sleep. An expert on cats, dark chocolate, and how prevent cats from eating her chocolate.

One thought on “10 Font Facts: Why Typography is a Powerful Tool in Inbound Marketing”

  1. Warning: mysql_query(): Access denied for user ''@'localhost' (using password: NO) in /home/yoavmatchulsky/webapps/servula_en/wp-content/plugins/comment-rating/comment-rating.php on line 219

    Warning: mysql_query(): A link to the server could not be established in /home/yoavmatchulsky/webapps/servula_en/wp-content/plugins/comment-rating/comment-rating.php on line 219

    Warning: mysql_query(): Access denied for user ''@'localhost' (using password: NO) in /home/yoavmatchulsky/webapps/servula_en/wp-content/plugins/comment-rating/comment-rating.php on line 226

    Warning: mysql_query(): A link to the server could not be established in /home/yoavmatchulsky/webapps/servula_en/wp-content/plugins/comment-rating/comment-rating.php on line 226
    class="comment even thread-even depth-1" id="comment-195">
    ck says:

    Nice post :) I still like most the old good Georgia for headlines. It’s a great font for many cases in Webdesign.

    Thumb up 0 Thumb down 0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>