Eight Tips for Type on the Web

For Your Typographic Information

These days, anyone can have their own Web site, whether for a business, a cause, or a club; a school or class or team; or simply a family or an individual. Whether you design it yourself from scratch, or use templates, or have it designed for you, type will most likely be a large percentage of its content.

To be effective on a Web site, typography needs to be: clean, clear, appealing, and readable. Good typography can attract, engage, and keep your viewer on your site. Here are some tips to get you off on the right track.

• Establish – and then follow – good typographic hierarchy. Use titles and subheads to create emphasis and get your point across before a viewer gets bored and clicks out of a page or a site. Also try using bold and italic versions, color, and case (caps, lowercase, or mixed case) to reinforce/emphasize content priority and maintain good flow.

• Beware of small type. Type size is one of the most important factors when designing with type on the Web. Small type is hard to read at the lower resolution of most screens and monitors. Go larger rather than smaller to ensure optimal reading on all monitors, as well as on smaller screens: laptops, iPads, and hand-held devices.

• Avoid justified text, as it frequently leads to bad spacing, including the dreaded rivers of white space. What the viewer sees on the Web, typographically speaking, is dependent on several variables, including: browser, monitor settings, font style and size preferences, as well as platform (Mac or PC). This means that line breaks vary from computer to computer, which can lead to some truly awful spacing if text is justified. Stick with flush left or centered type.

• Use smart punctuation, including smart, or typographer’s quotes, as well as en and em dashes, rather than primes, double hyphens and other “dumb” typography. These professional typographic conventions are as appropriate on the Web as they are in print.

Avoid justification on the Web. Variation in font sizes on the Web and the lack of hyphenation can lead to unsightly results, as can dumb typography, all shown in the upper example. Flush left alignment plus smart typography makes for a much more professional result, as shown below it.

• Use special effects sparingly. You can create visual confusion by going overboard with gradients, shadows, and other special effects. Using them occasionally and wisely will go a long way toward emphasizing your type and creating pages that are engaging/attractive. Similarly, use a light hand with busy or cutesy icons, buttons, and starbursts.

The image above speaks for itself – don’t muddy the message with too many special effects!.

• Create high contrast between the color of the type and the background. Achieve this by selecting light, neutral backgrounds for darker type (and the reverse). Avoid placing type on a busy background, which can make it hard to read.

Maintaining high contrast makes type easier to read. Low contrast can reduce readability, increasing the risk of losing your viewer