Web Style Guide third edition

by Patrick J. Lynch
and Sarah Horton

9 Editorial Style
Text Formatting for Web Documents

Keep the following in mind when formatting text copy for the web, bearing in mind that web markup is not just about how the text looks on the page. The most important aspect of text formatting is providing the structural markup that underlies the formatted page.

Avoid excessive links

Too many links will destroy the homogeneous, even “type color” that characterizes good typesetting, and the links will become a constant distraction to the reader. Consider adding a list of parenthetic or reference links to the bottom of the article, where they are freely available but not distracting.

If you include links in the body of your text, choose custom link colors that harmonize with your text color in order to minimize their distraction. Underline inline links so that users who cannot distinguish colors will be able to differentiate links from regular text.

Avoid excessive or purely visual typographic markup

Develop a careful heading hierarchy and use it consistently throughout your web site. Develop at least a simple style sheet that tells everyone on the team when and where to use <h1>, <h2>, and <h3> headings, list styles, and other semantic markup. Avoid using purely visual markup like italics or bold (<i> or <b> tags). These tags add nothing to semantic content. Whenever possible, use semantically meaningful tags like “emphasis” and “strong emphasis” (<em> and <strong>). Use a master linked style sheet to establish the typography for your whole site.

Use the best tool

Write your text in a good word-processing program with spell-checking and search features. Transfer your text to html only after it has been proofread.

Style sheets in word processors

Don’t use the word processor’s style sheets to produce “All capitals” or other visual formatting effects for text or headings. You will lose those special formats when you convert to html.

Special text characters

When composing text in a word-processing program like Microsoft Word, leave the “smart quotes” and other special characters in place in the manuscript, but be aware that special characters, math and science symbols, diacritical marks, typographer’s ligatures, and international punctuation will need to be replaced with the html code for each character. With the special characters in place in the Word file, this conversion to web special characters can easily be accomplished with the search-and-replace feature of a web text editor or with web design software like Adobe Dreamweaver.

Consult a good html guidebook (we recommend several in the References section) for a full listing of special and international characters supported through html’s extended character formatting.

Avoid the auto-hyphenation feature of word processors for text destined for the web. This may add nonstandard “optional hyphen” characters that will not display properly in web browsers, and you’ll just have to scrub them out of the web text with search-and-replace techniques.