Style Guide

Web Guidelines

Use headers

Headers should always be nested and consecutive. Never skip a header level for styling reasons. To help group sections, be sure the page title is H1, top-level sections are H2s, and subsequent inside those are H3 and beyond. Avoid excessive nesting.

Use descriptive links

Links should provide information on the associated action or destination. Try to avoid "click here" or "learn more."

Use plain language

Write short sentences and use familiar words. Avoid jargon and slang. If you need to use an abbreviation or acronym that people may not understand, explain what it means on first reference.

Lists

Make true lists instead of using a paragraph or line breaks. Use lists to present steps, groups, or sets of information. Give context for the list with a brief introduction. Number lists when the order is important, like when you're describing steps of a process. Don't use numbers when the list's order doesn't matter.

If one of the list items is a complete sentence, use proper punctuation and capitalization on all of the items. If list items are not complete sentences, don't use punctuation, but do capitalize the first word of each item.

Avoid directional language

Avoid directional instructions and any language that requires the reader to see the layout or design of the page. This is helpful for many reasons, such as layout changes on mobile devices. E.g. "See chart on right."

Images

  • Clip art and stock photos are discouraged.

  • As a rule of thumb, use JPGs for photographs.

  • Use the GIFs or PNGs for line art and plain color graphs. File size can generally be reduced significantly by reducing the color palette to only the required colors.

  • Text on images should be avoided if possible. Remember that images might be smaller in some contexts, such as on mobile devices. This could make the text unreadable to some users.

  • Photos typically look best when aligned to the right within the body copy.

  • Use alternative text. Alternative text is the most basic form of image description, and it should be included on all images. The language will depend on the purpose of the image:

    • If the image is serving a specific function, describe what's inside the image in detail. People who don't see the image (such as those who have turned off images in their web browsers or are using a screen reader due to a visual impairment) should come away with the same information as if they had.

    • If you're sharing a chart or graph, include the data in the alternative text so people have all the important information.

Other Considerations

  • Don't format with spaces.

  • Don't force a line break just for the way it looks.

  • Underline formatting is only used for hyperlinks. Works of art should be italicized.

  • Avoid using tables for things other than tabular data, if at all possible.

  • Use table headings to identify the different rows or columns of data.

  • Page titles should be concise. In general, the name of a menu link should be the page title.

  • Do not fully justify, right-align, or center large blocks of text.

Writing Conventions

  • When writing out an email address, website URL, or filename use all lowercase.

  • Avoid spelling out URLs, but when you need to, leave off the http://www.

  • Use numerals and am or pm without a space. Use a hyphen between times to indicate a time period. E.g. 7am-10:30pm

  • When referring generally to a file extension type, use all uppercase without a period. Add a lowercase s to make plural. E.g. JPG and PDFs

  • Separate the parts of phone numbers with hyphens. E.g. 555-555-5555

  • Don't use all caps except when writing out an acronym.

  • The words "city," "county," or "town" should not be capitalized unless they are a part of a proper name. E.g. "the City of Valdosta" and "the city"

  • Don't capitalize job titles unless they precede a name. E.g. "City Manager John Doe" and "The city manager updated the website."

  • Use ampersands (&) in headings and subheadings, but spell out the word "and" in the body copy.

  • When writing a list, use the serial comma (also known as the Oxford comma). E.g. apples, oranges, and lemons

  • Use the percent symbol (%) when referring to a specific percentage figure.

  • Use "site map" instead of "sitemap."

Sources

Some of these guidelines were taken with permission from the MailChimp Style Guide.