GRT Text Formatting Demo

Peruse the styles below to see how Golden Ratio Typography makes all your text look fantastic.

Headings and Sub-headings

Use sub-headings to increase engagement and enhance scannability

Every good style package includes headings you can use to format your content like a pro. Check out this cascade of GRT headings:

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!

Content Callouts

When you simply must have the reader’s attention!

Sometimes you need to draw special attention to a chunk of text, and GRT makes this easy with content callouts. You can even use different callouts for different situations!

Basic Callouts

Use a callout whenever you want visitors to see an important piece of text!

And don’t worry about limitations, either—your callouts can be a single paragraph or an entire section of text!

You can include multiple paragraphs or any other HTML elements you need to get your point across.

Alerts

Want something more powerful than a basic callout? Try an alert:

Attention! Alerts are the best way to convey important messages to your readers.

Sometimes, you might need to include multiple paragraphs in your alert…

And as we’ve already seen, this is easy to do with GRT CSS!

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 visual impact without all the fuss:

Notes offer a more subtle way to draw attention to your content.

Like other callouts, 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!

Lists

Don’t sleep on lists—people love to read ’em!

People love lists because they provide 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

Quotations are authoritative!

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!

Images and Captions

Everybody looks at images, and everybody reads captions

Pilot mechanical pencil drawer

Who in their right mind would have this many mechanical pencils?

Code Formatting

GRT also makes your code snippets and keyboard references look fantastic

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:

Loading...