Typography

Details: 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

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

This is an H5 Heading

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 superscript² on it.
This is a line with a subscript₃ 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:

Item 1 Example ordered list
Item 2 Consectetur adipisicing elit
Item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Item 4
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

Unordered list example
Consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Item
Item
Item

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;
}

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 1	Header 2	Header 3
Content Item 1	1	a
Content Item 2	2	b
Content Item 3	3	c
Content Item 4	4	d
Content Item 5	5	e

Styled Table:

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

Table Caption
Header 1	Header 2	Header 3
Content Item 1	1	a
Content Item 2	2	b
Content Item 3	3	c
Content Item 4	4	d
Content Item 5	5	e

<table class="tableStyle">...</table>