How to setup the typography variables

How To
#1

Hey how can is setup the typography in the global classes because if i apply a variable to an element they text gets to big.

#2

Have you had a look at the docs? Global Classes Creator – Bricksforge Docs

#3

Yes but i find it a bit hard to set it up the css clamp is a bit confusing for me maybe you can help me?

#4

well, there are different ways to work with this.

First, try and error, Play around with the Css Clamp Genarator and look in the frontend if the generated font sizes fits your needs.

Or you can have a look here Modern Fluid Typography Using CSS Clamp — Smashing Magazine for example, to learn how it works.

Lets have a look on the screenshot from the docs.

4058×1688 181 KB

In the second line you define a “min font size” and a “max font size” for any viewport between 20rem and 120rem.

This generates the

clamp(1.5rem, 0.9rem + 3vw, 4.rem)
clamp([value-min], [value-preferred], [value-max]);

It means, based on the viewport size the font size gets fluid bigger or smaller (the value-prefered), but the font size is ever min 1.5rem (value-min) and never bigger than 4 rem( value-max).

I hope that helped a bit.