Font size relative to viewport width

Need help Responsiveness
1

Hi,

I’m building with responsive engine but can’t figure out how to set font size relative to view port size. Is the only solution to set “breakpoint” rules to a few fixed font sizes?

2

Here you go hermano Font Size = ViewPort

Please, don’t forget to mark as a solution so others can find it too :v:

7 Likes
3

Thank you! Very helpful!

I feel this deserves a more straightforward solution :grinning:

2 Likes
4

Yeaah I think font sizes by default should have that option :fist:

2 Likes
5

I found the @font-face didnt work… so I did this instead:

#hero-text { font-family: 'Poppins'; font-weight: 400; Color: #000 font-size: 5.5vw; text-align: center; }

Also, to really super charge this so you can reuse it over across the entire site :slight_smile:

Create a options set, call is something like ‘Font Styles’ - add a bunch of attributes, like: ID, Font Family, Font Weight etc - all the ones you need (you can add to it later)

Now create a reusable element and in that create a repeating group where you get the option set data.

Now in this you add the HTML element like above but you substitute with dynamic data from the option set.

After you have done that drop this reusable element in to a header, or just on the page and make sure you change the html elements ID attribute to pull from the option set you just created for the particular style you would like :slight_smile: COOL

image

image
image613×675 23.6 KB

image
image1761×326 13.3 KB

image

6

One other thing, don’t forget to mark up the HTML text with heading tags if necessary for SEO:
< h1 > Some Text< /h1 > (remove the spaces, in this example)

7

I suppose another thing you could do with this is create a dark or light theme for fonts etc

8

Update on this (this is for my reference as much as others):

When creating the styles use ‘!important’ at the end of them eg.
font-weight:{this optionsset}!important;

This will allow you to add the ids to actual text elements on the page rather than HTML blocks to make it easier to manage - and the !important will override the styles set in the element editor.

Also, another handy trick is setting max using ‘clamp’

h1{
font-size : clamp(2rem, 10vw, 5rem);
}

here clamp has 3 arguments.

  • first one is the minimum allowed font-size.
  • third one is the maximum allowed font-size.
  • second argument is font-size that you wish to always have. Its unit must be relative(vw, vh, ch) and not absolute(i.e not px, mm, pt). relative unit will make it change its size w.r.t the changing screen sizes.

taken from here: Responsive font size in CSS - Stack Overflow.

This make having nice responsive style without break points if you set it up right :slight_smile:

update —

Thinking about this a little more, you can now based on this disregard all but the Font size in the styles, just remember to add the right id attribute to the text you want to be responsive - the reset of the styles will be taken from your original.