Typography

Created on Friday, 19 August 2011 00:04

This is an H1 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Dignissim littera claram legere fiant typi. Iriure in iriure liber nulla per. Eros eros laoreet eros claram liber. Etiam tation consequat claritas odio typi.

This is an H2 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Dignissim littera claram legere fiant typi. Iriure in iriure liber nulla per.

This is an H3 Heading

Extended paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is an H4 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is an H5 Heading

Extended paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is an H6 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Text styles:

This is a line with some Emphasised Text on it.
This is a line with some Strong Text.
This is a line with some abbreviated text on it.
This is a line with an acronym on it.
This is a line with some quoted text on it.
This is a line with a superscript2 on it.
This is a line with a subscript3 on it.
This is a line with some link text on it.
This is a line with deleted text on it.
This is a line with inserted text on it.


Blockquote & cite tags:

Below is an example of <blockquote> and <cite> tag styleing:

Blockquote. Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

Disturbing the Universe by Richard Feynman, 1979


Ordered List:

  1. Item 1 Example ordered list
  2. Item 2 Consectetur adipisicing elit
  3. Item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  4. Item 4
  5. Item 5

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Unordered List

Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Code & Pre Blocks:

Below is a block of code that uses the <code> and <pre> tags:

.myClassName {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: #333333;
	display:block;
	line-height:1.833em;
	border-top:0.1em solid #200;
}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Definition List

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term on the left with the definition following on the right or on the next line. The definition text is typically indented with respect to the term.

Definition Title
Definition description text consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tables:

Unstyled Table:

Below is a table with default styling and no CSS classes applied to it:

Table Caption
Header 1Header 2Header 3
Content Item 11a
Content Item 22b
Content Item 33c
Content Item 44d
Content Item 55e

Styled Table:

Below is a table with a CSS class of "tableStyle" applied to it:

Table Caption
Header 1Header 2Header 3
Content Item 11a
Content Item 22b
Content Item 33c
Content Item 44d
Content Item 55e
<table class="tableStyle">...</table>