Style Guide

Headline Styles Overview

Headlines should be used in a hierarchical structure, similar to the way you would organize a report outline, with a single title (h1), multiple main points (h2), and additional sub-points that support the main points (h3 and h4).

Headline styles have pre-set font sizes, weights, colors and styles. Don’t add additional formatting like bolding a headline.

Large Headline (h2)

For headlines to call out the pages main topics.

Medium Headline (h3)

For sub-points or secondary headlines that support the topic of any Large Headline items.

Small Headline (h4)

Additional headline styles to create further sub-points of primary topics.

Font and Paragraph Styles Overview

Web is a scan medium. The formatting of content is just as important as the substance of the content. Creating solid formatting and structure makes web content easily digestible and findable, particularly on mobile.

Make content “skimmable”

  • Use 2,500 instead of two thousand five hundred
  • Use bullet and number lists
  • Use headings to break up long blocks of text
  • Use short paragraphs (2-3 sentences) and blocks of text
  • Use negative space effectively

Give text blocks enough space

The spacing between words, lines, characters and paragraphs on your page is important. Sufficient space allows the reader to more easily scan the content for what they’re looking for.

Keep it consistent

Following an internal web-specific style guide will keep the formatting consistent from page to page. Using different font colors, font sizes or header formats can quickly make a website feel messy, which decreases readability and can even undermine the reliability of your site.

Linking to other sources

Summarize content before linking to it. This gives users context and a preview of info they can expect to receive. Instead of saying “Click Here” say “Learn more about Lacey” or “Read about the City of Lacey”.

 

Additional tips

  • Italics are hard to read on a screen. Don’t use in the middle of paragraphs or sentences. Use sparingly only for footnotes or disclaimers.
  • Use bolded text to make words or short phrases stand out within a sentence or paragraph.
  • Don’t underline text that isn’t a hyperlink. Underlined text on webpage indicates the text is clickable and underlining text that isn’t a link causes user confusion.
  • Dashes “-” and colons “:” separate words and phrases in a more scannable way than commas “,”.
  • Always use numerals/digits for numbers: 5 instead of five.
  • Eliminate excessive punctation and use word abbreviations where possible. On a screen, text with minimal punctuation and characters and words that are abbreviated make it easier to scan and quickly absorb the information.For example: Jan. 5 – 10 or Jan 5 – 10 NOT ​ January 5th – 10th
  • Where possible, break up contact information into more than one line for each method of contact.For example:

Contact Name
253-456-7890
800-123-1234
example@test.com

NOT

Contact Name
253-456-7890; 800-123-1234
example@test.com