October 04, 2010

Text Styles

Exploring text styles, how online text looks and feels at Lewis & Clark.

Exploring text styles in the Lewis & Clark pages, news stories, events, etc. within the LiveWhale framework… The look and feel of these styles throughout the entire site is determined by a central cascading style sheet (CSS).

Heading 1

Only to be used for the top menu “Lewis & Clark” – admin use only.

Heading 2

Only to be used for main group names, for example the word “English” that goes atop the English department’s pages. It uses a large serifed font. On institutional pages, the color is green. On college pages, it is red. On grad school pages, it is orange. On law pages, it is blue.

Heading 3

Subpage titles or titles of main sections of content on a home page. This and lower heading styles use a sans-serifed font.

Heading 4

To title subsections within a “header 3” section.

Heading 5

To title subsections within a “header 4” section.

Heading 6

To title subsections within a “header 5” section.

Normal “Paragraph” Text

All your normal text within paragraphs (the basic text display within LiveWhale).

A special note on accessibility:

Semantically correct web pages not only help machines like search engines “understand” your content (improving search results) but more importantly, help users of accessibility software read your content more quickly and easily. Therefore, heading levels should be used to divide sections of content, and these headings should be in order: i.e., heading 5s under heading 4s, heading 4s under heading 3s, and so forth.

Additional Styling:

Bold text using the “B” in the edit toolbar.

Italic text using the “I” in the toolbar.

Underlined text using the “U” in the toolbar. This however is not recommended, as many users confuse it with links to other pages.

 

Bullet and number lists:

Lists can be a helpful way to break down information into bite-sized pieces, improving visual clarity. They are not however to be used for dividing sections (for those you should the Headings mentioned above).

Sample Bullet List

  • Item one
    • subitem one-a (done with highlighting this item and hitting the indent button)
    • subitem one-b (done with highlighting this item and hitting the indent button)
  • Item two
  • Item three

Sample Number List

  1. Item one
  2. Item two
    1. subitem two-a
    2. subitem two-b
  3. Item three