Home Calculators 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 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 to your next project:

  • 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 💪🏿

Why not give your projects an unfair advantage with Golden Ratio Typography?

Wayyyy more than a line height calculator 🤯

The GRT Calculator provides a complete design system that includes the foundational elements you’ll need for every project:

And the best part? GRT Pros get the CSS they need to implement the GRT Design System on their own projects:

GRT for Websites
GRT for Discourse
GRT for Email

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!