I want to make my text elements responsive

Hi, I’m having some trouble understanding Responsive text and calc() feature.

I found this KB, however, I still doesn’t get it.

The default font size settings from text elements in the starter template are calc() thing.

Can someone explain me about calc(), EM, REM and how to make my text elements (e.g. headline) responsive?

Hey Arisa,

The result of the Responsive Text shortcode and the CSS method is similar. Both of them will make the text’s font size respond to the browser’s viewport

The difference between the two is the method. The Responsive Text shortcode uses JavaScript. It can also be setup within the Page’s Cornerstone Settings. See https://youtu.be/UXPhObp296c

Regarding the CSS method, the font size is made responsive by adding a scalable unit like vw into the mix using the calc feature of CSS. To understand that, you need to read this article: https://css-tricks.com/snippets/css/fluid-typography/. Here’s a video of a sample setup in a Button element: https://youtu.be/SdQHpAgFumw. It’s not limited to the Button, you can do that in all V2 elements with a Font Size option.

Hope that helps.

Hi, @christian_y!

I just checked both links, and I have some questions.

calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])))

Q1.I now know that viewport depends on the width of specific device. But does each 100vh and 100vw mean 100% of height and width of the device?

Q2. Considering Responsive Text shortcode or calc feature of CSS, which do you think is better or would like to recommend?

Hi Arisa,

Yes, it’s 100% of the width and height of the current device you’re using.

And I personally recommend using calc since it’s CSS based, the shortcode is okay but it may not accurate depending on your preference due to compressions. Please try the calc :slight_smile:

Thanks!

Hi, @Rad! Great to see you again.

I’m totally understood, may I ask you one more question?

calc(1.5vw + 32px)

One of the text elements from starter template was set like this.

In this case, so the minimum size is 1.5vw (1.5% of viewable full width) and and [maximum size - 1.5w] is 32px? I’m still not familiar with vw unit.

calc(0.5vw + 24px)

In this case, the minimum size of the text element is 0.5% of viewpoint (considering width), and [maximum size - 0.5vw] is 24px? I just feel like 0.5% is a really small value.

Should I use vw or vh for the max. and min. sizes instead of px or other units? I’m wondering which of them (e.g. max. size, min. size, min. viewport size, etc.) should I set with vw.

And both of the calc codes above seems like they doesn’t include [max. viewport width - min. viewport width]. Can I just skip using some values like that?

Hi again, Arisa.

VW is relative to the width of the viewport. To simplify it, just think of 100vw as 100% of the container. So, let’s say you have a 1920px monitor and you’re using a Blank No Container template with a Row with Inner Container disabled. Setting a font size of calc(1.5vw + 32px) means the generated value of the font would be 0.5% of 1920 which is 96 + 32 which is a total of 124px. That would be the size of your font in a Full HD or 1920 x 1080px screen size. To simplify also, please forget about VH which takes into account the 1080px.

With that said, there’s no max and min in that equation but the PX value there is like the min size. VW, in it self, is the one that makes the text responsive. The PX value is there to prevent it the text from getting smaller in small screens.

If you’re not into math, I’d recommend that you just play around with the vw + px values to get the right mix.

Hope that helps.

Hi, @christian_y :slight_smile:

I’m little bit confused, why 1.5vw is applied as 0.5% of full width. Isn’t that 1.5% of full width?

Hi Arisa,

Yes, it should be 1.5%, sorry for the confusion :slight_smile:

Thanks!

Hi @Rad!

So it is the best way to use calc(vw+px) to make text elements responsive.

calc(Avw + Bpx)

When it comes to calc code above, A is the minimum value and B is the maximum value for enlarging the text additionally.

B does work when the viewport width is enough such as PC, and doesn’t work when there is not enough space or tight to enlarge such as mobile devices.

Did I understand correctly? Also I want to know the condition which let B activated.

Hello Arisa,

To have fully fluid typography, you have to follow the whole calc equation:

calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])))

It is best that you review these links for more details and further explanations:

Hope this helps.

Hi @RueNel :slight_smile:

So codes like calc(1.5vw + 24px) does work but for much more fluid typography, it is recommended to use the whole calc equation, right?

I saw the code calc(1.5vw + 24px) set as default in the starter template and then thought that is the most optimized option.

Hi Arisa,

Yes, it will be better following that setup. And it depends too the template doesn’t need the full-equation since it’s works best on that setup. So if you’ll going to change something like the amount of text, size, and so on. Then it would require different values too, it’s a trial and error but yes, you could try the full-equation too if that’s what fit to your preference.

Thanks!

Thanks @Rad, have a nice day! :smiley:

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.