WAIT: How to / Typography scale generator / Theme Styles

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”.

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?

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.

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.