I really like how flowtype works, which resizes a font based on the size of a screen.
Does anyone know how I can implement it in webflow?
on this website you can see how it reacts
and here is the tutorial on how to do it but i have no idea how i can do it on webflow
thank you
Hey there @Santi_Gili, welcome to the forums!
You can resize fonts in Webflow based on the screen size. To do this, simply use vw or vh instead of px when styling your font size. These stand for viewport width and viewport height, respectively. So for example, your hero heading could be something like 6vw. You can also style the line height with vw or vh.
With that said, flowtype.js doesn’t scale text based on the screen size; it scales text based on the size of the element the text is inside. So, are you looking to scale your text based on the element it is inside or the size of the screen?
Let me know if if using the vw/vh helps!
Not that I am aware of, at least not natively inside Webflow, sorry!
I would actually recommend simplifying this by using em and setting your font sizes relative to your body’s font size. I have found this to be a very simple and scalable approach when using webflow.
You can always use a tool like https://wizardry-technique.webflow.io/ in order to calculate your desired font size.
You can set your body’s font size using vw to replicate the fluid nature of this plugin, combined with em on the text containers I believe you will get the same effect but with more flexibility.
PS. always set your max screen size and mobile body to px, not vw else you will have infinitely scaling font sizes.