Eight Tips for Type on the Web

by Ilene Strizver

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 web 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.

• 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.

• 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.

• Properly size typographic images to the required pixel dimensions. This is worthwhile for banners, logos, and teasers. Simply scaling up reduces sharpness, readability, and effectiveness. Simply reducing a web image makes for a larger file and a longer loading time.

• Build in plenty of “white” space (even when it is not white) around your type as well as in the overall design. Crowding type (as well as other elements) can make a Web page less inviting, more difficult to read, and just plain confusing.

Visit our Typography Articles Page to read more about Typography.

• Editor’s Note:Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer and writer specializing in all aspects of typographic communication. She conducts Gourmet Typography workshops internationally. Read more about typography in her latest literary effort, Type Rules! The designer's guide to professional typography, 4th edition, published by Wiley & Sons, Inc. This article was commissioned and approved by Monotype Imaging Inc.