Background Image Skip to content

Focusing on Fonts

Over the past few years, it’s been fun to watch the web turn from a medium that used just a few basic fonts into one with a plethora of options. It has led to a more exciting experience for both web designers and website owners.

Back in the day, we were shackled with the lowly few fonts that were considered universal: Arial/Helvetica, Courier, Georgia, Times New Roman and Verdana. I can still remember the excitement when Verdana arrived, as it was made specifically for the web by Microsoft.

I can’t tell you how many meetings with clients I went through and had to explain that the content of their website pretty much had to be one of those lame, generic fonts. Anything that used a different font was either not going to work on a large percentage of systems or would have to be made into a graphic. Thankfully, that all has changed.

Here Come The Web Fonts

Google Web Fonts

Services like Google Web Fonts make it easy to add quality typefaces to your website.

These days, there are a whole lot of “web fonts” available. Some are free, like Google Web Fonts or Adobe Edge Web Fonts, among others.

I’ve used Google Web Fonts for a while now and have really been happy with their ever-growing selection of free, open-source fonts. As a designer, I have the option to use the fonts as either stored on my client’s server, or remotely hosted on Google’s massive network of servers. Either way, the experience has been a good one.

Another nice touch is that Google will let you download any and all of the fonts in their collection for use on your computer. So, if you decide to use one of their fonts for your website, you also have the ability to use it for your print materials as well.

Commercial Options
Ok, so perhaps the free options don’t have the exact font you want to use. The good news is, if you’re willing to pay for use of a font on your website, you will most likely discover the font you want to use (or a similar one) is available from a commercial retailer.

Adobe’s Typekit is a nice service that currently has almost 900 fonts to choose from. They price fonts for yearly use, depending on how much traffic your website generates.

While Adobe has great name recognition, perhaps the best place to find web fonts is Fonts.com. They claim to have more than 20,000 web fonts available for use. Again, they price fonts according to how much traffic your website receives. They do, however, offer monthly billing in addition to yearly.

Both services do offer limited free accounts, but those require you to place a “badge” on your website in exchange for use of their fonts.

Use Your Power Wisely

Designers will often get a chuckle (or break into a cold sweat) when clients realize all of the fonts that are now usable on the web. Like pizza and television, you can have too much of a good thing.

Usually, when I’m in the initial stage of designing a website, I’ll pick out a font or two that either matches my client’s other marketing materials or that I think will work nicely within the flow of their new site. Tweaks are made as necessary to suit the client’s taste.

On your font hunting adventures, just remember a few simple rules:

  1. Use no more than 2 or 3 custom fonts. Anything more than that tends to make the website look out of whack and will cause the site to load slowly.
  2. Most of these services allow you to change the example text and the size of the text. Take a look to make sure the font you’re looking at is easy to read at different sizes, and that your message will look good using it.
  3. Web fonts aren’t generally as flexible as the ones on your computer. Sometimes they don’t come with specially-formatted versions (bold, italics, etc.). If a font doesn’t come with those features, they generally do not look very good if you try to artificially add them in using HTML.
  4. If you’re using a commercial font, be sure you know how much traffic your site gets before you buy. If you’re not sure, just ask!

There you have it. Fonts for all occasions, now available for your website!