Web Formatting Style Guide

About-media

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 (heading 1), multiple main points (heading 2), and additional sub-points that support the main points (headings 3-5).

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

Heading 1

Used for the primary page title. On this page where it says “Web Formatting Style Guide.” The Heading 1 font style/size should not be used a second time on the page and is only used for the primary page title.

Heading 2

For headlines to call out the pages main topics.

Heading 3

For sub-points or secondary headlines that support the topic of any Heading 2 items.

Heading 4

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

Heading 5

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.

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:

Spa Hours

Mon – Fri: 9 am – 7 pm
Sat – Sun: 9 am – 5 pm

NOT

Spa Hours

Monday–Friday, 9 a.m. – 7 p.m.
Saturday–Sunday, 9 a.m. – 5 p.m.

—

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

Spa at the WAC
On the 4th Floor
206.464.3090
wacspa@wac.net

NOT

Contact

Spa at the WAC, On the 4th Floor
206.464.3090; wacspa@wac.net