WAIT: How to / Typography scale generator / Theme Styles

[arbeetester]

Browser: Vivaldi/LibreWolf/Edge/Firefox
OS: Windows
URL: Unable/won’t supply - customer site + not sharing on a public forum.
Pic: After description, bottom of this post.

I’ve been working on migrating a client site from Elementor () to Bricks.

Obviously, this means a total rebuild.

The process has been:

• Disable Elementor + Pro + Hello Theme
• Enable Bricks Theme, clear cache, build things
• Revert once completed

(We were not in a position to utilise Local or similar for staging.)

For a proof of concept, I started by building a Privacy Policy template and working on that, before moving on to the site-wide header and footer. This meant copying over font clamp settings from Elementor, etc. So far so good.

I should also mention that for consistency, the root font size has been set back to 16px/100%.

Then I started working on other pages, and noticed that the header and footer font has become microscopic when viewed on the live front end.

Even though I’ve set the clamp calculation to go from 13px to 14x (for a top nav menu item), between a view port of 380px up to 1400x, for some reason the font is showing up as <9px ???

I’ve had similar issues with other sized fonts, like body, h1, etc. All taking on smaller sizes.

The clamp calc is perfect. I’ve run it by several generators:
clamp(0.81rem, 0.78922rem + 0.09804vw, 0.88rem);

I’ve also noticed that on all other pages, beyond the Privacy Policy template, that other elements are bugging out, like forms in the footer, icons/svgs, off-canvas items, etc.

Really frustrating as up to this point everything seemed to work fine in Bricks, but after updating it’s like it has a mind of its own.

Would really appreciate some help here, as this doesn’t seem to be working at all, and this project is already overdue from a time perspective as we’ve been trying to no avail to fix all these quirks in Bricks. Whilst the update was recent (last days), this was also happening on V2.X (think we were on v2.1)

Thanks.

Note: As per the attached pic, it seems that Bricks is setting the font size to 62.5% of what it should be, when viewing any other page/template other than the Privacy Policy template… why? The root font size has been restored to 16px/100%…?

Troubleshooting:

• Clearing cache (WP-plugin + browser)
• Tested in multiple browsers
• Resetting font root size 10 > 16 and back again
• Rebuilding CSS in bricks
• Re-doing font calc multiple times
• Trying to build different pages and getting different element results
• Praying to all known gods

[arbeetester]

Other thing to mention, we have utilised this process twice before, to move client sites from Elementor to Bricks (on previous versions), that have the same/similar WP plugins installed, etc, and have not come across this issue before.

In both instances we were able to utilise font clamp, page templates, headers/footers without issue.

[timmse]

Hi Arbee,
Thanks so much for your report/rant

Unfortunately, I can’t tell from your description where/how you set the HTML font size to 100%, but I’m guessing you didn’t do it in the theme styles. Am I right?

If so, please create a theme style, apply it to the entire website, and set the HTML font size to 100% there. I’m pretty sure that should work.

Without a link, of course, this is just a guess…

[arbeetester]

Thanks Timmse - that’s exactly where I set the font size back to 100%.

Per OP, I’ve created a theme style for this site. And it is already applied side-wide.

The only way I could get this to work was to create a new theme style and apply that (same settings), then delete/discard the old one.

So now I can get on with setting up fluid typography… only that appears to now be broken

The issue:

I’ve tried to set up two scales (headings, typography), using custom scale step names, and manual values.

I took the font clamp max and min values (pre-calculation), and entered them in for each scale step.

This gives me precise control over the sizing… only this just doesn’t work outside of the style manager.

See below image. Bricks is just flat out ignoring the step naming and sizing. It has only retained the name of each overall scale. If this is user error, then it is also design error, because I can see no logical way to get this to behave as intended.

Is this a bug, or poorly designed? And where do I set the line height for each variable?

This isn’t a ‘rant’ - I’m beyond frustrated as I’ve now spent hours trying to get a simple typography system set up and keep on facing errors with the software I’m paying to use, and have clients depending on me to produce work using these tools.

In the interim, I’m going back to manually copying and pasting font clamp calculations all over the place, as I can’t see any way to centrally administer them (outside of some H1>H4 + P styles in the ‘theme builder’).

[arbeetester]

Another massive issue: The CSS that is generated is also broken.

I thought whilst your team patches all of these bugs, that I could at least use the CSS that is generated from all the typography that I set up eariler. But it looks like that is more wasted time.

What’s going on?

I’ve set up a typography step that should go from 13-14px, depending on size.

Not a massive change, but follow me here.

