Home > Private: Style Guide > Text Styles

Headings

Headings define a document’s structure. Proper headings help readers quickly scan text for relevant information. They also help to create a hierarchy of information, as each heading tag carries a certain visual weight. Heading 1 defines the most important heading. Heading 6 defines the least important heading. In addition, each heading can be read as a child of the heading before it.

Search engines use headings to index the structure and content of web pages. Using headings is also essential to meet web accessibility guidelines. Screen-readers discover document structure by creating lists of all the headings of each page of the website.

The headings used throughout the site are displayed and defined below.

[Heading 1 (H1)]

Heading 1 tags are used for page titles only, and are typically generated by the page template.  These should not be used in the editable page content.

Heading 2 (H2)

Heading 2 tags are used commonly throughout the site to provide a title to main content on a page, or to clearly divide a page into two or more topics.

Heading 3 (H3)

Heading 3 tags should come after Heading 2 tags on a page and are used to further define information.

Heading 4 (H4)

H4 tags should come after Heading 3 tags on the page.

Text

The copy is formatted in the main style sheet and should only require bold and italic as needed. It is important to avoid underlining, as it makes text appear as links.

Bulleted Lists

When possible use bulleted lists to present web copy so that it is quickly and easily scannable by audiences. Bulleted lists are styled in the main style sheet, and do not require additional styling.

  • Example 1
  • Example 2
  • Example 3

Numbered Lists

Numbered lists are useful for listing steps of a procedure.  The style is intended for fairly short list items (one or a few sentences per item).  For lists of large sections of text, consider separating the items with numbered headers instead.  Numbered lists are styled in the main style sheet, and do not require additional styling.

  1. Example 1
  2. Example 2
  3. Example 3

Arrow List

A list can be styled with blue or green arrows in place of the default bullets.  This style is commonly used on the site for lists of links.

  1. Create an unordered list
  2. With the cursor anywhere on the list, click on the Format drop-down on the editor toolbar
  3. Hover over the Formats menu within the Formats drop-down
  4. Select the ul.blue-arrows or ul.green-arrows style

Introductory Text

Most pages of the website should include a page intro. They should always appear first on the page and should only appear once on a page. The intro should be no more than two sentences. The larger font size allows key content to be quickly scanned.

To apply the introductory text style:

  1. Type your text
  2. Highlight the text in the editor
  3. Click on the Format drop-down on the editor toolbar
  4. Hover over the Formats menu within the Formats drop-down
  5. Select the p.intro style

This is an example of introductory text. It’s typically used right after the page title at the top of the body content of a page.

Tables

Tables should only be used to display tabular data but not for creating page layouts.

To create a table:

  1. In the editor toolbar, click the Table drop-down
  2. Hover over Insert Table and hover over the desired number of rows and columns
  3. Insert content into cells – cells can be navigated using the arrow keys

To set a cell as a header cell:

  1. Click into the cell
  2. Click the Table drop-down in the editor toolbar
  3. Hover over Cell and then click Table Cell Properties
  4. Click on the drop-down for Cell Type and select Header Cell
Header Cell 1 Header Cell 2
cell content 1 cell content 2