Page Style Guide

Visual style guide for content formatting. Use the built-in editor's presets whenever possible.

Headings & Normal Text

  • Use headers to define your page's organizational structure and simplify page readability. Well-selected headers inform visitors and help them navigate your page.
  • People don't read the same way online as they do in print. They're more apt to scan a document quickly and move on if it doesn't catch their interest. Web site visitors use document headings to scan the page for interesting content. They can easily determine where new topics are introduced and find what they're interested in. Header content describes what's on your page, so make sure it's descriptive and compelling.
  • The proper use of headings and normal text aids accessibility, by enabling screen-reading device users (the sight-impaired) to follow the logical flow of your content.  Such a device can inform them of the main headings, and allow them to tab through the information on a page.  But, if you merely make normal text big and bold, instead of using a heading preset, the blind user sees it as regular text--not a designated heading.
  • HeadersHeaders can be found in the Format drop-down list.
  • There are five heading sizes: Heading 1 to Heading 5.  The series of numbered headers represents the level of priority, with a Heading 1 having the highest priority and the Heading 6 having the lowest.
  • For consistency, start with the highest level header (Heading 1) and work your way down.
  • Each page title is automatically styled as a heading level 1.  No other heading on the page should carry as much weight.  Because of this, the Heading 1 style has been removed from the Format drop-down box.
  • Don't use headers just to make text look bigger.  This is what the styles, from the Style drop-down box, are for.
  • Do not change the color of any headers.
  • The additional formatting of headings on your part is unnecessary (italicizing, extra bolding, underlining, adding colons after large headings) to distinguish them from normal text.
  • The following presets are accessible from the "Style" drop-down menu that's visible when editing a page:

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Normal (p).  No need to indent paragraphs; space automatically appears between them.

 

Discreet Text

Discreet text is located in the "Style..." drop-down menu that's visible when editing a page.

This is an example of discreet text. This style should be used sparingly and only to clarify or reference other content, like a photo caption.

 

Lists

Use the editor's built-in list-making functions (Lists).  Each "paragraph" within a list is treated as a list item.  End each item with a period. To create or remove deeper levels inside of lists, select the list item(s) that you want to adjust and choose Increase or Decrease Indent (Indent).

Numbered (Ordered) List

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Duis vel diam eget magna facilisis fringilla.
    1. Sed sit amet urna, phasellus pede.
      1. Duis vel diam eget magna facilisis fringilla.
    2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Sed sit amet urna, phasellus pede.

Bulleted (Unordered) List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Sed sit amet urna, phasellus pede.
    • Duis vel diam eget magna facilisis fringilla.
      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Sed sit amet urna, phasellus pede.
  • Duis vel diam eget magna facilisis fringilla.

 

Tables

In most cases, tables should should be percentage based and not fixed width.  This will help ensure the content on our site is responsive.