5 Factors To Consider When Choosing Fonts For Your Website

One of the more challenging and interesting (and fun!) aspects of designing a website is choosing or approving the typeface. There are literally thousands of fonts out there, and more are being created every day. For designers and typegeeks, browsing them, dropping them into designs, and altering them to our own purposes is as much a hobby as it is a job.

Unfortunately, most fonts – especially the cool and unusual ones – won’t work on the web, and of course not every font is appropriate for every project. Folks putting together flyers and posters for their day care center or setting up their blog often miss this important point and for their trouble they end up with something tonally inappropriate, amateur looking, or unreadable.

Avoiding common typographical mistakes

So how do you avoid these mistakes? What do you take into account as you’re selecting or approving a font for your snazzy new or rebranded website? Here are a few tips we always try to keep in mind when we select our typefaces.

1. Keep the number of fonts on your page to a minimum. Using too many fonts makes a design cluttered, sloppy and hard to read. Instead, use only 3 or 4 fonts, max: one for headlines, one for body copy and one for subheadings.
2. Your body copy should be sans serif. Sans serif fonts (ie. Helvetica and Verdana) render more elegantly on the web and are easier to read. Serif fonts (like Times New Roman) are difficult to read on the web because the resolution of a computer monitor is lower than the resolution of print, so the serifs render blurrily.
3. Don’t use a script or “handwriting,” font for body copy. Script fonts look pretty but can be hard to read, especially when small. Use script fonts sparingly in headlines, titles and logos.
4. Don’t use absolute font sizing. If you code your fonts for pixel size, for example, users can’t resize them when viewing your site. And the higher the screen resolution, the smaller the font will appear. Instead, use relative terms like percentages or ems. This will ensure a consistent look when users scale up or scale down in the “View,” menu of their browsers.
5. Use your typographical choices to establish a hierarchy of information. Headlines and other important information should be larger, bolder or otherwise more prominent. Subheads next, followed by body copy. People on the web don’t read; they scan. The burden of your sales and branding messages should be carried within your headlines and subheads. Establishing a clear hierarchy will help make sure they get the information they need to do what you want them to do (buy, donate, volunteer, etc).

As usual, these rules are made to be broken and your mileage may vary; you can certainly find counter examples for every one of these tips.

Typography is a strategic design element

The most important thing to keep in mind is that your typography choices are part of an overall design, branding and marketing strategy. While often an afterthought, typography is one of the most important elements of website design because the words are what typically make the sale. They deserve the same level of design care and attention as every other element of your site.