Per the image, I’ve entered this correctly.

When I copy the resulting code, and then view it on the front end, the font is MASSIVE.

Look at that, it’s decided to randomly make the font 22px instead of 14.

Around 62.% larger.
(Remember, we’ve set the scaling back to 16px/100%, so why’s it ignoring that?)

The CSS should be clamp(0.81rem, 0.78922rem + 0.09804vw, 0.88rem);
Not, clamp(1.3rem, calc(0.0009259259259259247 * (100vw - 36rem) + 1.3rem), 1.4rem)

See the pic for all of this output.

Elementor might be trash, but at least when it comes to typography it seems to have things working just fine. Might be worth looking into how that’s engineered, because this solution isn’t it.

And again, this might all be user error, but then that’s also design error, because I am entering in configurables in their logical place, and getting incorrect/broken output.

[timmse]

Thanks for the further explanations! Unfortunately, much of this is not apparent from your original report, so I could only make assumptions. Ideally, a report should consist of a brief, concise description of the problem and how it can be reproduced.

Let’s try to break it down…

First of all, please make sure to explicitly set the html font size to 100% in the style manager settings too. That’s a known issue – even if 100% is shown as a placeholder, it still uses the 62.5%, unless it’s explicitly set. Then regenerate your scales, by clicking “Generate variables”.

@arbeetester

Bricks is just flat out ignoring the step naming and sizing. It has only retained the name of each overall scale.

Once you have created a scale, you need to click on “generate variables” (bottom left corner) so that the variables are created with your settings. Could it be that you missed this step?

@arbeetester

And where do I set the line height for each variable?

You would need to create a separate scale for your line heights (if you want to). The labeling may be somewhat misleading, as one might think that this happens in one step. However, this is not possible, as you would also need to specify font families in order to obtain a functional variable such as --body-font: 1rem/1.6 system-ui, sans-serif;, which only works in the oldschool CSS “font” shorthand property, for which there is no setting in Bricks. Nowadays, individual properties tend to be defined separately (font-size, line-height, font-family), which gives you more flexibility and maintainability.

@arbeetester

I’m going back to manually copying and pasting font clamp calculations all over the place, as I can’t see any way to centrally administer them…

The fundamental question is why you are using the typography scale generator at all if your values already exist. You could just as easily set them directly in the theme styles for h1-h6 (and body), or alternatively create variables manually in the variable manager and insert them into the theme styles. It’s up to you.

[arbeetester]

No worries - I added as much context as possible to avoid follow up questions and to help with reproducibility, along with screenshots of all relevant information. Working in tech support at the start of my career many moons ago, that’s what was considered ‘ideal’, though times might have changed

@timmse

First of all, please make sure to explicitly set the html font size to 100% in the style manager settings too. That’s a known issue – even if 100% is shown as a placeholder, it still uses the 62.5%, unless it’s explicitly set.

Yes - the HTML-font size was inherited from the general settings to reset HTML back to 100%. I’ve gone ahead and manually set it in the Style Manager settings as well.

Don’t know if it’s on your roadmap, but I’d recommend unifying all these similar theme settings to this single window. Or does this now replace it in v2.2?

---

@timmse

Then regenerate your scales, by clicking “Generate variables”.

All the information and YT guides I’ve seen have said that hitting ‘Generate Variables’ will wipe out everything that has been set for that scale, which is why I didn’t click it. In fact, Bricks is showing me a popup that says “Generating variables will delete all existing variables in this category. Do you want to proceed?” - I’m going to proceed, based on your advice… aaand it told me it set the variables successfully. Great!

I had to set this twice and reload Bricks multiple times for this to work. First time after updating the settings, type set & saving it allowed me to use the variables in the editor, but did nothing in the front end. Restarting Bricks wiped out all settings. After re-setting everything it finally worked.

---

@timmse

You would need to create a separate scale for your line heights (if you want to).

