Global Typography Styles available as Class

Part of the initial setup is always the styling of the global typography – mainly the headings.

Sometimes I need to give headings or paragraphs the style of a specific heading like for example the h5 heading. For this I create Global Classes for the headings h1 - h6 that resemble exactly the style of the real heading.
So when my structure requires me to use an h3 heading but visually it should be a h5 for example I just give it my .h5 class (often useful in Query Items).

I thought it would be great if the Global Typography Style also generates a class. So that the style would be saved like this in the style sheet:

h1,
.h1 {
font-size: 3rem;
font-weight: 800;
...
}

I feel like this would be useful enough to build this into Cwicly.
What do you think about this?

Hi @Jonas,

Smart request, I also use these classes a lot :wink:

And right now it is impossible to keep them in sync with global typography settings… So the only way is to manage all typography with stylesheet, too bad.

Hi @yankiara,

thanks for weighing in on this one :slight_smile: The “smart idea” came in the shower this morning :smiley:
Yes, just had the case that I changed the style of my heading a bit and forgot the classes :expressionless: ^^

That’s quite a common use case for me and important in terms of consistency.
My previous go-to solution implemented this by default.
This topic was buzzing around in my head in the past, so thanks for bringing this up.

That would be the main point of this suggestion, I guess.


If considered, an option to toggle this functionality would be nice.

Hi @Louis,

with the new Cwicly UI we are almost there. Is there a way you could add this to the Global Headings?
The ability to start the Additional Classes with a comma would do the trick I guess.

Hello @Jonas,

Thanks for bringing this up again.

I believe you could use Custom Rule which would allow you to apply styles both to h2 and .h2 (while going through this, there seems to be a bug with having multiple :pseudos dynamic tags, which will be fixed in the next few updates).

However, this removes the element from the Headings group…
Something to look into.

2 Likes

Hi @Louis,

I thought about using Custom Rule but then – as you mentioned – the heading get’s removed from the Headings group.
Will think about if I’m going to use Custom Rule for this.