Fluid Typography

Hi there,

Not sure what you mean by clamp function.

You can use CSS varients in GP’s typography, like this: https://app.screencast.com/wyjrio2C4mpam

And you need to add :root CSS to define the variant, like this: https://app.screencast.com/CmjYYCNsrpOvX

Hope that’s clear!

Thank you, yes this is clear and just to clarify my question, I want to add this clamp string below, to the root CSS and then assign it in the customiser, as you explained with your own example

–header-h1: clamp(2.2rem, calc(2.2rem + ((1vw – 0.36rem) * 0.1266)), 3.8rem);

Hi there,

is this topic resolved ?

Hello, I would say it’s partially resolved. Everything works fine, when I enter the CSS in the customiser area, but stops working if I transfer the CSS to the stylesheet of my child theme.

I can live with it, unless you know of something daft, I might have done, but otherwise, the rest of the CSS in the stylesheet is fine..

Is there anything yet int the documents about fluid typography? I can’t find any

In the Child theme, if the CSS is identical then it should work … perhaps not whilst you’re in the Customizer. Does it work on the front end ?

Fluid typography, it really is up to you to define what you need. There are lots of Clamp calculators out there than can help, like this one:

https://utopia.fyi/clamp/calculator/

Is that what you need?

Thanks for the link to the generator David, I use a similar but different tool and this part of adapting fluid typography is working, just as long as I enter the CSS into the customiser and not my childtheme stylesheet.

However, I only see the results on the front-end and never in the customiser, but I can live with this.

I know this is a new feature, are there instructions available yet?

***Update*** I found a missing semi-colon in the stylesheet, which has fixed the problem on the front-end. I still don’t see the text scaling in the back-end, but that’s fine.

Could you point me please to the documentation?

We don’t have documentation of Fluid Typography or using CSS variables within the customizer, as thats really up to you as its custom styling.

What is it you’re stuck on ?

Agree, although there are nuances to adding the variable in the customiser. Having been used to doing this in Oxygen, which is virtually the same, the method there is to change the units from PX, to a dash (-), which represents, custom input.
So, maybe adding something very basic to the documentation along these lines could be of some use, as well as alerting anyone attempting this, that the text won’t scale in the customiser area!

It might even save you a good few support hours, if there are some notes to hand.

I think I’m good now though – Cheers!

Ah ok, so to assists:
Oxygen is doing some proprietary function of its own.

GP does not, the fields we provide in the Customizer and the GenerateBlocks settings are simply the CSS Property value. And you can use any ( most ) CSS values associated with that property. So the more complex CSS properties for example can be used in any applicable field:

CSS Custom Properties: var(--my-custom-prop-name)
https://developer.mozilla.org/en-US/docs/Web/CSS/var

Clamp: clamp(1rem, 2.5vw, 2rem);
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

Calc: calc( 10px + 1.5vw)
https://developer.mozilla.org/en-US/docs/Web/CSS/calc

So the font-size property in the Customizer as an example would accept any of those values as in its field.

What we try to do is allow you to add properties in the same way you would write the CSS, that way you get the freedom to use whatever you require, the fields will support future CSS updates, and we don’t have to build proprietary tools for you to use those values.

I hope that helps.

Hello David, yes, all is clear now thank you and I have my variables working globally, via the customiser.

Cheers

Glad to hear that !