Font sizes - global, base, format

[Thomxnj]

Hi,

I’ve been looking through the knowledge base as well as the forum and cant seem to find information on how the fonts work in Pro. For example, I have a headline in a header hero image. I have my fonts setup to stepped in the global settings. On the header, there is a section that has ‘base font size’ and then under the format for the headline there is ‘font size’. How do these all work together? It’s a bit confusing.

Thank you for your help!

[Prasant]

Hello @Thomxnj,

Thanks for asking.

Base font size is set on the top level element. Sometimes the text is a few elements down like in a span. By setting base font size you can use em units for margin/padding. This means that if you ever want to resize the entire element proportionately you can just adjust the base font size.

Try adding a new button. Change the font size and you’ll notice the padding remains the same only font size changes. Next try changing the values of base font. You’ll notice that padding and font size changes in proportion. It’s because the padding is set in ems. Here is a screencast that you can take a look. https://www.screencast.com/t/TSLDmp85

Thanks.

[Thomxnj]

Thanks for your response.

So how does the “Root Font Size” global settings effect this?

Thanks

[rad]

Hi there,

It’s a global font size will be applied to all elements, BUT, only if that element has no local font size. It’s like a fall back font size if there is no applied font size.

Example,

<div>Hello<span>World</div>

We can safely assume that root font size will be applied to both Hello and World text. But if it’s going to be like this

<div>Hello<span style="font-size:20px">World</div>

Then, the root font size will be applied to Hello, but World will remain in 20px (local font size).

The style="font-size:20px" is just a sample, it could be implemented in many ways, like classes and it depends on the element. Some of the builders have its own font styling option, you can set them to inherit the root or use a specific value.

Thanks!

[Thomxnj]

Hi,

I still don’t really follow. If im correct, if I apply a font size to the headline of a header, it will negate the global font settings. But in the case of responsiveness, there is no way to adjust this locally. So what happens to the global settings? Does the headline just not become responsive?

Also, it appears that when I change the font of the headline, it just adds size onto the base font size. Please see the attached video.

Thanks in advance!

[christopher]

Hi there,

For the responsive text kindly read this thread reply:

Responsive text Header

Regarding the Headline, in the Header, it depends on which value you select for your font. If it is em then it will be a percentage of the parent element, if it is rem then it is a percentage of the root element of the site (HTML tag) and if it is px then independent of the other elements.

For more information: https://j.eremy.net/confused-about-rem-and-em/

Thank you.

[Thomxnj]

Hi,

Thanks for all the information, it has been a great help.

Im utilizing the first option you listed “Utilize calc() and Viewport Units”. Im having one issue in the hero template - the sub-headline runs off the page when on smaller screens. Is there a way to create a break in the line so it wraps the text to the next line?

Thank you!

[nabeel]

Hi again,

That can be done with CSS, I tried to check your site but your site is under construction. Can you please disable it temporarily so we can take a look?

Thanks!

[Thomxnj]

Hi,

I temporarily disabled the under construction page.

Thanks

[ruenel]

Hello There,

The sub headline issue could be because on how you use the text or headline element. Please make sure that Craft Cannabis is using another element which is different from the sub text element. I am seeing only only element both shared by this two heading and sub title text. Please edit your header and make sure that they both use independent element.

Hope this make sense.

[Thomxnj]

Hi,

Understood, but isn’t that the point of the sub headline feature? Nonetheless, I have set the sub headline as a separate element and it still gets cut off on resizing. It almost appears as if the whole hero element doesn’t not respond.

Screen shot taken from a mobile device, you can see even the social button (the arrow) which is set to center, seems to be off to the right.

Any ideas?

Thanks

[rad]

Hi there,

Please try this styling,

.hm16.x-text .x-text-content-text-primary {
    font-size: calc(4vw + .2em);
}

Your main headline has this,

.hm15.x-text .x-text-content-text-primary {
    font-size: calc(4vw + 1em);
}

The view base should have the same 4w, then only change the font size like 1em and 0.2em (hence, main and sub size).

Thanks!

[Thomxnj]

Hi,

Thank you for all of your help.

I was able to achieve the same layout, but with responsive text, using the revolution slider. It seems like I have a but more control this way.

Thanks!

[nabeel]

Glad you’ve sorted it out.

Cheers!