Typography

Headings are intended to be used as an organizational element similar to ordered lists. Headings are not for stylizing for "big" or "bold".  It is important to use headings to show the document structure, users and screen readers have the ability to skim your pages by its headings. Search engines use your headings to index the structure and the content of your web pages. The first item on the page should be a Heading 1 (h1) tag and this tag must not be repeated on the page.  Next, the Heading 2 - Heading 6 (h2, h3, h4, h5, h6) tags can be repeated so long as they are in order. Be careful not to skip a heading number, as an example, h4 following an h2 (skipping h3) will cause an accessibility error. 

If you are looking for size alone, the web team can create a specific style if necessary. Also look to the available styles in the editor toolbar.

 

Intro Text : This is to be your introductory paragraph, selling your purpose on the page. If the reader didn't read anything else on the page, this paragraph should be sufficient to understand. Further paragraphs can expand on the ideas. 

Paragraph | Use Return key on keyboard
Mauris consectetur libero non dolor gravida, sed sodales leo ultricies. Praesent tincidunt venenatis ligula vitae ornare. Mauris erat neque, imperdiet id fermentum vitae, mattis at nibh. Suspendisse sed ligula eget felis lobortis tincidunt quis et ex. Integer vel pharetra est. Phasellus molestie, justo eget sagittis blandit, turpis est eleifend sapien, consectetur finibus nunc diam quis velit. Maecenas rutrum, mi vitae hendrerit venenatis, sapien leo feugiat velit, at pellentesque leo justo sit amet sapien. Duis dapibus sem dui, quis porttitor odio vehicula sagittis. 

Line Break (carriage-return) <br /> | Use Shift+Return keys on keyboard
A line break is useful for writing a poem or an mailing address. 

Preformatted: Text is displayed in a fixed-width font that preserves both spaces and line breaks.

Text Links

Button: Added in stylesHomepage

Optionally, you can choose "Custom" and add "custom class" in the link dialog box.

• "button expand radius" button expand radius
• "button expand round"
  button expand round
• "button secondary round"
  button secondary round

Underline: Underlines should not be used as they are easily confused with links. 

Italics:

Strong/Bold: 

Unordered/Bullet Lists:

• Apple
• Oranges
• Kiwis

Ordered Lists/Numbered Lists:

1. Grapes
2. Strawberries
3. Melon

Fractions

Fraction	HTML Code
½	½
⅓	⅓
⅔	⅔
¼	¼
¾	¾
⅕	⅕
⅖	⅖
⅗	⅗
⅘	⅘
⅙	⅙
⅚	⅚
⅐	&frac17;
⅛	⅛
⅜	⅜
⅝	⅝
⅞	⅞

Numbers

Spaces

Mt. SAC – Okay
Mt. SAC |  Mt.&thinsp;SAC

Space	Example
non breaking space:		 
narrow no-break space:		&#8239
en space:		 
em space:		 
thin space:		 

 

Continue on to Snippets for more typography styles.