Design Theory: Upgrading Your Site With a Font Facelift

February 28th, 2012 by Search Influence Alumni

SEO tactics work behind the scenes, pulling the Google puppet strings with keywords and coding wizardry.  Congratulations!  Your website traffic has doubled, and your site has more hits than a barroom brawl! However, while getting visitors is great, keeping visitors is better — and a pleasing, non-eye-searing website design can be crucial when you’re trying to win a potential customer’s trust.

With each installment of SI Design Theory, we’ll talk about a few simple styling tricks that you can implement in order to make your website more inviting.  This week, we’ll be talking about fonts: the most basic element of any web design.

Difficulty Level: Easy

If Your Font Has the Word “Comic” In It, By Definition, No One Can Take You Seriously
Before we get into some of the finer points of typography, here is a list of fonts that will instantly date your site at about… 1998.
  • Comic Sans
  • Verdana
  • Courier New
  • Papyrus

Stay away!  Yes, a few of these fonts are web standard and browser friendly.  They’ve been around since the fetal stages of the Internet, but that’s probably not what you want your website to say (and the font, quite literally, says everything).

Here are just a few substitutes that are just as clean and readable as Arial Regular, Verdana, and Courier New:

Abadi, Gill, and ITC Kabel are fantastic at smaller sizes, and look great within body copy or as H1s (headers or subheaders).  Helvetica Neue, as the name implies, is a modern twist on the old designers’ standby (better in large sizes).  Arial MT Condensed, or almost any condensed, sans serif font, is a bold and eye catching choice for headlines.
Protip: You can use any licensed true type font on your website with this nifty CSS trick.


Minding the Gaps
When it comes to readability, spacing is everything.  Let’s take a look at Abadi MT Condensed Light, in its unstyled glory, with no attention paid to its default spacing:

Perfectly acceptable, but with a little spacing, we can make this much better:


Space between letters is called “tracking.”  Space between lines is called “leading,” or line height.  As a general rule, large fonts need tighter tracking and larger leading.  Small fonts need looser tracking and smaller leading.


If someone can come up with a snappy mnemonic device for remembering this, call me.  But for the rest of us: play with line height and letter spacing until your text reads comfortably.  You’ll also want to mind your margins.  Give your paragraphs plenty of room to breathe on all sides, top, bottom, left, and right.


And never forget!  Always justify (align) your text!

(Don’t) Paint It Black

We’ll talk about eye catching vs. eye searing colors in an upcoming post, but for now, a simple lesson: consider bringing your body copy down from stark black to a lighter shade of gray.  Use blacks sparingly to create emphasis where you need it.  As long as your grays are not too light, it will give a more pleasing and more modern look to your copy.


Fun With Fonts!  Drawing With Type

It’s true that images will attract the eye in a way that simple blocks of text cannot.  However, a well styled page doesn’t need to be bogged down with 100 stock photos in order to get your message across.  The following image was made entirely with type.



Try resizing punctuation for a conjunction that is both useful and attractive.  Bringing curling fonts together with tight tracking (as seen with P22 Zaner Three) can create unique borders and stylish separators.  Even webdings (remember those?) have their place, as seen here with Unca Pale.
P.S.  Never underestimate the impact one good drop cap.
Next time: Communicating with your visitors through color