Home Tools Editor Styles Subscribe Login
Pro Mode

px

px

Layout Colors

Site Background

Text

Accent Text

Links

GRT for Websites

  • Discover the perfect typography for your website by entering your current (or desired) font, font size, and/or content width
  • Experiment with different fonts, sizes, and widths to see what works best
  • Optimize for the ultimate reading experience on any device
  • Get GRT CSS for your own website or project by switching to Pro Mode (use the toggle switch above 👆)
Headings

H1

H2

H3

H4

Why is H4 set to the Primary Font by default?

Due to default GRT spacing, H4 should primarily be used to introduce lists rather than serving as a section heading or sub-heading. Because of this, the Primary Font is used to relate the H4 more closely to whatever follows.

Other Text Elements

Blockquotes

Captions

Drop Caps

Callouts

Basic

Alert

Note

Buttons

Basic

Save

Delete

Action

Update

By default, the GRT Calculator uses .grt as the prefix for GRT styles, but your software almost certainly calls for different CSS targeting. Use this field to add the targeting you need to make GRT CSS work seamlessly in your environment.

Depending on the SCSS preprocessor you use, you may need to escape CSS custom property names to get your SCSS to compile correctly. Use this option to generate results that will work for you!

Why add Golden Ratio Typography to your projects? 🤔

Here’s why it’s essential to add Golden Ratio Typography everywhere you compose text online:

  • GRT-enhanced text looks inviting and is easy to read
  • Visitors will pay attention longer, consume more content, connect with your messages better, and buy more of whatever you’re selling!
  • You—and your message—will be more authoritative 👑

Give your content an unfair advantage with Golden Ratio Typography 🧠

Wayyyy more than a line height calculator 🤯

The GRT Calculator provides a complete design system that includes everything you need to make your content stand out:

Best of all, you can use GRT Tools to implement the GRT Design System everywhere you compose text:

GRT for Websites
GRT for Email
GRT for Discourse

Dig deeper 🧐

Did you know? The GRT Calculator also includes a handy API you can use to add dynamic GRT outcomes to your own software!