Typography

 

Headings

The H1 is used in the masthead. Only one H1 should be used per page.

Header One

H2. This is a large header.

Header two

H3. This is a medium header.

Header three


Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis augue at massa congue suscipit. Nullam facilisis dignissim odio sit amet malesuada. Morbi cursus nisl sed diam vestibulum, vitae egestas felis ultrices. Aenean pharetra consectetur aliquam. Donec convallis tempus ligula et gravida. Phasellus ac lacus quam. Integer sem magna, sollicitudin ac massa interdum, tempus rhoncus felis. Nullam neque nulla, vehicula vel quam id, tempus ultrices odio. Phasellus mi ipsum, venenatis et libero et, scelerisque feugiat enim.

Proin mollis dapibus tempus. Suspendisse efficitur nunc vel dui suscipit tincidunt. Maecenas quis erat lorem. Vestibulum maximus at lacus vitae faucibus. Sed at felis eu urna feugiat laoreet ut et velit. Nullam vestibulum ultrices erat nec suscipit. Nulla accumsan, eros a commodo congue, ligula dolor condimentum orci, ac aliquet odio lacus vitae orci. Nullam faucibus diam massa, in fringilla leo cursus a. Praesent imperdiet lorem a tempor pulvinar. Cras id finibus felis, nec posuere sem. Donec efficitur, metus ut pellentesque volutpat, magna nibh dictum justo, sit amet imperdiet felis lacus ut dolor. Aliquam vel quam aliquet arcu facilisis imperdiet.

Maecenas ac leo ligula. Phasellus at semper tortor. Praesent id pellentesque neque. Vivamus id nunc arcu. Nulla eget orci a nibh lacinia dictum a pulvinar eros. Phasellus gravida libero risus, sit amet maximus libero consectetur quis. Duis est metus, auctor id accumsan a, rutrum id nibh. Quisque commodo fringilla purus ut fermentum.

Duis ut dapibus urna, et eleifend ligula. Sed suscipit odio cursus augue tristique euismod. Integer lacinia risus justo, a tempus dolor efficitur porta. Nullam tincidunt ante turpis, vel finibus elit dapibus a. Nam a libero eu orci tristique vulputate id sit amet turpis. Proin id ligula sapien. Sed bibendum pulvinar varius. Duis tristique sem sapien, a auctor dui fermentum non. Mauris aliquet arcu vel risus posuere porta. Vivamus dignissim mi et arcu laoreet, ac sodales enim pharetra. Nullam at nulla eu justo placerat malesuada. Suspendisse ullamcorper suscipit eros. In hac habitasse platea dictumst.

Nulla tempor nisi et nisl tempor rhoncus. Curabitur semper odio orci, vitae rutrum ex accumsan ut. Cras dictum, elit non venenatis tincidunt, ligula nisl imperdiet risus, vel varius diam erat id lectus. Sed venenatis, mi eu ornare malesuada, lorem justo mattis sapien, dictum imperdiet odio massa ac leo. Pellentesque porta nec mauris sit amet malesuada. Aliquam tincidunt nisi a justo placerat venenatis. Donec est tellus, iaculis quis sagittis in, maximus a leo. In vel nibh neque. Vivamus ac nisl id ante suscipit molestie eget a eros. Aliquam quam ex, bibendum in rhoncus interdum, varius non leo. Vivamus interdum mi in enim rutrum, sit amet eleifend turpis pellentesque. Vivamus euismod interdum lectus id dignissim. Aliquam laoreet odio at lorem hendrerit rutrum. Proin nisl lacus, mattis nec volutpat et, tincidunt eget nisl.


Tables

Employee Salary  
John Saddington $1 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said…

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Cite Tag

“Code is poetry.” –Automattic

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2″ down.

Superscript Tag

Still sticking with science and Albert Einstein’s E = MC2, which should lift the “2″ up.

Type Using Article

Headings

h1. This is a very large header.

Header One

