Web Writing Guidelines
Writing for the web should be clear, simple, and direct. Because users are scanning quickly for information, breaking up text with subheadings, bullets, tables, and lists is always a good idea.
Below is an A-Z Guide For Web Writing, followed by the Web Writing Style Guide and a Quick Guide to Web Typography.
In addition, we've included a list of suggested articles by Jacob Nielsen that may be helpful as you're developing or formatting content for your website:
- Microcontent: How to Write Headlines, Page Titles, and Subject Lines
- Writing Inverted Pyramids in Cyberspace
- How to Write for the Web (Full Paper)
anchors—Anchors, combined with bullets and lists, can be created to help users navigate through long webpages more efficiently. For example, if you have a lot of headings or subheadings on one single webpage, you can create a bulleted list of anchors at the top of the page that users can use to link to the information they're specifically seeking below.
bullets and lists—Use lists and bullets whenever possible, especially when information can be broken down into steps or numerals. Lists help web users scan quickly and save time.
headings and subheadings—Use headings and subheadings as much as possible, especially when breaking up text with different topics. Make headings clear and direct; if it's not easy to understand quickly, then simplify them. Headings and subheadings should only be one line length; longer subheadings are discouraged. Avoid being clever or confusing web users.
inverted pyramid—Web users tend to prefer reading summaries first and then, if interested in more information, reading an entire article. One way of appeasing them is to create summary teasers for any article links that your site is taking them to. Another way of making an inverted pyramid is to provide summaries at the top of the page of the content within, allowing users to decide whether to scroll.
links—In-text links are a great way to show users what your site offers. In addition to including the main links in your navigation bar, try working them into the webpage text itself. That way, you present the links in two ways: as a prominent list (navigation bar) and as sentence elements with a little more elaboration (homepage text). The user in a hurry, or the repeat user, will use the navigation bar. The first-time visitor, or the visitor who likes to linger a little, can use your homepage text as a quick introduction to what the site offers.
Links should never include phrases like "click here for more info." One of the reasons for this is due to web accessibility; page readers read links aloud, so they need to be descriptive and informative, differentiating one from another.Link phrases should be descriptive, giving the web user a clear indication of where he or she is going. They should also not be long, spanning more than one line. (Read this article for more information about writing good link phrases.)
Examples of good links:
Read more about NSIT Web Services >
Phrases to Avoid:
Click on http://www.uchicago.edu
numerals—Web users scan for numbers and therefore you should use numerals as much as possible within text of your webpages, despite what your style guide tells you.
page titles—Page titles are essential for good search engine results. Page titles should be descriptive and include important key words. Each page should include the organization name, including The University of Chicago, and a brief description of what the site offers. For more information about writing better page titles, see Search Engine Optimization: Writing Better Titles.
paragraph—Paragraphs should generally be no more than four sentences on the web. Sentences should be short and succinct and should be front-loaded with information.
URLs—We never use URLs in text on our web pages. (They require a link phrase.) For example, if a line says, "Please visit the University of Chicago Booth School of Business at http://www.chicagogsb.edu, the line should be rewritten with an embedded link: Please visit the University of Chicago Booth School of Business.
Web Writing Style Guide
The following is a guide of frequently used terms on the University of Chicago website. In general we follow The Chicago Manual of Style, with a few web and News Office variations.
addresses—Use abbreviations for numbered street addresses and compass points when used with a number address. Spell out in other uses.
Examples:
Deliver to 1601 Ellis Ave.
Parking is difficult on Ellis Avenue.
The store is located at 310 N.W. Main St.
He is traveling northwest on Main Street
dates—Follow AP Style for use of dates. Example: The event will take place Friday, Nov. 13. (The month is abbreviated; do not use 13th.)
degrees—Do not use punctuation on degrees when writing for the web. Examples:
PhD
MFA
MBA
email—lower case; no hyphen.
internet—lower case.
months—The following abbreviations may be used for months when used with specific dates: Jan., Feb., Aug., Sept., Oct., Nov., Dec. It is preferred that March, April, May, June and July not be abbreviated, even when they are used with dates. See dates.
numbers—Unlike in print, web users scan for numbers, so it's better to use more numerals (unlike The Chicago Manual of Style which encourages spelling numbers out for book publishing). A general rule of thumb is to be consistent with number usage within your website. On the homepage, we follow AP Style, spelling out numbers ten and under and using numerals for everything higher.
online—no hyphen.
phone numbers—We use periods instead of dashes on the homepage: 773.860.4444
serial comma—We use the serial comma on the University of Chicago website. Example: The University of Chicago has programs in Social Sciences, Biological Sciences, and the Humanities.
state names
Spell out the names of the 50 states when they stand alone in textual material. Any state name may be condensed, however, to fit typographical requirements for tabular material. Use the state abbreviations below in datelines and in text when used with the city.
| Ala. | Kan. | Nev. | S.C. |
| Ariz. | Ky. | N.H. | S.D. |
| Ark. | La. | N.J. | Tenn. |
| Calif. | Md. | N.M. | Vt. |
| Colo. | Mass. | N.Y. | Va. |
| Conn. | Mich. | N.C. | Wash. |
| Del. | Minn. | N.D. | W.Va. |
| Fla. | Miss. | Okla. | Wis. |
| Ga. | Mo. | Ore. | Wyo. |
| Ill. | Mont. | Pa. | |
| Ind. | Neb. | R.I. |
time—we generally use PM and AM in all caps. Be consistent throughout your website.
titles—Book and movie titles are italicized on the web. Example: Have you read The Sun Also Rises?
website—lower case; one word.
The University of Chicago—Use the full title with a preceding “the”; "The" should be capitalized when used in lists or titles, but when it appears within a sentence, use lower case. Abbreviate the University of Chicago by saying, the University. When used as an adjective (University of Chicago student), it's okay to drop "the." Examples:
- The University of Chicago has one of the top ten business schools in the country.
- University of Chicago student David Bashwiner is earning a PhD in music.
- We work for the University of Chicago.
- We work for Web Services at the University.
A Quick Guide to Web Typography
Web Services follows the general rules below on web typography. These are more specific coding rules that you might pass along to your website developer or coder.
all caps—We do not encourage the use of all caps because they are hard to read, so use sparingly on the web.
bold—Use bold to highlight specific words on your page. Headings should be styled already (h1, h2, h3, etc.), so no additional bolding should be necessary.
em dash—An em dash denotes a parenthetical thought—like this one—or some similar interpolation. The em dash (—) is also used to indicate that a sentence is unfinished because the speaker has been interrupted. It is used in much the way a colon or set of parentheses is used: it can show an abrupt change in thought or be used where a full stop (or "period") is too strong and a comma too weak. Em dashes are sometimes used in lists or definitions, as well. According to The Chicago Manual of Style, an em dash should always be set closed and not surrounded by spaces.
In HTML, one may use the numeric forms — — or — On a computer running the OS X operating system, most keyboard layouts map an em dash to Shift-Option-hyphen. On Microsoft Windows, an em dash may be entered as Alt+0151, where the digits are typed on the numeric keypad while holding the Alt key down. It can also be entered into Microsoft Office applications by using the ctrl-alt-hyphen combination. Example: The Web Services group—Stacey, John, Jack, and Sara—met today to discuss the new website.
If you're using Web Express, it's best to copy em dashes from Word.
en dash—An en dash denotes a range, such as 6–10 years, read as "six to ten years". An en dash (–) is roughly the width of the letter n. It is half the size of an em dash. En dashes should be set closed and not surrounded by spaces.
Examples:
June–July 2008
1:00–2:00 PM
For ages 3–5
pp. 38–55
2008–09
Do not use hyphens in lieu of en dashes or em dashes. According to The Chicago Manual of Style, an em dash should always be set closed and not surrounded by spaces.
In HTML, one may code an en dash by using &ndash. If you're using Web Express, it’s best to copy en dashes from Word straight into your editor.
italics—They're hard to read on the web, so use sparingly.
links—Links or URLs should not appear within text on the University of Chicago website. Links should have clear phrases that identify the page that the user will be going to; if the link is going to video or PDF, it should be identified, generally by (PDF) or (MOV), though sometimes we use "Video: Title," as well.
hyphen—used both to join words to make compound adjectives or nouns and to separate syllables. Strictly speaking, the hyphen (-) is not a dash; careful typesetting (included with modern computer applications, such as word processors and HTML) relies on the following proper dashes instead. Do not use two hyphens (--) in lieu of an em dash no matter what.
Examples:
first-year student
Chicago-based programs
Hyphens do not have to be coded manually (which is why they're popularly used in lieu of em dashes and en dashes).
Last updated: 8/14/09