How Important is Your Font?

In a single word, VERY. You see, there are many aspects of great website design: layout, color, usability…but what good are they if you can’t read what’s on the page? Let me explain the do’s and don’ts of proper font utilization.

Behind all great websites lies an effective typeface. In many cases it can make or break your design. In fact, an article written in 2006 shows that at the time, Web Design is 95% Typography. Think about it, most of what you see on the World Wide Web is written right? So, why not place some importance on how that writing looks?

I want to be clear, I’m not speaking strictly about the font of this blog or your “About Us” page. There are far more important elements to consider. But, since the Body of your website makes up the vast majority, let’s start there and see what else we can discover.

Body

Given that this is the largest part of your website, it’s pretty important. Though, let’s face it, not everyone will read every word in great detail. Surprisingly, nearly 40% of all websites never set a “standard” font for their website to use. What’s this mean? Well, say you are building a web page and like the way a certain serif font looks in your body copy but you don’t actually specify this font in your stylesheets. As visitors browse your page what they see is actually left to the interpretation of their web browser. If their browser doesn’t know what Bookman Old Style looks like, it will likely replace it with a familiar alternative like Times New Roman. While that may seem okay, the results might not always be what you intended them to be.

Headings

These are arguably the most important type elements on your page because unlike your body content, these are more likely to grab the viewer’s attention. In fact, studies show that majority of users will skim a page looking for a heading that interests them THEN read the corresponding content.

Backgrounds

Wait…what? Yep, that’s right, backgrounds are important too. It all boils down to contrast, not necessarily what the background is exactly. You want your text to stand out and not blend in or be hard to read. However, this isn’t 1996 anymore. Gone are the days of black on white arrangements. A good goal is to find a color combination that’s easy on the eyes and doesnt become too distracting for your visitors.

Font Size

There’s no one size fit’s all solution here, but typically you want to be able to differentiate your Headings from your Body text. That being said, the average size in pixels for body copy is about 14 to 16 pixels in size. That size provides you with large enough type to read comfortably, yet fit a decent amount of content onto a page. Going with that standard, you would want to keep your Headings to about 20 to 32 pixels depending on your design and font. Pixel Cloud Designs uses a Body typeface of Raleway at size 16px as a reference.

Other Thoughts

Don’t limit yourself to looking for fancy fonts and playing around with their sizes. You should also consider character length (how much text is on the screen at any point), line length (how many words should fit on a single line of text), and last but not least – Responsiveness. Believe it or not, there are still many sites out there that aren’t accounting for the astronomical number of mobile visitors. WordPress is a great responsive solution (depending on the theme used). However, text is not always responsive. I’ve seen my fair share of websites that properly scale for a mobile phone, but the text is so huge that it’s pretty unreadable. Congratulations, your design is ruined. Luckily, this is a pretty easy thing to address these days.

Bottom Line

When all is said and done, don’t get too hung up on all the technicalities involved. When it comes to great design, less is usually more, and a site that is easy to use and navigate will typically out perform something pretty but hard to use any day. Keep your navigation simple, your fonts clean, don’t get too wordy, and use images only where it makes sense and you’ll do just fine. What are your experiences? I’d love to hear them.