→ Login ←

px

px

Do not include a hashtag, or else your chosen color will not work!

Do not include a hashtag, or else your chosen color will not work!

Do not include a hashtag, or else your chosen color will not work!

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.

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!

Golden Ratio Typography Pro Calculator

Start your next project out the smart way—with precision sizing, spacing, and typography from the GRT Pro Calculator!

Play around with the Calculator for free, and when you’re ready to add GRT CSS to your website or project, become a GRT Pro to get the code you need for easy implementation!

Imagine making simple decisions based on a design system instead of making arbitrary guesses based on your gut…

GRT Pro makes your life so much easier by providing you with a complete CSS design system based on the golden ratio; all you have to do is select values from this system to use throughout your project.

With GRT Pro, you can think less while doing more—and with far more precision than ever before!

See Pro pricing & features →