Streaming live at 10am (PST)

Responsive text with Flowtype.js

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!

thank you @myonke for your answer. This works well, but can a minimum and a maximum be determined?

https://preview.webflow.com/preview/font-f6cad0?utm_medium=preview_link&utm_source=designer&utm_content=font-f6cad0&preview=66a70f927e4b79268903b6815d63d7dc&mode=preview

Not that I am aware of, at least not natively inside Webflow, sorry!