h2. This is a large header.

Header two

h3. This is a medium header.

Header three


Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis augue at massa congue suscipit. Nullam facilisis dignissim odio sit amet malesuada. Morbi cursus nisl sed diam vestibulum, vitae egestas felis ultrices. Aenean pharetra consectetur aliquam. Donec convallis tempus ligula et gravida. Phasellus ac lacus quam. Integer sem magna, sollicitudin ac massa interdum, tempus rhoncus felis. Nullam neque nulla, vehicula vel quam id, tempus ultrices odio. Phasellus mi ipsum, venenatis et libero et, scelerisque feugiat enim.

Proin mollis dapibus tempus. Suspendisse efficitur nunc vel dui suscipit tincidunt. Maecenas quis erat lorem. Vestibulum maximus at lacus vitae faucibus. Sed at felis eu urna feugiat laoreet ut et velit. Nullam vestibulum ultrices erat nec suscipit. Nulla accumsan, eros a commodo congue, ligula dolor condimentum orci, ac aliquet odio lacus vitae orci. Nullam faucibus diam massa, in fringilla leo cursus a. Praesent imperdiet lorem a tempor pulvinar. Cras id finibus felis, nec posuere sem. Donec efficitur, metus ut pellentesque volutpat, magna nibh dictum justo, sit amet imperdiet felis lacus ut dolor. Aliquam vel quam aliquet arcu facilisis imperdiet.

Maecenas ac leo ligula. Phasellus at semper tortor. Praesent id pellentesque neque. Vivamus id nunc arcu. Nulla eget orci a nibh lacinia dictum a pulvinar eros. Phasellus gravida libero risus, sit amet maximus libero consectetur quis. Duis est metus, auctor id accumsan a, rutrum id nibh. Quisque commodo fringilla purus ut fermentum.

Duis ut dapibus urna, et eleifend ligula. Sed suscipit odio cursus augue tristique euismod. Integer lacinia risus justo, a tempus dolor efficitur porta. Nullam tincidunt ante turpis, vel finibus elit dapibus a. Nam a libero eu orci tristique vulputate id sit amet turpis. Proin id ligula sapien. Sed bibendum pulvinar varius. Duis tristique sem sapien, a auctor dui fermentum non. Mauris aliquet arcu vel risus posuere porta. Vivamus dignissim mi et arcu laoreet, ac sodales enim pharetra. Nullam at nulla eu justo placerat malesuada. Suspendisse ullamcorper suscipit eros. In hac habitasse platea dictumst.

Nulla tempor nisi et nisl tempor rhoncus. Curabitur semper odio orci, vitae rutrum ex accumsan ut. Cras dictum, elit non venenatis tincidunt, ligula nisl imperdiet risus, vel varius diam erat id lectus. Sed venenatis, mi eu ornare malesuada, lorem justo mattis sapien, dictum imperdiet odio massa ac leo. Pellentesque porta nec mauris sit amet malesuada. Aliquam tincidunt nisi a justo placerat venenatis. Donec est tellus, iaculis quis sagittis in, maximus a leo. In vel nibh neque. Vivamus ac nisl id ante suscipit molestie eget a eros. Aliquam quam ex, bibendum in rhoncus interdum, varius non leo. Vivamus interdum mi in enim rutrum, sit amet eleifend turpis pellentesque. Vivamus euismod interdum lectus id dignissim. Aliquam laoreet odio at lorem hendrerit rutrum. Proin nisl lacus, mattis nec volutpat et, tincidunt eget nisl.


Tables

Employee Salary  
John Saddington $1 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said…

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Cite Tag

“Code is poetry.” –Automattic

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2″ down.

Superscript Tag

Still sticking with science and Albert Einstein’s E = MC2, which should lift the “2″ up.

Wide images
900x500

Recommended dimensions for wide left and wide right images. 

The 500px height will allow for blocks where there is a lot of content. Generally though only up to 400px will be visible to users.