Typography

This section illustrates the different types of formatting available for use. We’ve added a special section to the text editor to allow us to define and re-use common styles on the site. You’ll find our custom styles in the Formats pull-down located at the beginning of the editor’s button menu.

To apply a style:

  1. Use your mouse to highlight the section of content you want to style.
  2. Open the Formats drop-down and choose the desired style.

To remove a style:

  1. Use your mouse to highlight the section of content you want to un-style.
  2. Click on the eraser icon to remove the formatting.
Try to avoid inserting css embedded styles if at all possible. Manually inserted css such as color, etc make global style changes more difficult down the road.
Try to use the styles below and if you find you are needing a style not available below, let me know and I’ll add it so we can all use it.

Headings

Use these to demarcate important sections. Generally, you will not use H1 as there should only be one on the page and it usually reserved for the main page/post title. This is important for SEO purposes. You will find these headings in the editor under the drop down. The heading number corresponds to the importance level in your article. Content found under a H3 should be more important/relevant than content found under a H6 heading.
Example

  • H1 Heading

  • H2 Heading

  • H3 Heading

  • H4 Heading

  • H5 Heading
  • H6 Heading

Quotes

Use the blockquote button in the editor to mark a section of content as a quote.
Example
The way to get started is to quit talking and begin doing.

Fancy Quotes

This requires going into the blockquote code with the text editor. Use the “Text” tab at the top right side of the editor to enter Text mode.
Warning:
Sometimes depending upon the page, switching back and forth between Text and Visual mode can have adverse effects on your content. WordPress and the editor sometimes try to 'clean up' the code but end up 'screwing up' the code. So always double check before publishing that your code is still intact.
Example
The way to get started is to quit talking and begin doing.
Walt Disney (Date Unknown)
To create a “fancy quote” you’ll need to edit the content via the text editor. This is what the code looks like for the fancy quote version: 
<blockquote>The way to get started is to quit talking and begin doing.
<footer>Walt Disney <cite title="Source Title">Date Unknown</cite></footer></blockquote>
Note the highlighted section. The additional content is within the <footer></footer> tags. And the citing info is surrounded by the <cite></cite> tags.

Highlighting

To highlight a section of text, select it with the mouse and choose Formats > Highlights > Highlight
Example
The is an example of highlighted text.

Message Sections

These probably won’t be used much but here they are for demo. These are actually shortcodes – see the shortcodes section for how to use them.
Examples
This is an example of an 'primary' message box.
This is an example of an 'success' message box.
This is an example of an 'info' message box.
This is an example of an 'warning' message box.
This is an example of an 'danger' message box.