Can't control Headline (heading) font size

[capacitor]

I used Cornerstone to make three websites a few years ago and it was easier to use then. (I don’t think I’ve gotten less smart in that time.) Here’s an example:

I want to add a Heading. I use the Headline element in Cornerstone and place it. The font size is exactly the same as a regular Text box. It used to be that I had some control over fonts sizes. Now I can see it has an h1 tag (is that the h1 class), but changes to the Typography settings have no effect on it.

After two hours of searching, I located this forum post:

Heading font and size are not working

Hello, I have tried to put a new heading to the site. For some reason the heading font settings like font, color and font size are not correct but the theme uses root font and font size if I’m using Headline element. If I’m using Classic Custom Headline, the font, size and color are correct. How can I fix this?

which indicates that Classic Headlines respond to Typography and Headlines do not. Why?? Also, I don’t have a Classic Headlines element in the list of available elements. All I could do was add a Classic Text and change the class to h1 to get it to actually be a larger size.

So my questions are:

1. Why does a Headline element not respond to global Typography settings?
2. Where is the mythical Classic Headline element?
3. How (where, specifically) does one actually set the font size and weight for this new Headline element? (Choosing a heading class would be great, so every headline can be changed at once. But for this new Headline element there appears to be no options to: A) choose the h1 class and B) change the values for h1, if the Typography settings have no effect.)
4. Why is there no longer a way to say anything about the font choices in the Headline element settings?

An explanation of the total “stack” of places where font settings are applied would be really helpful. For example, where are the base typography options set, and then where are ALL the places they can get overridden right up to the Headline element actually being used on a page.

Thanks.

[rad]

Hi Peter,

Thanks for reaching out.

As said on that thread, v2 elements are different on classic elements.

1# It has its own typography setting, the one you’re seeing with h1 as option is tag not class. Example, <h1>hello world</h1>. It’s intended to have its own font setup since it’s more flexible than inheriting from global styling, that way, you can control it much better like having multiple looks for the same multiple instances of <h2>.

Now in v2, there is called preset, and that’s where your v2 elements can inherit similar on how classic inherit to global theme option’s font setting.

Please check this https://theme.co/docs/template-manager under Element Presets. Example, let’s save you configured your headline and save it as preset named My Headline, you can then assign your My Headline as default preset for headline please check https://theme.co/docs/template-manager under What are the Element Defaults. Or simply, Apply Reset once you add a headline.

Again, this is for v2 headline with different implementation than its classic counterpart.

2# It’s still there, you can typed in headline and it will display all elements with named headline including the classic one. They are Classic Custom Headline and Classic Featured Headline.

But if the classic elements are not displaying, then you can go to Admin > X or Pro > Settings and enable classic elements.

Or if it’s due to permision, you can enable it on the same settings area

3# Please check this https://theme.co/docs/font-manager, Once you create your font template, you can simply inspect your headline element and choose the font template you created, then choose font size, and so on. You can do the class styling, but you’ll have to apply custom CSS.

For Class example,

.looks_like_h1 .x-text-content-text-primary {
 font-family: "Lato",sans-serif;
 font-weight: 300;
 font-size: 400%;
}

Then simply add the class, like this

Please note that v2 headline has many structure, it even has sub headline, graphics and so on. That’s why it’s not possible to make it similar to classic where only option is Looks Like.

You can still use the classic headline and there is no restriction. Then just use v2 headline if you’re creating complex headlines and text that are unique to others.

4# As explained on 3#, they are different, and with different structure and with many features compared to its counter part. And it’s intended feature for v2 elements to remove limitation of the text styling, and since it has multiple features, even graphics option has its own font styling/sizing that can be easily affected by global font setting if we allow it. Please check this https://theme.co/docs/headline under Graphic Setup.

Thanks!

[capacitor]

Thanks for the detailed post, rad. You helped me located the Classic Custom Headline which was what Headline used to be named. (The addition of the word “Custom” meant that I didn’t see it on the list. I expected “Classic Headline”. Not sure why “custom” was added.)

The pictures are helpful. I think what you are saying is that with the upgrade to v2, you now need to use custom CSS to adjust the text size in v2 headlines. You can use the Font Manager to define it, but you need to hand-code the CSS to connect the class you assign with the appropriate fonts.

I understand HTML and CSS and have coded many web sites, so it’s not new. But to me, the whole reason of using a graphical user interface to avoid coding. For instance, this latest web site is for my wife’s business and she needs to be able to understand how to change font sizes. I don’t plan to teach her CSS to do it. If I understand you correctly, the newer X Theme interface has fallen back to requiring CSS to style all the v2 elements. For instance, the new v2 Image control eliminated all the rounded, circle, square settings. I’m guessing that now has to be hand-coded in CSS as well. Would that be a correct assumption?

Thanks!

[friech]

Hi @peterwh,

No sorry, so got it in the wrong way, on the old days/version we do have 2 headlines, the Custom Headline and the Feature Headline, when we created the V2 elements, we rename these old elements to Classic Custom Headline and Classic Feature Headline.

Those classic elements do have a little setting option compare to its successor elements (V2), but please keep in mind that on the builder we only name the element simply Headline, not V2 Headline. So if you see an element with no prefix of Classic on its name that means that is a new generation of elements.

These new generations of elements have a lot of options controls, yes font-size and border-radius are available, so you don’t need to hand-code it. Please see the documentation here.

If you don’t see all those options on your element, please enable the Advance Mode

Hope it helps,
Cheers!