Secondary Font
Select a secondary font, and then deploy it on any content elements you want (h1–h4, blockquotes, or captions).
This is an easy way to add variety to any design, and it also opens up font pairing opportunities.
Try for yourself—select a serif like IBM Plex Serif as your primary font, and then select a sans-serif like IBM Plex Sans as your secondary font.
The Calculator notices whenever you select a secondary font, and it optimizes the metrics of both fonts to ensure perfect sizing and spacing at all times 🤯
Code Font
If you ever include code snippets in your content, you’ll appreciate how the Calculator optimizes for your selected Code Font.
After all, words aren’t the only thing that gets presented and read around here—sometimes we need code, too!
Colors
Want to play around with dark mode or simply have a different color palette in mind? Use the color selectors to create the vibe you want.
For example, try this classic palette from Daring Fireball, a popular technology blog that’s been rocking its own version of dark mode for over 15 years:
- Background: 4a525a
- Text: eee
- Accent: ccc
CSS Targeting
This might be the most important feature of the Pro Mode Calculator, simply because it’s the key to making your GRT implementations as easy as possible!
Whether you’re shoehorning GRT into an existing project or starting from scratch, you’re still going to need GRT CSS to fit into your working environment.
Use the CSS Targeting Prefix option to supply the Calculator with CSS targeting reflective of your HTML source. Here’s how this works…
By default, the Calculator expects an HTML source (for your content, at least) that looks like this:
<div class="grt"> // This could be any block-level tag, such as an <article>
<h1>This is my headline!</h1>
<p>Now we get into the meat of this document—paragraph after paragraph of boring old text.</p>
<h2>How about a sub-headline?</h2>
<p class="caption">This caption is lit</p>
<p>Back to it with another paragraph. Are you actually reading this?</p>
</div>
But maybe your HTML source isn’t quite so simple. Maybe it looks something like this:
<article class="wp-post">
<h1 class="headline">This is my headline!</h1>
<p>Now we get into the meat of this document—paragraph after paragraph of boring old text.</p>
<h2>How about a sub-headline?</h2>
<p class="caption">This caption is lit</p>
<p>Back to it with another paragraph. Are you actually reading this?</p>
</article>
To get the GRT CSS to work in this environment, you’d need to enter .wp-post as your CSS Targeting Prefix.
You may also encounter a scenario where simple targeting is not enough to override default styles in your project.
If you find this is the case, include targeting from another element higher up the document tree. It might look something like this:
<div id="content">
...
<article class="wp-post">
<h1>This is my headline!</h1>
<p>Now we get into the meat of this document—paragraph after paragraph of boring old text.</p>
<h2>How about a sub-headline?</h2>
<p class="caption">This caption is lit</p>
<p>Back to it with another paragraph. Are you actually reading this?</p>
</article>
...
</div>
To increase the specificity of your CSS Targeting Prefix, you could enter #content .wp-post.
If necessary, continue to increase the specificity until GRT CSS styles are being applied properly.
CSS Output Mode
Basic CSS is fine, but most developers have moved on to more powerful CSS architecting tools like SCSS.
The GRT Calculator honors this and enables you to select different output modes—and even different behaviors within those output modes! Here are your options:
- CSS with CSS custom properties
- SCSS with CSS custom properties
- SCSS with CSS custom properties and variable escaping (necessary in some environments)
- SCSS with SCSS variables
If you’re not already doing so, I highly recommend working with CSS custom properties.
Most collaborative teams and agencies use custom properties to achieve greater output consistency. You’ll also find custom properties in essentially every modern piece of web software.
Bottom line? Knowing how to work with CSS custom properties is now an essential skill. The Pro Mode Calculator acknowledges this and includes custom properties in your GRT CSS!