Home Tools Editor Styles Subscribe Login

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.

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!

Callout with Heading 3

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.

Alert Callouts

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

Alert Callout with Heading 3

And just like with Basic Callouts, you can include other HTML elements in your Alert Callouts to create visual interest and excitement!

Note Callouts

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

Note Callout with Heading 3

Like the other Callouts, Note Callouts can include other HTML elements for more complex constructions!


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:

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!


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


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:

Pilot mechanical pencils

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.


Mitsubishi double-knock mechanical pencils

This is a Breakout image—it extends to the edge of the browser on larger screens.

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.


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.


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

1 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

Full-width Bleeds

Works on: Any WordPress website running FOCUS

What the heck is a full-width bleed? You’re looking at one! It’s a section that spans the entire width of the browser (usually with a colored background to make it stand out).

Pretty much every business website you’ve seen since 2015 has included a series of full-width bleeds on its home page.

As a result, full-width bleeds are the main reason people think they need Page Builders. But why Page Builders? Because most WordPress Themes cannot accommodate bleeds natively.

But a Page Builder is a huge price to pay for a few full-width sections that make your home page look better. They come with all sorts of drawbacks and gotchas:

  • You’ll be forced to learn a clunky UI to try and get the outcomes you want
  • Every page built with a Page Builder is now a snowflake—you’ll need to come back and address every single thing you did with that Page Builder if you ever want to use anything different in the future (like a different Theme, Page Builder, etc)
  • What about getting new elements to work in responsive environments? Good luck 😂

Fact is, only FOCUS gives you the power of full-width bleeds without the site- and wallet-destroying drawbacks of Page Builders.

Stop living that complicated WordPress life and start winning with the simplicity of FOCUS:

Check out FOCUS now →