How would I configure that? I can’t see a logical way to do it in the Theme Styles editor (it’s not ‘spacing’, nor is it an available ‘typography setting’ - only pre-defined set jumps seem to be available?

However it’s done, I’d recommend adding it as a UI element on the Typography page, as most are interested in size + line height configurable in the same area.

---

@timmse

The fundamental question is why you are using the typography scale generator at all if your values already exist. You could just as easily set them directly in the theme styles for h1-h6 (and body), or alternatively create variables manually in the variable manager and insert them into the theme styles. It’s up to you.

I’m doing it this way, for two reasons;

1. Since moving from Elementor to Bricks, I’ve been manually setting font sizes as I could see no true typography interface to handle font clamp, just the scale settings. No professional web designer/dev would want to marry up font sizes to scale if they knew what they were doing. What if I have a H4 that needs to be the size of a H3, but not tagged as such? What if I have text that needs to be H4 size, but not an actual H4 tag? The scale settings are only useful for WP content such as blog posts that are ingested into Bricks, but not for actual web design. There’s a similar interface in Elementor I’m sure you’re aware of, which performs the same function. But they also have a global typography settings section too.
2. I was excited to hear about ‘fluid typography’ in Bricks, as one unified interface to handle typography settings. This was furthered by the fact that the settings area is called typography - leading me to believe this is where I should be setting up my typography settings? Are you saying there is somewhere else I should be doing that?

[timmse]

@arbeetester

Don’t know if it’s on your roadmap, but I’d recommend unifying all these similar theme settings to this single window.

There is actually no duplication between the theme styles and the style manager settings, except for the HTML font size. And we will take care of that (as already mentioned).

@arbeetester

There’s a similar interface in Elementor I’m sure you’re aware of, which performs the same function. But they also have a global typography settings section too.

@arbeetester

I was excited to hear about ‘fluid typography’ in Bricks, as one unified interface to handle typography settings.

It seems as though you are mixing things up here. In Bricks, there are “Theme Styles” where you can set global defaults. This also includes settings for your font sizes (body, h1-h6, and others).

The typography scale generator merely creates CSS variables that you can then use within the theme styles (or individually on elements). To do this, however, you must also enter the generated variables accordingly.

@arbeetester

Line heights: How would I configure that?

It depends entirely on what you want to do. Line heights are usually defined “unitless”, and don’t need to be “clamped”, because they refer to the font size anyway » line-height - CSS | MDN

@arbeetester

…adding it as a UI element on the Typography page, as most are interested in size + line height configurable in the same area.

As mentioned, you can configure all of this in the Theme Styles: Theme Styles – Bricks Academy

I think we can agree that your report is by no means a bug report, but rather a fundamental misunderstanding of the different features (such as the typography scale generator and global settings such as theme styles). For this reason, I am moving the thread to the “how to” category.

If there are still technical problems, I would ask you to create a separate, short, concise report for each problem, containing detailed steps to reproduce the problem.

[arbeetester]

This is an open bug report, that was mistakenly moved by the moderator

---

Hey Timmse,

to be honest, I’m very disappointed with this response.

You seem to have cherry picked what to respond to, and decided to ignore this bug report for some reason.

I expected better here, especially as I am a paying customer and have noted both a bug and some core issues with the software and have been met with… whatever that response was.

Now, let’s go through this, again. (I’ve taking a backup of this, in case this thread is removed).

First - the bug

I had to set the font settings multiple times, re-save & re-load for it to eventually work, after using the latest version of Brick Builder. Don’t dismiss this as a user error. You were provided with steps & context to reproduce. Over to you to investigate.

Next - addressing your confusion

It seems as though you are mixing things up here. In Bricks, there are “Theme Styles” where you can set global defaults. This also includes settings for your font sizes (body, h1-h6, and others).

The typography scale generator merely creates CSS variables that you can then use within the theme styles (or individually on elements). To do this, however, you must also enter the generated variables accordingly.

You seem to have ignored or misread my previous statements, accusing me of being confused (when it is you who are). Again, I am in no way confused here. Re-read my comments on H-sizing vs general font settings, and also please provide an answer on where/how I can configure proper sizing for fonts, because the new ‘typography’ settings are a misnomer if all they are is a buggy sizing generator.

And again, yes, having multiple touchpoints to configure fonts is poor UX and needs to be re-thought.

Over to you.

[timmse]

Hi Arbee,
I apologize - I might have missed or misunderstood parts of the issue(s). Let me reset:

You mentioned having to set things twice and reload multiple times before it worked. That does sound like a bug, and I shouldn’t have dismissed it. However, I’m not seeing clear reproduction steps I can follow to replicate it on my end. I also asked several AIs to summarize the thread and outline the replication steps, but unfortunately, without success.

Could you help me understand the exact sequence?

For example:

1. Create a new theme style
2. Set HTML font size to 100% in theme styles
3. Create a typography scale with these settings (show the exact settings / show the style manager settings, especially what is set for HTML font size)
4. Add the generated variables to the theme styles typography settings, and click save
5. …

Result: what happened vs what should have happened?

This will help me to reproduce it and escalate it to the development team with proper details. You can do this in writing or record a screencast showing each step.

It would also be interesting to know whether the problem occurs only in this installation or also in a new installation.