Typography

Typography

Fonts

This site uses  and  for the larger headings. This is an example of an intro paragraph and has a class of <p class="intro">.

Paragraphs

Standard paragraph text example. Your text does not automatically insert as a paragraph, so to make that happen select the text and use the editor menu to apply the paragraph style. This is an example of a normal link: Wafer toffee macaroon soufflé marzipan unerdwear.com. Dessert dragée jujubes tart croissant I love gummies ice cream I love. I love liquorice icing macaroon dragée. Biscuit ice cream topping tiramisu. Sweet roll apple pie sugar plum applicake. Tart chocolate bar toffee jelly soufflé. Marshmallow oat cake donut chocolate.

html source

<p><strong>Standard paragraph text example.</strong> 
Your text does not automatically insert as a paragraph,
 so to make that happen select the text and use the 
editor menu to apply the paragraph style. <em>This is an 
example of a normal link:</em> 
<a href="/Style-Guide/Typography">Wafer toffee macaroon 
soufflé marzipan unerdwear.com</a>. Dessert dragée 
jujubes tart croissant I love gummies ice cream I love. I love licorice 
icing macaroon dragée. Biscuit ice 
cream topping tiramisu. Sweet roll apple pie sugar 
plum applicake. Tart chocolate bar toffee jelly 
soufflé. Marshmallow oat cake donut chocolate.</p>

Headings

Alway use headings to show different levels of content. the h1 heading should only be used for the page title, which will happen automatically.

Heading 2 with small text

Heading 3

Heading 4

Heading 4 - plain

Heading 5

Heading 6

html source

<h2>Heading 2 <small>with small text</small></h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h4 class="plain">Heading 4 - plain</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Lists

• This is an example of an unordered list
• Some people refer to these as bulleted lists
  • They can be nested inside each other
    • to show different levels
• Just like this

html source

<ul>
	<li>This is an example of an unordered list</li>
	<li>Some people refer to these as bulleted lists
	<ul>
		<li>They can be nested inside each other
		    <ul>
			    <li>to show different levels</li>
		     </ul>
		</li>
	</ul>
	</li>
	<li>Just like this</li>
</ul>

1. This is an example of an ordered list
   1. They can be nested inside each other as well
      1. to show different levels
   2. lists are very easy to read
2. and a great way to show information

html source

<ol>
	<li>This is an example of an ordered list
	<ol>
		<li>They can be nested inside each other as well
		    <ol>
			    <li>to show different levels</li>
		    </ol>
		</li>
        <li>lists are very easy to read</li>
	</ol>
	</li>
	<li>and a great way to show information</li>
</ol>

Blockquotes

This is a blockquote. You can use this to pull some content out of an article or text block. Unknown Author

html source

<blockquote>
This is a blockquote. You can use this to pull some content 
out of an article or text block. 
<cite>Unknown Author</cite>
</blockquote>