Matthew Watts

Have a website that just isn’t pulling in the conversions you know it can? How about its SERP rankings? If you’ve done all you can to increase them but just can’t, then chances are you aren’t optimizing your website effectively.

Several days ago, someone posted on a WickedFire case study about how of little importance on-site optimization is. In my reply I was discussing how it should be high on your priority list because it not only compounds the effectiveness of your off-site optimization results, but increases your conversion rates if done right.

After I posted my reply, I got to thinking about one of my last comments in the reply.

That’s just a simple example, there’s so much you can do code-wise too that isn’t even mentioned by generic resources at WaFo or SEOMoz. I’m just saying – on-site should be considered 70% or more of your focus, because you’re focusing on what you can control to improve the quality of your site.

Like I said, volume in visits are nice, but what’s better: converting at 10% of 100 visits to get 10 quality leads, or 1% of 1000 visits to get 10 quality leads? The same is true for your quality perception with the search engines. It’s much easier for a quality site to go up to 1000 visit’s that’s quality than it is a shitty site [that's not].

I was thinking about something totally different than web typography, but it came up again when I had to write this for a class assignment. So, I figured I’d expose some next level SEO tactics (We’ll call it part of VooDoo SEO since it’s so sneaky you increase your rankings and conversions at the same time, and I just wanted a cool name that will be catchy and end up being ripped and put into a GURU product).

Using Web Typography to Increase Conversions

Now, to the reason you’re reading this: how to use web typography to make you money.

I see many landing pages and websites use images for their special fonts. I also see content in boring blocks without much to make you want to take action. It feels like it just goes on and on forever. So, how can we fix this?

Principles For Using Typography Effectively

• Don’t use large blocks of text, break it into smaller chunks (no more than 5-6 lines)
• Vary font sizes and weights to emphasize sections of content
• Vary font sizes and weights to emphasize points

Now, the above three points seem pretty basic, but you would be surprised at how many people either misuse them or are too lazy to use them at all. Now, without spending a lot of time making custom examples, here’s a great use of typography to lead a person’s eye to the call to action.

Use of Typography to guide the eye to the Register button

Amped Web makes great use of Typography. Immediately when you get on their site, your eye wants to shift right to the Register Now! button. They do this by having different fonts for the headings, different sizes for the sections, and different weights (bold and drop-shadow). The use of white space in conjunction with this makes the call to action stand out well.

Now, aside from that, you’ll notice that their header logo guides the eye not only to the call to action, but to the content as well. They use a very crisp font  that lets the eye jump to the useful content. It’s all separated well by white space so it doesn’t overwhelm the visitor. With less to distract visitors, conversions increase.

Here’s what you see when you click on the register button:

Typography and White Space Leading Eye to Submit

This site uses a lot JavaScript to move the content around. When you click the big Register Now! button, the Register form slides out. Now, this servers a two main purposes: waking the visitor up and keeping them engaged from now having to sit through a page load, and it also makes them focus on the call to action.

Since they are now engaged again and looking at the content, their eyes are following the call to action. If you look at the typography here, you’ll see that again; white space is used to help curve the visitor’s attention to the submit button. It’s easy and uncluttered. The visitor doesn’t have to think.

Using Typography to Increase On-Site SEO

If you haven’t converted yet to wanting to try out re-optimizing your pages with better Typography, you will soon. You might be asking, “How do search engines factor in what kind of font I use?” Sit tight and I’ll explain the logic.

Sticking with the Amped Web example (Because I’m lazy and it fits both sections well), they make a great use of CSS and Typography to not only increase the user experience, but the search engine experience as well. Search Engine’s only see text, so when you increase the amount of meaningful text on the page, they get happy since they can evaluate that.

Amped Web only uses 2 images on the page; the speakers and the people repeating at the bottom. Now, you’re scratching your head since you thought the Amped and sub-title text were part of the image, didn’t you? Sorry, they aren’t. They created their own custom font and used CSS to embed it into the page, then manipulated the font with more CSS.

Stop and Consider The Impact of This

If you reduce the amount of images on your page and replace the meaningful parts with text, you have more control over what the SEs can give your page authority for. Not only this, but each image requires 4 calls to the server. So, reducing the use of them allows you to handle all that extra traffic you’re about to get, as well as reducing page load times, which SEs also give you a leg up for. Google seems to really like pages loading in less than 0.6 seconds.

There’s a lot of other applications for this, I’m just tossing this out there for you to soak in.

What are your thoughts?

Bookmark It

Hide Sites