Responsive Font Sizes (em, rem)?

Publishing help General
1

Any plans to have responsive font sizes ?

2

One of the main aspects of Webflow is the ease to make responsive design; so I 'm surprised there is no possibility top use ems or rems. I guess there’s a good reason and that it is in the pipeline :slight_smile:

Because I’m not experienced enough in WebFlow, I’m not sure if working with different fixed font sizes according to browsers viewport does a reasonable job. I think the lack of em / rem might even be a limitation by design.

Meanwhile, I’m trying to incorporate a javascript plugin (Responsive-Text) to resize automatically.

What do you think ? What do you usually settle for ?

3

As a graphic designer I prefer fixed sizes for different viewports. With 100% responsive fonts you can’t predict always what will happen.

Surely it is “fun” to use it sometimes in certain designs, if it’s available.

4

In my experience you are better off setting a set of rules at each media query for font size. Fonts vary in size, so depending on what you are using you might be better off hand picking them. Just my two cents.

5

We support this already, but you’ll have to type it into the field to make to make it work. So type in “1.2 em” or “1 rem” for it to apply to that class.

5 Likes
6

Oh already there ! Thanks :slight_smile:

@rowan & Jonas76 : thanks for your input guys, I think I get your (valid) point.

7

Hi, I’m confused about how to make the text responsive. Do I enter in rem in the font size field on the Typography tab? I would like the Title text shown here to stay with a 50px height and become smaller if the text exceeds the alloted space:

2816Ă—1358 1.36 MB

Also, I how do I test this once I’ve added it?

Thanks!

8

Thanks for this bit of info. To echo ravin3000’s question, where do you input the “1 rem” / “1.2 em” values in design mode?

9

Where you would typically type “16” to make it “16 px”, instead type “1 em”, and the units will change to “em”.

1 Like
10

Thanks a lot for this. Been having issues with responsive text.

11

Hi anyone,

maybe it is just me, but this is not working. I tried it the way ravin30000 showed it in his pictures and nothing happens.
Thanks for your help.

Edit: I figured it out :blush: You are not allowed to make a space, so type “1em” instead of “1 em” and it will work.

12

TheSergie, how does one set the initial REM size in pixels?

15

Webflow supports EM and REM, but the problem is, REM became useless, since it’s not possible to set HTML font-size, only BODY font-size.

This could be fixed by making HTML extends BODY selector, since it doesn’t have any action.

2 Likes
16

It could be done with custom code quite easily:

Add the following to your sites custom code in :

<style type="text/css">
  
    @media (min-width: 992px) {
    html {
    font-size:18px;
    }
     }
    @media (max-width: 991px) {
    html {
    font-size:16px;
    }
     }

    @media (max-width: 767px) {
    html {
    font-size:15px;
    }
    }

    @media (max-width: 479px) {
    html {
    font-size:14px;
    }
    }
</style>
3 Likes
17

The only downside of custom code in this way, is it’s not replicated visually inside Webflow when designing… ah well!

18

Not true. For CSS only, you can put it in a Embed Code block and the styles will apply in the designer.

3 Likes
19

Of course… I completely forgot about that haha