Typography and Page Elements

The Western website design includes built-in consistency for typography, colors and spacing. Editors should not attempt to change the style. Below are descriptions of pre-styled elements to help you organize your content in a visually appealing, user-friendly way.

Samples of Headlines

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Some Rules for Using Headings (Headlines)

  • Use heading styles only to structure your content. Consider them headlines and subheads.
  • All headings should be flush left. We do not use centered content.
  • Never use headings to simply emphasize the importance of information. Instead, use bold, italics, underlines or another style to draw attention to important content.
  • Never bold, italicize or underline headings.
  • All h1 through h4 headings should be title case (aka: upstyle), with all verbs and nouns capitalized and other words of three or fewer characters lowercase.
  • Use headers in order. Your page title is h1, so the first level you use in the page body should be h2. When necessary, use h3s and then h4s as subheadings.
  • We also have smaller h5 and h6 headings for special needs. You can see an example of h5s in the longer entries of our Writing Style Guide.
  • Good use of headings helps disabled users navigate your page more effectively.

Lists

Use list tools when you want to display a group of items.

Numbered (ordered) lists
  1. List item, generally with the first letter capitalized, followed by a period at the end of the item.
  2. List item.
  3. List item.
Bulleted (unordered) lists
  • List item, generally with the first letter capitalized, followed by a period at the end of the item.
  • List item.
  • List item.

We can also use outline formatting, which is an unordered list with sub-content indented. 

Bulleted outline 
  • List item, generally with the first letter capitalized, followed by a period at the end of the item.
    • List item (indented to show subservient relationship). 
  • List item.
    • List item (indented to show subservient relationship). 
      • List item (indented to show more subservient relationship). ​
        • List item (indented to show more subservient relationship).
  • List item.

Horizontal Rule

Use a horizontal rule when you want to graphically separate chunks of content. It is a good way to help segment long lists of content. The horizontal rule icon is available in your Full HTML (CKEDITOR) menu. 

Example: 


Tables

Good for presenting tabular data, tables present certain accessibility problems. As such, they should be used only to present tabular data – never for laying out content. When used, they should be made as accessible as possible. Drupal properly labels headings and content using <thead> and <tbody>, respectively. The examples below illustrate how to create accessible tables.

Accessible Table

Tables are automatically formatted with accessibility features. Below is an example of basic accessibility formatting and demonstrates the automatic styling. 

Example:

This is the caption for accessibility.
Column Header 1Column Header 2Column Header 3
123451234512345
123451234512345

Blockquote

Blockquotes may be used for inline quotations. They are visually separated from the copy. The blockquote command is available in the wysiwyg editing icons in your Full HTML (CKEDITOR) menu. 

Example: 

"Of course, sometimes you’re just seeking after basic knowledge as well — like what’s for dinner, how to get a light bulb changed in your room or when’s the next Mountaineer home game. We’ve got you covered."