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.
- 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.
- 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.
- 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.
- 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.
- 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.
I would like to suggest one more common mistake: Select a font with the right quality for the desired use. Most fonts were designed for printing (high resolution) and not for the screen (which has low resolution). Thus you want to pick a font that renders well on screen.
At http://www.FontsLive.com we offer hand-tuned fonts that optimized for web sites. All our fonts are tested to ensure they look good either at text sizes or at headline sizes. Web fonts offer designers a vast creative palette, but care must be used when selecting a font to ensure that it is readable at the intended sizes.
cool excellent blog yea nice work our review website will soon be adding reviews on blogs and add them to our websites as the top best 25 blogs to visit we also do reviews on Consumer Reports reviews all types of reviews thanks