Typography

Mark Settle created the Thesis Type Template to show off Thesis’s typographical wizardry. When creating a website, cut-and-paste this HTML into a test page and intermittently click Refresh to ensure that every element of your design looks swell.

This is a drop-cap. It adds a touch of class to a page, but only works on more traditional pages. Don’t use it if your site is already overly-ornamented. If you do use it, do so consistently. It might only be appropriate to use for the first paragraph on a page.

Paragraph

If you’re just getting started with WordPress, there are a couple things you should know. First of all, get Thesis. Second, write regularly. Third, only use inline styles like Strong, Emphasis and Strikethrough when absolutely necessary.

Table

Time Event
8:30 am Registration
9:00 am Blogs v. Journalism, with John Dvorak and Om Malik.
9:30 am The Latest and Greatest, with Matt Mullenweg
10:15 am Companies Love Company, with Mark Zuckerberg
12:15 pm On the Shoulders of Giants, with Chris Pearson

Ordered List

This is an ordered list. Use it for things that have a natural order, like steps:

  1. Steal underwear
  2. ???
  3. Profit!

Unordered List

This is an unordered list. Use it for things that don’t have a natural order, like colors:

  • Red
  • Green
  • Blue

Alert Class and Note Class

This is a paragraph in the note class, which can be used to call users to action. For example, encourage readers to check out your web design company.

This is a paragraph in the alert class. Deliver warnings, or tell readers about your upcoming speech at an important symposium.

Pullquotes

This is a left pullquote.

Remember that you are writing for the web. Place an emphasis on scanability. Make it easy for readers to find the information that they are looking for. Make paragraphs just a few sentences long, and break the text up with headings.

Right pullquotes are less disruptive to body text than left pullquotes.

Pullquotes are mighty nice. Used correctly, they add visual interest and encourage users to read on. Just make sure that you place them in a paragraph of sufficient length, because otherwise, they look funny. Right pullquotes are less disruptive to body text than left pullquotes.

Blockquotes

Blockquotes are appropriate when you wish to quote a source at length.

On the same note, don’t be afraid to start over. If something isn’t working, close it up and trash it. If you think the navigation is too precious, remember how you did it, then start from that point in the next design. The goal is to refine, over and over.

– Naz Hamid, A List Apart

Code, Code, Code

Thesis has a style for that.

sudo make me a sandwich

Address

Everyone’s gotta live somewhere.

Mark Settle
123 Happy Lane
Fort Collins, CO 80525

h3 Heading

This is the primary heading you should use. Both the h1 and h2 headings are reserved for use with the header, and on post titles.

h4 Heading

The h4, h5 and h6 headings usually should not be used regularly. Use them to present lower-level information than is appropriate for h3 headings.

h5 Heading

The h4, h5 and h6 headings usually should not be used regularly. Use them to present lower-level information than is appropriate for h3 headings.

h6 Heading

The h4, h5 and h6 headings usually should not be used regularly. Use them to present lower-level information than is appropriate for h3 headings.

Mark Settle, 2009, Creative Commons Attribution 3.0 Unported

Mark Settle created the Thesis Type Template to show off Thesis’s typographical wizardry. When creating a website, cut-and-paste this HTML into a test page and intermittently click Refresh to ensure that every element of your design looks swell.

Comments on this entry are closed.