Responsive Typography - Setting Em & Rem sizes

Hey All,

I am aware that Webflow supports Rem & Em when text is involved but I’m unsure where to initially set this value for the site/page. Does anyone have some insight?


Here is my public share link: LINK
(how to access public share link)

Hi @161creativedesign. That is a good question. Try setting your REMs or EMs in the BODY tag:

CloudApp

1 Like

Hey @PixelGeek,

First off, thanks for paroling the forums on the weekend.

Secondly, I have given this a try and this did not yield any change. I have some header text set to REM, and changing the body text size to 1rem, 2rem, etc, did not yield any change on the other elements. Is this value hard coded in the default body somewhere?

Read Only Link: LINK

Have you tried VW ?

I’m building a site (can’t show it yet due to NDA [sorry] ) and have text on the hero image that needs to be responsive, so went with VW and all is working great for me.

Try it out and let me know how you get on.

1 Like

Hey @Kia,

Are you saying to change the fon-size value of my text to “xvw”?

No sorry, I mean instead of using a font size like 16px use something like 2.1VW

More info about VW here… CSS Units

(I hope this is what you meant in your OP, sorry if I didn’t understand your original question)

Yeah I think I didn’t understand the original post now that I read it. But I would probably set it only on the text that you want effected rather than the whole body, but the body would also work.

I see what you mean, right now my text is set to px values at different viewpoints, I would like to text to resize in relation the the size of the viewpoints. It’s my understanding that “x-value vh” is not a valid font-size so thats why I want to use rems.

Aha ok, but this is why I use VW so that the text on my hero image (just like yours) changed depending on the viewport size.

Give it a go…

Interesting, my editor is not allowing me to enter that as a value. The value turns red when I try.

Oh that’s odd, it works fine here…

Oh boy, haha, I’ll have to reach out about that. Tha k you for your help, I’ll be trying that as soon as I get it working. You don’t by any chance know where the default size of rems is being set in webflow do you?

Hmmm, not sure, but as @PixelGeek said try setting it in the Body?

You can start with this video to learn how ems and rems work and then you can google about responsive typography. If you set 100% on the body or 16px, 1em = 16px but ems also get affected by their parent

1 Like

Hey @161creativedesign I have found this resource to be useful;

http://pxtoem.com

3 Likes

Actually I was wrong, not sure how I missed that. I was inputting something completely different. Thanks!

@AlexManyeki,

Many thanks man, I’m definitely going to use this.

1 Like

Thanks for the screen cast @PixelGeek. I have found this it’s more reliable to do this in the page specific custom code.

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