Gigantic Title Size

Heading Size 1

Heading Size 2

Heading Size 3

Heading Size 4

In practice, you’ll want to use headings to break your content into easily-digestible sections. We like to use <h2>, <h3>, and <h4> tags to accomplish this1; be on the lookout for these tags as you browse the sample styles on this page!

Lists

People love lists because they provide very clear breaks in the visual hierarchy and are easy to scan. Lists formatted with GRT are beautifully spaced and will keep your visitors engaged and moving down the page.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
    • Nested list item 1
    • Nested list item 2
  • Unordered list item 4

But what about ordered lists? We’ve got those covered, too:2

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4

Blockquotes

When including a quote or citation in your content, be sure to use <blockquote> styles for the most savvy presentation. Consider this profound statement about typography:

The mathematical proportions of typography are vitally important to how readers perceive both your site and your content.

Heavy!

Alerts, Notes, and Content Boxes

Sometimes you need to draw special attention to a chunk of text, and GRT makes it easy to do this with 3 handy “box” formats—alerts, notes, and content boxes.

Alerts

Got some serious information to convey to visitors? You need an alert. Attention! Alerts are the best way to convey important messages to your readers. They can be used to wrap multiple paragraphs or any other HTML elements you need to get your point across. Sometimes you only need one paragraph for your alert, and that’s fine, too.

Notes

Alerts are strong, but there are plenty of situations where they’re a little too strong. And that’s where you can use notes for a high impact without all the fuss: Notes offer a more subtle way to draw attention to your content. And like alerts, notes can encompass other HTML elements or they can stand on their own, as seen below. One thing is certain—your notes won’t go unnoticed!

Content Boxes

Sometimes notes are too subtle and alerts just aren’t appropriate. Enter content boxes, which scream “Hey, over here!” Content boxes are perfect for tweetables, email signup forms, or anything else where visitor attention is at a premium. Use ‘em like a boss, and pretty soon, you’ll be the boss.

Code Formatting

You’ve already seen inline code styling via the <code> tag a few times on this page. GRT also provides tidy preformatted code styling via the <pre> tag, as seen in this snippet of fictitious PHP code:

class golden_ratio_typography {
	public $phi = false;
	public $fonts = array();

	public function __construct() {
		$this->phi = (1 + sqrt(5)) / 2;
	}
}

Give quoted text visual emphasis. “In quoting others, we cite ourselves.”

Some person

But we’re not done with code-related stuff just yet! GRT also includes keyboard element styles. Wait, what?

Keyboard Formatting

Occasionally, you may need to give your readers directions that include keyboard references. The <kbd> element is perfect for this application:

Logo of Aalto University