Dynamic Graphics+Create Magazine
HOME   |   SUBSCRIBE  |   ABOUT  |   CONTACT US  |   NEWSLETTERS  |   CALL FOR ENTRIES  |   ADVERTISE  |   SUBSCRIBER SERVICES  |   WEBCASTS  |   JOBS
Topics
Webcasts
Newsletter
Subscribe/Renew
 
Purchase past issues to complete your library or to find the essential tips and techniques you've been searching for.
 
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Downloads
Free high-quality high resolution photos.
JUPITERIMAGES SEARCH
Jupiterimages offers millions of quality photos, fonts, clipart images and animations!

 
Jupiterimages.com
Clipart.com
Photos.com
Animation Factory
internet.commerce
Join Partner Program
9 Type Rules for Web
While some print purists still think web typography is an oxymoron, you can create effective graphic communication by following a few simple rules. 

by Allan Haley
August/September 2005

Figure 1.
Harvard Business School’s MBA site was redesigned by Corey McPherson Nash (CMN) with Helvetica and Arial selected as HTML typefaces for “clarity, legibility, and authority,” according to CMN principal Michael McPherson. He adds, “Typographically, the challenge was having so much navigation on the page,” citing as an example the Admissions info block, present on every page due to its importance to visitors. “So we used color in the type to help distinguish between navigation options,” he notes.
The first and most important rule of good web typography is to plan for change. Michael McPherson, principal of Boston-based branding and design firm Corey McPherson Nash, has clear ideas about web design. When asked what are the most important typographic aspects to consider, his first answer is, “Realize that your type can—and will—be resized, cut, and generally mutilated by browsers, poor monitors, and search engines. Half of the visitors to your site will read and navigate using search engines that completely strip your design and layout from the content. Plan for it.” How do you plan for catastrophic typographic changes? By following the other golden rule of web typography: Keep things simple.

1. Avoid fancy type.
Fancy typefaces are generally not at home on the web. This is because decorative typefaces can detract from the communication process. And, unless fancy typefaces are used very large, the fancy bits are lost because of the low resolution of computer monitors.

There are, however, typefaces that have been specifically designed to perform well in a resolutionchallenged environment. These are straightforward designs that were drawn to take the best advantage of limited pixels. McPherson has his favorites: “The best typefaces are styles that were developed with lowresolution output in mind. We like Verdana, Georgia, Arial, DIN, Base, and Matrix.” Of those favorites, Verdana and Georgia were expressly designed for on-screen viewing. Other designs to consider would be Trebuchet, Lucida, or ITC Charter. All have great track records online.

Scripts generally do not translate well to web pages. If you really want to use a script, choose one that is bold and not too fancy. Try a face like Brophy Script or Nadianne.

While bold designs are usually the best for headlines and subheads, a typeface that is too bold—or that has very narrow counters—can be difficult to read on the web. If you’re not sure which weight of the font to use, choose the lighter one.

2. Don’t use too many fonts.
Limit web pages to one or two typefaces. It’s all right to use one or two variations (like bold or italic) from each family, but three or more different typefaces do nothing but clutter the page and confuse the message. Web pages are not the place to show off the size and diversity of your type library.

3. Set type big.
Setting type big also makes it easer for visitors to read the content. The simple fact is, with modest screen resolutions, the bigger the type, the more pixels you have to define the letters … and the better your electronic pages will look. Text type as big as 16 point won’t look ungainly and will be significantly easier to read than the smaller stuff.

4. Lose the decoration.
A reader should never have to plow through a forest of buttons and fancy graphics to get simple information. If it doesn’t aid in the communication process, remove it.

5. Use HTML copy.
Another McPherson guideline is to set most of the copy in HTML using a basic “system font” like Verdana. “In most cases designers should use HTML type rather than graphic type for the nonbranded parts of the page,” says McPherson. “Type converted to an image is not searchable, requires longer download time, and is more difficult to change or maintain.” Setting the type in a system font will also go a long way in ensuring that your copy will look the way you intend. McPherson also advises, “When using HTML copy, Cascading Style Sheets are valuable tools for controlling the appearance of the pages on a range of browsers.”

For those places where text is preserved as an image, try adding a little “plus-tracking.” This can help to keep letters from blending together—fonts straight from the box almost always space too tight for web graphics.

6. Don’t rely too much on color.
Color is not as strong a tool on the web as it is in print. “One of the most common mistakes is relying on color to achieve legibility,” warns McPherson. “Web designers—and clients—must remember that a website can appear very different on different monitors and browsers. The robust structure of the typographic layout is far more important than subtle nuances of color.”

7. Design for scanning (online readers don’t read).
The only person that will read every word of what you’ve written is your mother. Everybody else is too busy. Readers skim, peruse, scan, and generally bounce around. This is true for the world of print—and doubly so for the web. Large blocks of copy also tend to be somewhat daunting. Unless they are devoted fans of McSweeney’s (www.mcsweeneys.net), most online readers will not take the plunge into a large vat of text, especially at the top levels of a site.

8. Make text bite-size.
McPherson recommends “breaking the text into smaller chunks and providing informative subheads to help readers skim for information. Jump links for long columns are helpful, and sometimes it is advisable to divide the copy and place it on separate pages with links.” Other sage advice from McPherson: “Web page visitors tend to be more tolerant of larger amounts of text at deeper levels within the site. They have self-selected at the upper levels and are looking for more content as they travel more deeply.”

9. Keep line lengths short.
Keeping line lengths short is also a smart idea. A good rule of thumb is to keep column width to a maximum of 12 words. Narrow columns aid the reading process—especially in web pages. They allow the eye to quickly scan a line and drop down to the next. If very long lines are used, the reader may have to scroll horizontally to read the text. When this happens, you can count on about one line being read.

| 1 | 2 »|
Events & Courses


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency
Intel eBook: Managing the Evolving Data Center
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Symantec eBook: The Guide to E-Mail Archiving and Management
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization
HP Webcast: Disaster Recovery Planning
Go Parallel Video: Performance and Threading Tools for Game Developers
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control
IBM Energy Efficiency eKIT: Learn How to Reduce Costs
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
HP Demo: StorageWorks EVA4400
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES