Golden Ratio Typography Text Formatting Styles

In its most basic form, Golden Ratio Typography (GRT) delivers optimized dimensions—sizing and spacing—based on [some font] at [some size].

Useful information? Absolutely! But GRT becomes even more useful when these dimensions are used to create exciting text formatting styles that can be applied to web pages, emails, or any other medium where text is conveyed.

The following suite of text formatting styles is what makes GRT a must-have for any website, web app, or email newsletter campaign.

• Basic Styles — Minimum acceptable formatting anywhere you compose text
• Essential Styles — Critical styles that drive attention and engagement
  • Callouts
  • Buttons
  • Flexible Captions
  • Drop Caps
  • Highlights
  • Pop
  • Inline Code, Preformatted Code, and Keyboard
• Expanded Styles for Web Pages — Use whitespace like a pro to create the richest pages anywhere!
  • Extensions
  • Breakouts
  • Pullouts
  • Bars
• Full-width Bleeds — These make page builders obsolete!

The Basics: Paragraphs, Headings, Lists, and Blockquotes

Every WYSIWYG editor supports these basic elements

Works on: Web pages, web apps, and email broadcasts

Every modern text editor supports the most fundamental text formatting elements: Paragraphs, Headings, Lists, and Blockquotes.

But if these elements were the extent of GRT formatting, it wouldn’t be very exciting. But as you explore the next section, you’ll see how the GRT dimensions can be used to create eye-catching formatting styles that bring your content to life!

The Essentials: GRT Text Formatting Suite

These styles will define content formatting for the next 100 years. You in?

This is how you stand out from the crowd! Start by using the basic styles listed above, and then sprinkle in elements from the essential GRT Text Formatting Suite to make your content irresistible!

Content Callouts

When you simply must have the reader’s attention!

Works on: Web pages, web apps, and email broadcasts

Content Callouts come in 3 different flavors, so you’ll always have a perfect fit for every situation.

Basic Callouts

Use a Callout (like this one) whenever you want visitors to see an important piece of text!

Alert Callouts

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

Note Callouts

Note Callouts offer yet another way to draw attention to your content.

Buttons

Does your content click for visitors? 😉

Works on: Web pages, web apps, and email broadcasts

GRT buttons come in 5 different styles so you’ll always have the perfect button for any context:

• Basic Button
• Save Button
• Delete Button
• Action Button
• Update Button

Flexible Captions

Add supplemental text in high-visibility locations!

Works on: Web pages and web apps (but not email broadcasts)

The GRT Text Formatting Suite also includes Flexible Captions you can deploy in high-attention locations—after Heading 1, Heading 2, Heading 3, Blockquotes, Images, Videos, and even Callouts!

You’ve already seen Flexible Captions after Heading 2 and Heading 3 elements above; now see how captions can also be used to create quote citations:

Most people make the mistake of thinking design is what it looks like… Design is how it works.

~ Steve Jobs

Drop Caps

Everybody loves a big, bold letter!

Works on: Web pages, web apps, and email broadcasts

Drop caps speak for themselves—they look cool, and anyone who publishes content online looks far more authoritative when they use them.

More than aesthetics: Drop caps serve an attention-based purpose, too. Visitors will notice them, and they serve as an attention reset that helps people re-focus on the next section of text. Use drop caps wisely!

Highlights

Shine a light on things you want readers to see 💡

Works on: Web pages, web apps, and email broadcasts

The GRT Text Formatting Suite includes the elements you need to direct attention precisely where you want it to go.

Got a hard-hitting phrase you don’t want your audience to miss? Highlight it for all to see!

Pop Styling

Make any element stand out!

Works on: Web pages and web apps

If you want an element on your page to appear like it’s floating above the page—standing out a bit—simply add pop styling, and GRT will take care of the rest.

Alert Callouts really catch your attention. But a popped Alert Callout stands out even more!

Inline Code, Preformatted Code, and Keyboard Styles

Because even your code should be golden 🏆

Works on: Web pages, web apps, and email broadcasts

The GRT Text Formatting Suite includes inline <code> styling as well as preformatted code styling (via the <pre> element):

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

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

But what if you just want to type up a simple tutorial with keyboard instructions? GRT includes lovely <kbd> styles for this purpose:

👉 To open the emoji keyboard on a Mac: control + command + shift

The Full Suite: Expanded GRT Formatting for Web Pages

Break out of the content column with these expanded styles for websites 🔨

Works on: Any WordPress website running FOCUS

Extensions

Content Extensions enable you to display content across the entire usable layout width (which is fundamentally different from the width of a browser window).

But why not just have the column of text span the entire usable width of the layout by default? (In other words, why should Extensions even exist?)

Because we know people do not like to read extremely long lines of text. Columns of text must be calibrated to yield line lengths that people want to read; in practice, this means having 55–95 characters per line.

In laptop/desktop layouts, lines of text tend to be between 550 and 750 pixels wide—perfect for reading, but not enough to fill up the usable layout width. This means there’s going to be whitespace left over that could be used for other purposes…

That’s where Extensions, Breakouts, Pullouts, and Bars come in handy! Check out this extended image:

This image has been extended so it can have a bigger impact! It’s been popped, too 😏

Because they require intricate knowledge about the content column, overall layout, and site dynamics, Extensions are only possible with FOCUS, a Site Builder disguised as a WordPress Theme.

Breakouts

Like Extensions, Breakouts are only possible with FOCUS, but they work a little differently.

Instead of extending an element out of both sides of the content column, Breakouts start halfway into the content and extend all the way to the edge of the browser on one side.

On smaller screens, Breakouts behave normally, appearing within the regular content flow.

Pullouts

What type of content makes sense for Pullouts? Small images, sign-up forms, important Callouts—it’s entirely up to you!

Pullouts are almost identical to Breakouts; the only difference is that Pullouts exist completely outside of the content column while still extending to the edge of the browser.

And just like Breakouts, Pullouts simply appear within the flow of content on smaller screens.

Bars

Need to add a quick citation¹ to your content? Consider using a Bar to include supplemental information where it benefits the reader most!

¹ Just like this, fam 😎

And finally, it’s time to introduce the star of the text formatting show and the reason Page Builders are now obsolete…