Formats and Styles

Typography refers to the general appearance of text on your website. Each theme has different styles for the various types of text, based on the look and feel of the site i.e. Heading styles, table styles, paragraph styles.

When adding content to your page, you can use the WYSIWYG toolbar to change the format, improving usability. These formatting options enforce the integrity of site design by only allowing fonts, sizes and styles that are part of the design. The WYSIWYG toolbar allows you to easily change the format to create bold or italic text, bulleted or numbered lists, special characters, and much more. This page provides a visual guide to the various styles for the YaleSites Standard themes.

This is the Alt textHeading 2 sub-head

Second level heading used in the body section of the page. Vel ancillae volutpat eu, est everti dolores definitionem ad, eum noster sapientem similique ea. Te per esse tamquam, pro dicunt aeterno appetere ad. Iusto scripta id vix, ad nam causae inermis definitionem, ad sea vidit habeo.

Heading 3 sub-head

Third level heading used in the body section of the page. Ut illum paulo eam, inani salutatus vis eu. Natum movet libris ius ex, an eum noster feugiat explicari, eu nec graece scribentur. Mel cibo fuisset albucius ut, ferri consul ut has. Primis moderatius consectetuer vim te.

Heading 4 sub-head

Fourth level heading used in the body section of the page. Vim ne summo senserit, justo graeco molestie vis at. Vis corpora pericula eu. Error blandit id qui. Facilisis laboramus honestatis pro ut.

Heading 5 sub-head

Iusto scripta id vix, ad nam causae inermis definitionem, ad sea vidit habeo. Facilisis laboramus honestatis pro ut. Illud ceteros no duo, at ceteros eligendi tincidunt usu.

Heading 6 sub-head

Iusto scripta id vix, ad nam causae inermis definitionem, ad sea vidit habeo. Facilisis laboramus honestatis pro ut. Illud ceteros no duo, at ceteros eligendi tincidunt usu.

Lists

See Create Lists for detailed instructions on how to configure nested lists.

Bulleted List
  • Bulleted list item 1
  • Bulleted list item 2
  • Bulleted list item 3
  • Bulleted list item 4
Numbered List
  1. Numbered list item 1
  2. Numbered list item 2
  3. Numbered list item 3
  4. Numbered list item 4
Nested Lists

You can mix and match bulleted and numbered lists anyway you want.

  1. Step One
  2. Step Two
    • A statement about step two
    • Another statement about step two
  3. Step Three
  4. Step Four
  • Step One
  • Step Two
    1. A statement about step two
    2. Another statement about step two
  • Step Three
  • Step Four

Blockquote. Use the Blockquote button Blockquote button on the WYSIWYG toolbar to add these quotation marks around paragraph text. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.

Tables

Tables should only be used when you have data that needs to be stored in tabular form. CSS, not tables, should be used for layout purposes.

Here is a sample table with a Header text

Header Header Header Header
Data Data Data Data
Data Data Data Data
Data Data Data Data

Here is a table with the Grid Table class

Header Header Header Header
Data Data Data Data
Data Data Data Data
Data Data Data Data
Horizontal Rule
Other Formats
  • Special characters can be used for languages other than English. click on the Special Character icon Special Character icon and choose the character to add.  i.e. ñ ë
  • Superscript and subscript can be used to add characters for math or chemical formulas i.e. H20, 102. Select the character and use the superscript Superscript icon and subscript Subscript icons on the WYSIWYG toolbar.
  • You can use strikethrough to create a line through a word or phrase. Select the word or phrase and use the strikethrough Strikethrough icon icons.